Question

我有一个角度构建，用作lib。在此库中，我将mat-icon用作以下内容。

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

它按预期方式工作，因此将使用编辑图标和按钮上的文本创建按钮。但是，当我更改全局字体系列时，mat-icon不显示图标，它仅显示其文本“ edit”。

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

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

如何解决该错误，使mat-icon仍然知道它会加载哪个图标？

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

应用自定义全局字体系列时，Angular Mat-icon不会加载图标

1 个答案: