Значок кнопки с контуром

Нет никакой гарантии, что разработанный код будет работать и с обновленным кодом пакета. Поскольку поломок наверняка будет немного, поскольку мне неизвестны какие-либо настройки для двух переменных в Angular Material, я предлагаю приведенное ниже решение.

Я думаю, что это всего лишь небольшая ошибка, связанная с полями. Ниже приведен проблемный CSS:

.mat-mdc-outlined-button>.mat-icon {
    margin-right: var(--mat-outlined-button-icon-spacing, 8px);
    margin-left: var(--mat-outlined-button-icon-offset, -4px);
}

Со значениями по умолчанию:

--mat-outlined-button-icon-spacing: 8px;
--mat-outlined-button-icon-offset: -8px;

Это приводит к тому, что кнопка не центрируется. Возможно, они добавили, поскольку кнопки со значками обычно также включают в себя текстовый компонент. Поэтому между текстом и значком должен быть пробел.

Для вашего конкретного сценария у вас есть два возможных решения.

Исправьте глобально, но учтите: текст со значками внутри кнопки не будет иметь между собой пробелов. Исправление будет состоять в том, чтобы установить две указанные выше переменные в ноль на глобальном уровне:

body {
  --mat-outlined-button-icon-spacing: 0px;
  --mat-outlined-button-icon-offset: 0px;
}

Демо-версия Stackblitz

Я думаю, вам следует добавить класс и исправить это.

HTML:

<button mat-stroked-button class = "center-align-icon-only">
  <mat-icon>check_circle</mat-icon>
</button>

CSS:

.center-align-icon-only {
  --mat-outlined-button-icon-spacing: 0px;
  --mat-outlined-button-icon-offset: 0px;
}

Демо-версия Stackblitz

Кнопки с контурными значками не являются частью Material design, поэтому да, вам нужно создать собственное решение. Вопрос о том, почему этого нет в спецификации Material Design, является чистым предположением и, следовательно, основан на мнениях.

Если вы не хотите возиться с полями, я думаю, что самым простым и перспективным решением было бы взять mat-icon-button в качестве основы и добавить рамку. Чтобы сделать ее того же размера, что и обычная кнопка с обводкой, вы можете использовать плотность -3:

:host {
  @include mat.icon-button-density(-3);
}

.outlined-icon-button {
  border: 1px solid rgba(0, 0, 0, 0.12);
}

Демо Stackblitz: https://stackblitz.com/edit/nkmkku?file=src%2Fexample%2Fbutton-overview-example.scss

Нет 100% гарантии, что он продолжит работать с новыми версиями Angular Material, но, по моему мнению, это самое надежное решение.

Вы также можете попробовать изменить радиус границы на 4 пикселя, но это будет немного сложнее, так как радиус границы пульсации также необходимо переопределить:

.outlined-icon-button {
  border: 1px solid rgba(0, 0, 0, 0.12);

  &,
  ::ng-deep .mat-mdc-button-persistent-ripple {
    border-radius: 4px;
  }
}