Блог

Я создаю простое поле ввода автозаполнения с кнопкой закрытия в конце, которая очистит поле

 <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, кнопка больше не расположена на одной строке, конечно, но она масштабируется вместе со значком и правильно его центрирует

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

Я использовал следующий стиль, чтобы лучше выровнять свои значки:

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

Это избавило от пробела справа (выравнивание по горизонтали) и немного переместило значок вниз, чтобы лучше выровнять его с моим элементом управления календарем или другими значками ввода. Просто убедитесь, что это не нарушает какой-либо другой стиль, в котором используются значки мата, и в этом случае вам придется специально стилизовать только значки мата для входных данных, где это необходимо, и не применять это повсеместно.