Угловой мат-значок не загружается значок, когда применяется пользовательское глобальное семейство шрифтов

Question

У меня угловая сборка, которую я использую как lib. В этой библиотеке я использую значок mat как следующее.

<button>
    <mat-icon>
        edit
    </mat-icon>
    Edit
</button>

Работает должным образом, поэтому кнопка создается со значком редактирования и текстом на кнопке. Но когда я изменил глобальное семейство шрифтов, на значке mat не отображается значок, он просто отображает текст «edit».

@font-face {
    font-family: MetaWebNormal;
    src: url("assets/fonts/MetaWeb-Normal.woff") format("woff");
}

* {
    font-family: 'MetaWebNormal' !important;
}

Как я могу исправить ошибку, чтобы мат-значок все еще знал, какую иконку он загружает?

Answer 1

Это потому, что вы переопределили классы семейства иконок-шрифтов своими собственными, используя

font-family: 'MetaWebNormal' !important

При этом браузер больше не сможет использовать иконки шрифтов, установленные в нужных местах.

Не используйте !important (поскольку оно принудительно переопределяет данное свойство, даже если оно установлено непосредственно для данного элемента, который имеет верхний приоритет), и не исключайте mat-icons из этого правила.

Бонус:

Я только что проверил и все работает

*{
   This breaks the icons
  /* font-family: Arial, Helvetica, sans-serif !important; */
}

   But this does not
*:not(mat-icon){
  font-family: Arial, Helvetica, sans-serif !important;
}

https://stackblitz.com/edit/angular-cfp7qg?file=app/icon-svg-example.css