Comment enregistrer md-icon (Material2) à utiliser dans différents modules et composants

Question

J'ai 3 modules dans mon application et je veux afficher des icônes dans différentes pages html. J'ai un dossier d'actifs où j'ai le fichier icon-set.svg.

Actuellement, je suis en mesure de rendre les icônes dans ma page app.component.html en enregistrant mdIconRegistry dans le fichier app.module.ts.

export class AppModule { 
constructor(private mdIconRegistry: MdIconRegistry, private sanitizer: 
DomSanitizer) { 

    mdIconRegistry.addSvgIcon('settings',sanitizer.bypassSecurityTrustResourceUrl('assets/images/icons/settings.svg')) 
} 
} 

Je souhaite rendre les icônes dans une autre page html qui réside dans le module à savoir navbar.module.ts. Les icônes ne sont pas rendus dans navbar.component.html après l'enregistrement de mdIconRegistry dans app.module.ts.

Je dois explicitement écrire le code constructeur dans navabar.module.ts comme indiqué ci-dessous pour obtenir la sortie désirée.

export class NavbarModule { 
constructor(private mdIconRegistry: MdIconRegistry, private sanitizer: 
DomSanitizer) { 

    mdIconRegistry.addSvgIcon('settings',sanitizer.bypassSecurityTrustResourceUrl('assets/images/icons/settings.svg')) 

} 
} 

Y at-il une meilleure façon de faire thsi globalement plutôt que de re-writng code constructeur encore et encore pour différents mdoules.

Answer 1

registre Juste icône à votre AppModule:

@NgModule([ 
    imports: [ 
     MdIconModule 
    ] 
]) 
export class AppModule { 
    constructor(private mdIconRegistry: MdIconRegistry, private sanitizer: DomSanitizer) { 
     mdIconRegistry.addSvgIcon('settings', sanitizer.bypassSecurityTrustResourceUrl('assets/images/icons/settings.svg')); 
    } 
} 

Answer 2

Ce que je l'ai fait est d'enregistrer l'icône dans mes app.component.ts comme suit:

export class AppComponent implements OnInit { 
    constructor(private mdIconRegistry: MdIconRegistry, 
       private sanitizer: DomSanitizer) {} 

    ngOnInit() { 
    this.mdIconRegistry.addSvgIconInNamespace('namespace', 'icon-name', 
     this.sanitizer.bypassSecurityTrustResourceUrl('path-to-icon.svg') 
    ); 
    } 

} 

Dans mon app.module.ts Im importation MdIconModule, mais vous devez également importer MdIconModule dans chacun de vos sous-modules (pas besoin d'enregistrer des icônes personnalisées à nouveau)

Vous pouvez envisager d'avoir un SharedModule que les importations/exportations des composants matériels, et seulement importer ce nouveau SharedModule dans chacun de vos sous-modules (y compris app.module)