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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular Material图标中fontSet的默认值是多少?相关的知识,希望对你有一定的参考价值。

我的应用程序中有一些自定义图标,呈现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

快乐的编码。

以上是关于Angular Material图标中fontSet的默认值是多少?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular Material 11 的 MatSlideToggle 中使用图标?

如何将 Angular Material 图标资产路径与 Django 模板集成?

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

Angular 9 - 删除 Angular Material Stepper 上的默认图标(创建)

如何合并不在 Google Material for Angular 中的图标?

如何让 Angular Material Icon 在我的 Angular 应用程序中显示轮廓?