如何正确地注册字体真棒为MD-图标？

的md-icon该文档描述了如何使用字体真棒几个部分，并建议我们可以用字体真棒最终像如何正确地注册字体真棒为MD-图标？

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

但文档是非常混乱，我几乎找不到一个例程注册3字体通过Google设置为像md-icon的font-awesome。

任何帮助表示赞赏！

PS：我知道正常的<i>的方式一般工作，但它似乎没有工作在一些examples，其中最初使用md图标。在你的index.html文件

来源

2017-05-07 Haoliang Yu

添加字体真棒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>

来源

2017-05-09 07:16:46

这是出奇的简单。谢谢。 –

这不是为md-icon注册font-awesome的正确方法。请参阅下面的答案。 – SeanStanden

在你的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在项目中的某处。我用角CLI因此添加的字体真棒NPM包：

npm install font-awesome --save

，并包括其在角cli.json文件样式列表中为我工作：

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

更新2

更改前缀为“垫”，以反映最近的更新的角度材料。

来源

2017-09-14 00:43:26 SeanStanden

添加字体真棒你的索引。html页面：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

添加MatIconModule您AppModule：

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

@NgModule({ 
    declarations: [], 
    imports: [ 
    MatIconModule 
    ]...

最后加入你的app.component.html图标：

<mat-icon>menu</mat-icon>

来源

2018-02-18 14:05:49

如何正确地注册字体真棒为MD-图标？

回答

相关问题