Jak poprawnie zarejestrować font-awesome dla md-icon?

Question

Dokumentacja md-icon opisuje jak używać font-niesamowite w kilku częściach i sugeruje, możemy użyć font-niesamowite ostatecznie jak

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

Ale dokumentacja jest bardzo mylące i trudno mi znaleźć rutynę zarejestrować 3rd czcionki ustawić jak font-awesome dla md-icon przez Google.

Każda pomoc jest doceniana!

PS: Wiem, że normalny sposób na <i> ogólnie działa, ale nie działa w niektórych examples, gdzie ikona-md jest używana pierwotnie.

Answer 1

dodawania czcionki niesamowite połączenie cdn w pliku index.html:

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

Następnie spróbuj umieścić ten kod, to działa na mnie:

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

Answer 2

W swojej AppModule dodatku:

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

Następnie dodaj MatIconModule do importu, np .:

imports: [... 
    MatIconModule 
...] 

Dodaj MatIconRegistry do swoich dostawców:

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

Następnie dodać następujące klasy AppModule:

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

Następnie można użyć w dowolnym miejscu w projekcie tak:

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

Aktualizacja

Musisz dołączyć fontawesome w swoim projekcie gdzieś. Używam kątową-cli więc dodając font-niesamowite npm pakiet:

npm install font-awesome --save 

oraz włączenie go w liście stylów w pliku kątowe-cli.json działa dla mnie:

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

Aktualizacja 2

Zmieniono przedrostki na "Mat", aby odzwierciedlały najnowsze aktualizacje materiału kątowego.

Answer 3

Dodaj czcionkę niesamowitą do swojego indeksu.strona html:

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

Dodać MatIconModule aby Twój AppModule:

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

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

Wreszcie dodać ikonę w swojej app.component.html:

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