Angular Material图标中fontSet的默认值是多少？

Posted 2023-01-15

我的应用程序中有一些自定义图标，呈现by setting the fontSet property

<mat-icon fontSet="myFont" fontIcon="my-icon"></mat-icon>

现在，我希望保持一致，并使用它们的字体集来渲染Angular Material图标

<mat-icon fontSet="md" fontIcon="add"></mat-icon>

但它不起作用。所以我想知道Angular Material图标中fontSet的默认值是多少？

答案

要使用fontSet，您必须声明自定义字体：

@font-face 
  font-family: 'icomoon';
  src: url('path.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

您有2个选项可以使用角度Mat-Icon

1）课程申请

.MyIconClass

    font-family: 'MyFontFamily' !important;

2）注册到AppComponent

constructor(iconRegistry: MatIconRegistry) 
   iconRegistry.registerFontClassAlias('MyFontFamily', 'MyIconClass');

然后你就可以显示图标了：

<mat-icon fontSet="MyIconClass" fontIcon="LigatureOrUnicodeToDisplay"></mat-icon>

要么

<mat-icon fontSet="MyIconClass">LigatureOrUnicodeToDisplay</mat-icon>

如果你像我一样，并且不想拥有更多的参数，只需用你自己的字体替换.material-icons。

.material-icons 
  font-family: 'MyFontFamily';
...

然后你就可以像这样使用它

LigatureToDisplay

我喜欢。

您可以使用此链接使用svg创建自己的图标集。

https://icomoon.io

快乐的编码。