时间戳

首页 > 解决方案 > Angular Material 图标中 fontSet 的默认值是多少？

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

问题描述

我的应用程序中有一些自定义图标，这些图标是通过设置 fontSet 属性来呈现的 

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

现在，我想保持一致并使用它们的字体设置来渲染 Angular Material 图标，如下所示

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

但它不起作用。所以我想知道fontSetAngular Material图标中的默认值是什么？

标签： angularangular-material

解决方案

为了使用 fontSet 你必须声明你的自定义字体：

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

你有 2 个选项可以将它与 angular 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';
...
}

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

连字显示

我喜欢。

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

https://icomoon.io

快乐编码。

推荐阅读