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>

但是，我注意到该按钮无法通过Mat-icon正确缩放，并且该图标显示在该按钮的水平中心右侧稍微偏一点的位置。尝试过文本对齐和浮动，但没有任何效果。然后，我删除了matSuffix，按钮不再位于同一行上，而是随着图标缩放并正确居中

Answer 1

听起来像https://github.com/angular/material2/issues/10313。解决方法是将按钮的字体大小，宽度和高度（可能还有行高）应用于按钮，以抵消后缀对其执行的操作。

Answer 2

我使用以下样式更好地对齐图标：

mat-icon {
  margin-right: 0px !important;
  vertical-align: middle;
}

这消除了右侧的空间（水平对齐），并将图标向下移一点以更好地与我的日历控件或其他输入图标对齐。只要确保这不会破坏使用mat-icon的任何其他样式，在这种情况下，您将只需要在需要的输入中仅对mat-icon进行样式设置，而不必全盘使用。