CODEWITHSUNDEEP
angularangular-material
L. Guthardt
L. Guthardt

Reputation: 2056

Angular mat-icon does not load icon when custom global font family applied

I am having an angular build which I use as a lib. In this lib I use the mat-icon as the following.

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

It works as exspected, so the button is created with the edit icon and the text on the button. But when I changed the global font family the mat-icon does not show the icon, it just displays its text "edit".

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

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

How can I fix the bug so that the mat-icon still knows which icon it shell load?

Upvotes: 2

Views: 2778

Answers (1)

Antoniossss
Antoniossss

Reputation: 32507

Its because you have overriden icon-font family classes with your own using

font-family: 'MetaWebNormal' !important

Doing so, browser will no longer be able to use font-icons set in required places.

Don't use !important (as it force override given property even if it is set directly on given element which has top precedence), or exclude mat-icons from that rule.

Bonus:

I just tested and and it works

*{
   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

Upvotes: 3

Related Questions