Значок Angular Material Icon явно не выровняется, что бы вы с ним не делали? Хотя директивы Flex Layout и CSS влияют на это, они просто никогда не выравниваются

Question

Пример: https://i.imgur.com/Xd0XkmE.png

Я попытался fxFlexAlign - fxLayoutAlign на родителя, давая ему идентификатор и используя display:flex + justify-content:center with! Важный для всех.

Дело в том, что все вышеперечисленное делает с этим что-то, оно реагирует на директивы CSS и FlexLayout, но все равно выглядит явно выровненным, несмотря ни на что.

При осмотре становится ясно, что он растет из правого нижнего угла своего "контейнера" и просто не заботится о выравнивании.

Есть ли что-то, чего мне не хватает при работе с ними? Я просмотрел документацию + stackru + погуглил ее и не могу ничего найти.

Answer 1

Вы упоминаете в комментарии в ответе, который вы опубликовали, что вы меняете размер шрифта и это вызывает проблемы. Я думаю, что помню, как заметил ошибку с этим - по крайней мере, я знаю, что столкнулся с ней. В дополнение к размеру шрифта вам необходимо соответствующим образом настроить ширину и высоту. С практической точки зрения, вероятно, лучше всего определить классы для обработки всего этого и применить их к элементам mat-icon. Например:

.mat-icon-16 {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

<mat-icon class="mat-icon-16">help<mat-icon>

Обратите внимание, что высота строки также играет бросок, но по умолчанию это "1", поэтому вам не нужно это менять.

Answer 2

Закончилась замена всего на font-awesome с иконками svg, немного утомительнее импортировать каждую иконку, но размер пакета невелик, и он не может поспорить со значением svg. Я не буду касаться значков материалов в следующем десятилетии.