С помощью 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>

Однако я заметил, что кнопка не масштабируется должным образом со значком циновки, и значок появляется немного правее от горизонтального центра кнопки. Пробовал выравнивать текст и плавать, но ни один не работает. Затем я удалил matSuffix, кнопка больше не располагается на одной строке couse, но она масштабируется со значком и корректно центрируется

Answer 1

Похоже на https://github.com/angular/material2/issues/10313. Исправление состоит в том, чтобы применить размер шрифта, ширину и высоту (и, возможно, высоту строки) к кнопке, чтобы противостоять тому, что суффикс мата делает с ней.