À l'aide de 2 icônes angulaires

j'essaie d'utiliser le matériel angulaire 2 pour afficher des icônes sur mon site Web, mais je suis un peu confus.

<!-C'est comme ça que ça doit marcher, d'après la démo dans github repo de material 2:

https://github.com/angular/material2/blob/master/src/demo-app/icon/icon-demo.ts

j'ai essayé de l'utiliser mais pas d'icônes sont affichées.

Voici comment je l'ai installé:

app.composant.ts

import {MdIcon, MdIconRegistry} from '@angular2-material/icon/icon';

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  viewProviders: [MdIconRegistry],
  directives: [MdIcon],
})
export class MyComponent{
  constructor(private router: Router,
              private JwtService:JwtService,
              mdIconRegistry: MdIconRegistry){
    mdIconRegistry.addSvgIconSetInNamespace('core', 'fonts/core-icon-set.svg')
  }
}

et modèle..

<md-icon>home</md-icon>

La page se charge sans erreurs, mais aucune icône n'est affichée. Ce qui pourrait mal tourner?

18
demandé sur Sonicd300 2016-05-12 20:32:41

9 réponses

afin d'utiliser MdIcon, vous devez inclure la correspondante css fichiers. Dans votre code, vous utilisez la police par défaut qui est Material Icons à partir de google.

angulaires-material2 repo:

Par défaut Matériel icônes de police est utilisé. (Vous aurez toujours besoin d'inclure le HTML pour charger la police et son CSS, comme décrit dans le lien).

Simplement, il suffit d'inclure le css index.html comme ceci:

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

Ou vous pouvez choisir n'importe quelle autre méthode d'importation mentionnées dans le repo officiel:

http://google.github.io/material-design-icons/#icon-font-for-the-web

28
répondu Abdulrahman 2016-11-09 23:01:37

il vaut la peine de savoir que pour utiliser un espace d'icône séparé (par exemple téléchargement de fichier) Nous avons besoin d'utiliser underscore _ . Par exemple:

<md-icon>file_upload</md-icon>
15
répondu Milso 2016-12-22 17:47:30

@ngModule introduction à partir de la syntaxe RC5 angulaire serait comme suit:

application-exemple-module.ts

import { MdIconModule, MdIconRegistry } from '@angular2-material/icon';

@NgModule({
    imports: [
        MdIconModule
    ]
    providers: [
        MdIconRegistry
    ]
})

export class AppExampleModule {
    //
}

application-exemple-composant.ts

@Component({

    selector: 'app-header',
    template: `<md-icon svgIcon="close"></md-icon>`
})


export class AppExampleComponent
{
    constructor(private mdIconRegistry: MdIconRegistry) {
        mdIconRegistry
            .addSvgIcon('close', '/icons/navigation/ic_close_36px.svg');
    }
}
12
répondu user991 2017-03-02 19:02:33

à l'intérieur de style.css copiez et collez le code suivant:---

@import "https://fonts.googleapis.com/icon?family=Material+Icons";

et utiliser comme:

<md-icon>menu</md-icon>
          ^--- icon name
10
répondu Deepak swain 2017-07-25 21:00:28

angulaire 4.3.3 avec @anguleuse/matière 2.0.0-bêta-7, vous avez aussi besoin de stériliser l'url.

import { DomSanitizer } from '@angular/platform-browser';

export class AppComponent
{
    constructor(
        private domSanitizer: DomSanitizer,
        private mdIconRegistry: MdIconRegistry) {
        mdIconRegistry.addSvgIcon('twitter', domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/twitter.svg'));
    }
}
3
répondu mkaj 2017-08-26 23:30:00

C'est le chemin, j'ai essayé et ça fonctionne.

mdIconRegistry.addSvgIcon('slider', sanitizer.bypassSecurityTrustResourceUrl('./assets/controls/slider.svg'));

exemple mdIconRegistry sera disponible via DI et add custom svg en utilisant addSvgIcon méthode. Ensuite, utilisez <md-icon svgIcon="slider"> dans votre modèle.

0
répondu Malkeet Singh 2017-12-07 04:07:34

travailler hors connexion(fournir css de votre serveur):

  1. npm install matériau-design-icônes --save
  2. dans src / styles.css ajouter @import "~material-design-icons/iconfont/material-icons.css";
0
répondu Valentin Bossi 2018-03-30 12:44:16

il suffit d'ajouter la ligne suivante dans l'index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
0
répondu mangesh ipper 2018-04-11 07:12:06

vous devez aussi importer Http.

import {HTTP_PROVIDERS} from '@angular/http';
import {MdIcon, MdIconRegistry} from  '@angular2-material/icon';
@Component({
    template:`<md-icon>code</md-icon>`
    directives:[MdIcon],
    providers: [HTTP_PROVIDERS, MdIconRegistry]
})
-4
répondu Diana Quintanilla 2017-03-02 17:12:27