Angular Material图标中fontSet的默认值是什么？

Question

我的应用程序中有一些自定义图标，这些图标显示为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的默认值是什么？

Answer 1

要使用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

快乐的编码。