Comment faire pour enregistrer correctement font-awesome pour le md-icône?

Question

La documentation de md-icône décrit comment utiliser la police-génial en plusieurs parties et suggère que nous pourrions utiliser font-awesome par la suite comme

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

Mais la documentation est très compliqué et j'ai du mal à trouver une routine pour vous inscrire 3ème police définie comme la police-génial pour la md-icône via Google.

Toute aide est appréciée!

PS: je sais que la normale <i> moyen, généralement cela fonctionne, mais il ne semble pas fonctionner dans certains exemples, où le md-icône est utilisée à l'origine.

Answer 1

Dans votre AppModule ajouter:

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

Puis ajouter MatIconModule pour vos importations par ex.:

imports: [...
   MatIconModule
...]

Ajouter MatIconRegistry à vos fournisseurs:

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

Ensuite, ajoutez les lignes suivantes à votre AppModule classe:

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

Ensuite, vous pouvez utiliser n'importe où dans votre projet comme suit:

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

Mise à jour

Vous aurez besoin d'inclure fontawesome dans votre projet quelque part. J'utilise angulaires-cli ainsi, l'ajout de la font-awesome package npm:

npm install font-awesome --save

et en l'incluant dans la liste des styles dans angulaires-cli.fichier json qui fonctionne pour moi:

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

Mise à jour 2

Changé préfixes 'Mat' pour tenir compte des dernières mises à jour angulaire du matériel.

Answer 2

Ajouter de la police génial ca dans votre lien Index.html fichier:

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

Puis, essayez de mettre ce code, Cela fonctionne pour moi:

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

Answer 3

J'ai d'installation https://github.com/FortAwesome/angular-fontawesome#using-the-icon-library

La façon dont je puis l'utiliser:

<mat-form-field>
    <input matInput style="width: calc(100% - 20px);/>
    <fa-icon [icon]="['fal', 'home']" size="lg" class="fa-pull-right"></fa-icon>                  
</mat-form-field>