web-dev-qa-db-fra.com

Utilisation d'icônes matérielles angulaires 2

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

Voici comment cela est supposé fonctionner, à partir de la démo dans github repo du matériau 2:

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

J'ai essayé de l'utiliser, mais aucune icône ne s'affiche.

Voici comment je l'ai mis en place:

app.component.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 le modèle ..

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

La page se charge sans erreur, mais aucune icône n'est affichée. Qu'est-ce qui aurait pu mal tourner?

angularangular-material
21
TheUnreal

Pour utiliser MdIcon, vous devez inclure les fichiers css correspondants. Dans votre code, vous utilisez la police par défaut qui est Material Icons de Google.

De angular-material2 repo :

Par défaut, la police d'icônes Matériau est utilisée. (Vous devrez toujours inclure le code HTML pour charger la police et son code CSS, comme décrit dans le lien).

Il suffit simplement d’inclure le css dans 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ée dans le rapport officiel:

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

31
Abdulrahman

Il faut savoir que pour utiliser une icône séparée par un espace (par exemple, le téléchargement de fichiers), nous devons utiliser le trait de soulignement _. Par exemple:

<md-icon>file_upload</md-icon>
16
Milso

À partir de @ngModule introduction à partir de la syntaxe angulaire RC5, voici la procédure:

app-example-module.ts 

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

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

export class AppExampleModule {
    //
}

app-example-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');
    }
}
13
user991

inside style.css copiez et collez ce qui suit: ---

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

et utiliser comme:

<md-icon>menu</md-icon>
          ^--- icon name
11
Deepak swain

Dans la section 4.3.3 angulaire avec @ angular/material 2.0.0-beta-7, vous devez également assainir 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'));
    }
}
4
mkaj

Pour travailler en mode hors connexion/local (fournissez des css de votre serveur)

  1. npm installe materiel-design-icones --save
  2. dans src/styles.css, ajoutez @import "~material-design-icons/iconfont/material-icons.css";
2
Valentin Bossi

C'est comme ça que j'ai essayé et ça marche.

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

L'instance mdIconRegistry sera disponible via DI et ajoutera un svg personnalisé en utilisant la méthode addSvgIcon. Ensuite, utilisez <md-icon svgIcon="slider"> dans votre modèle.

0
Malkeet Singh

Ajoutez simplement la ligne suivante sur index.html

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