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

我有一个有角度的构建，我用它作为库。在这个库中，我使用mat图标，如下所示

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

---

如何修复该错误，使mat图标仍然知道它加载的是哪个图标？

这是因为您已经用自己的使用覆盖了图标字体系列类

字体系列：“MetaWebNormal”！重要信息

这样，浏览器将无法再使用在所需位置设置的字体图标

不要使用

！重要信息

（因为它强制覆盖给定的属性，即使它直接设置在具有最高优先级的给定元素上），或者从该规则中排除mat图标

奖金：

我只是测试了一下，它能正常工作

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

---

@lguthard您没有添加此

是索引file@Abhishek我当然知道。正如我所说，带有图标的按钮工作正常。当我更改全局字体系列时，它只是不显示图标。更改后，它只显示文本“编辑”。

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