Wie richtig font-awesome für md-icon registrieren?

Question

Die Dokumentation von md-icon beschreibt, wie in mehreren Teilen font-awesome verwenden, und schlägt vor, wir schließlich font-awesome wie

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

Aber die Dokumentation ist sehr verwirrend und ich kann kaum eine Routine registrieren 3. Schrift finden nutzen könnten Stellen Sie sich wie font-awesome für md-icon über Google ein.

Jede Hilfe wird geschätzt!

PS: Ich weiß, die normale <i> Weg funktioniert im Allgemeinen, aber es scheint nicht funktioniert in einigen examples, wo das MD-Symbol ursprünglich verwendet wird.

Answer 1

Add font ehrfürchtiger CDN Link in Ihrer Index.html-Datei:

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

Dann versuchen Sie diesen Code setzen, für mich funktioniert:

<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

In Ihrem AppModule add:

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

Dann fügen Sie MatIconModule zu Ihren Importen hinzu, zB:

imports: [... 
    MatIconModule 
...] 

MatIconRegistry zu Ihrem Anbieter hinzufügen:

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

folgenden Ihre AppModule Klasse Dann fügen:

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

Dann können Sie überall in Ihrem Projekt wie so verwenden:

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

Aktualisieren

Sie müssen fontawesome in Ihrem Projekt irgendwo enthalten. Ich benutze Winkel-cli so Hinzufügen der Schriftart-awesome npm Paket:

npm install font-awesome --save 

einschließlich es in verschiedenen Schnitten Liste in Winkel cli.json Datei funktioniert für mich:

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

Update 2

Geänderte Präfixe zu 'Mat', um die letzten Aktualisierungen des eckigen Materials zu berücksichtigen.

Answer 3

Fügen Sie font awesome zu Ihrem Index hinzu.HTML-Seite:

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

In der MatIconModule zu Ihrem AppModule:

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

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

Schließlich fügen Sie das Symbol in der app.component.html:

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