如何为md-icon正确注册font-awesome？

Question

md-icon的文档描述了如何在几个部分中使用font-awesome,并建议我们最终可以使用font-awesome

<md-icon fontSet="fa" fontIcon="alarm"></md-icon>

但是文档非常令人困惑,我几乎找不到通过Google为md-icon注册第三种字体集如font-awesome的例程.

任何帮助表示赞赏!

PS:我知道通常的<i>方法通常有效,但在一些最初使用md-icon的例子中似乎没有用.

Answer 1

在你的AppModule中添加:

import { MatIconModule, MatIconRegistry } from '@angular/material';

然后将MatIconModule添加到您的导入中,例如:

imports: [...
   MatIconModule
...]

将MatIconRegistry添加到您的提供者:

providers: [...
    MatIconRegistry
....]

然后将以下内容添加到AppModule类:

export class AppModule {
    constructor(
        ...public matIconRegistry: MatIconRegistry) {
        matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
    }

然后您可以在项目中的任何位置使用,如下所示:

<mat-icon fontSet="fa" fontIcon="fa-times-circle"></mat-icon>

更新

你需要在你的项目中包含fontawesome.我使用angular-cli,所以添加了字体很棒的npm包:

npm install font-awesome --save

并将其包含在angular-cli.json文件的样式列表中,对我有用:

"styles": [
    ...
    "../node_modules/font-awesome/scss/font-awesome.scss",
  ],

更新2

将前缀更改为"Mat"以反映角度材质的最新更新.

Answer 2

在Index.html文件中添加字体awesome cdn链接:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

然后尝试使用此代码,它对我有用:

<md-icon class="fa fa-clock-o" aria-hidden="true"></md-icon>
<md-icon class="fa fa-bell" aria-hidden="true"></md-icon>