À 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?
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.
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
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>
@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');
}
}
à 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
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'));
}
}
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.
travailler hors connexion(fournir css de votre serveur):
- npm install matériau-design-icônes --save
- dans src / styles.css ajouter
@import "~material-design-icons/iconfont/material-icons.css";
il suffit d'ajouter la ligne suivante dans l'index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
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]
})