ngFor (Angular 2) 中使用的字体真棒和材质图标

Question

我有一个动态的图标列表，显示在右侧栏中。图标根据用户的操作传递到侧边栏中。此动态图标数组使用ngFor显示。

不幸的是，有些图标来自Font Awesome，有些来自Google Material。

<!--Font Awesome-->
<i class="{{myIcon}}"></i>
<!--Material-->
<md-icon>{{myIcon}}></md-icon>
<!--Or-->
<i class="material-icon">{{myIcon}}</i>

看到它们不完全匹配，您如何让它们使用 ngFor 显示这两种类型，除了图标名称的字符串之外什么都没有。

Answer 1

我有一个解决方案给你。我刚刚实现了这个。

现在我知道您要求 *ngFor 之间有什么，以便根据图标字符串动态选择和呈现适当的图标，但我将记录完整的解决方案，包括为其他人注册字体真棒。

让我们从顶部开始，确保你的标题中包含字体真棒 css。您可以让 fontawesome 通过电子邮件向您发送指向其 CDN 版本的链接 此处 http://fontawesome.io/get-started/并将其包含在您的标题中。

<script src="https://use.fontawesome.com/c26638a4cc.js"></script>

接下来，在 app.module 中创建并注册 fontawesome 的别名。您可以通过首先导入以下内容来执行此操作：

import { MdIconModule, MdIconRegistry } from '@angular/material';

不要忘记在您的提供商中包含MdIconRegistry。

providers: [ 
...
MdIconRegistry,
...
], 

然后让我们在我们的AppModule中注册fontawesome与MdIconRegistry，就像这样。

constructor(..., 
public mdIconRegistry: MdIconRegistry) {
mdIconRegistry.registerFontClassAlias('fontawesome', 'fa');
...
}

到目前为止，我们所做的允许我们在应用程序中使用字体真棒图标，如下所示：

<md-icon class="some-class" fontSet="fa" fontIcon="fa-trophy"></md-icon> 

现在让我们回答最初的问题，即如何仅基于图标字符串动态显示材料设计图标或字体真棒图标。

为此，我将依靠以"fa-"前缀开头的字体真棒图标。如果我们对此感到满意，那么我可以检查"fa-"并使用它来适当地设置fontSet和fontIcon。

<md-list-item *ngFor="let menuitem of menuList">
<button md-button ...>
<md-icon [fontSet]="menuitem.icon.substr(0,3) === 'fa-' ? 'fa' : ''" 
[fontIcon]="menuitem.icon.substr(0,3) === 'fa-' ? menuitem.icon : ''" 
[ngClass]="{'your-fa-custom-class': true }">
<span>{{ menuitem.name }} </span>
</button>

ngClass 包括 .your-fa-custom-class，您可以在其中专门更改字体真棒图标的字体大小。

一切就绪！