web-dev-qa-db-fra.com

Comment enregistrer correctement font-awesome pour md-icon?

La documentation de md-icon explique comment utiliser font-awesome en plusieurs parties et suggère d'utiliser éventuellement font-awesome comme

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

Mais la documentation est très déroutante et je peux difficilement trouver une routine pour enregistrer la 3ème série de polices, comme font-awesome pour md-icon via Google.

Toute aide est appréciée!

PS: Je connais la normale <i> _ _ fonctionne généralement mais cela ne semble pas fonctionner dans certains exemples , où l'icône md est utilisée à l'origine.

angular-material2
30
Haoliang Yu

Ajoutez le lien cdn de police génial dans votre fichier Index.html:

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

Alors essayez de mettre ce code, ça marche 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>
20
AmanDeepSharma

Dans votre AppModule, ajoutez:

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

Ajoutez ensuite MatIconModule à vos importations, par exemple:

imports: [...
   MatIconModule
...]

Ajoutez MatIconRegistry à vos fournisseurs:

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

Ajoutez ensuite les éléments suivants à votre classe AppModule:

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

Ensuite, vous pouvez utiliser n’importe où dans votre projet comme ceci:

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

Mise à jour

Vous devrez inclure fontawesome dans votre projet quelque part. J'utilise angular-cli, donc en ajoutant le paquet npm font-awesome:

npm install font-awesome --save

et l'inclure dans la liste des styles dans le fichier angular-cli.json fonctionne pour moi:

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

Mise à jour 2

Les préfixes ont été changés en 'Mat' pour refléter les mises à jour récentes en angular angulaire).

80
SeanStanden

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

La façon dont je l'utilise alors:

<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>
0
Hypenate