如何正確地註冊字體真棒爲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-圖標？

回答

相關問題