Comment puis-je parcourir et afficher les icônes dans IconRegistry d'Angular?

Question

Dire que j'ai un ensemble de coutume icons enregistré:

iconRegistry 
    .addSvgIcon('one', sanitizer.bypassSecurityTrustResourceUrl('images/one.svg')) 
    .addSvgIcon('two', sanitizer.bypassSecurityTrustResourceUrl('images/two.svg')) 
    .addSvgIcon('three', sanitizer.bypassSecurityTrustResourceUrl('images/three.svg')); 

Je voudrais les rendre dans une page de la bibliothèque d'icônes. Comment puis-je accéder aux données du registre dans une structure *ngFor, par exemple?

Answer 1

Si vous pouvez en quelque sorte enregistrer la liste des noms d'icônes à un tableau à l'intérieur du composant, alors vous boucle pourrait par elle dans le modèle comme celui-ci,

composant

iconList = ['one', 'two', 'three']; 

modèle

<md-icon *ngFor="let iconName of iconList" [svgIcon]="iconName"></md-icon> 

EDIT

Comme suggéré dans les commentaires, vous pouvez commencer par la liste pour enregistrer ces icônes en utilisant la méthode addSvgIcon.

composant

constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) { 
    this.iconList.forEach((iconName) => { 
    iconRegistry.addSvgIcon(
     iconName, 
     sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/' + iconName + '.svg')); 
    }); 
    } 

Answer 2

En supposant que vous avez construit votre iconRegistry dans votre constructeur comme recommandé:

component.ts

iconList = []; 

ngOnInit() { 
    this.iconRegistry['_svgIconConfigs'].forEach((value, key) => { 
    this.iconList.push(key.slice(1)); 
    }); 
} 

component.html

<md-icon *ngFor="let iconName of iconList" [svgIcon]="iconName"></md-icon> 

Voici une démo plunker avec svg pour montrer en action.