html - matSuffix 使 mat-icon 不在 mat-icon-button 中水平居中

Question

我正在制作一个简单的自动完成输入字段，最后有一个关闭按钮可以清除该字段

<mat-form-field>
    <input matInput type="text">
    <button matSuffix mat-icon-button>
        <mat-icon>close</mat-icon>
    </button>
    <mat-autocomplete>...</mat-autocomplete>
</mat-form-field>

但是，我注意到该按钮无法与垫子图标一起正确缩放，并且该图标看起来有点偏离按钮水平中心的右侧。试过文本对齐和 float ，但都不起作用。然后我删除了 matSuffix，按钮不再位于同一条线上，但它随图标缩放并正确居中

Answer 1

听起来像 https://github.com/angular/material2/issues/10313 .解决方法是将字体大小、宽度和高度(可能还有行高)应用到按钮，以抵消 mat-suffix 对其的影响。