如何重构在angular-material中添加自定义图标



要添加自定义图标,然后在mat-icon标签中使用它们,请这样做,这已经为我工作了:

private domSanitizer: DomSanitizer){
this.sessionService.currentLanguage = 'es';
this.matIconRegistry
.addSvgIcon("downloadIcon", this.domSanitizer.bypassSecurityTrustResourceUrl("../../assets/images/icons/download-arrow.svg"))
.addSvgIcon("filterIcon", this.domSanitizer.bypassSecurityTrustResourceUrl("../../assets/images/icons/filter-icon.svg"))
.addSvgIcon("investmentIcon", this.domSanitizer.bypassSecurityTrustResourceUrl("../../assets/images/icons/investment-icon.svg"))
.addSvgIcon("pensionFundsIcon", this.domSanitizer.bypassSecurityTrustResourceUrl("../../assets/images/icons/pension-funds-icon.svg"))
.addSvgIcon("realEstatesIcon", this.domSanitizer.bypassSecurityTrustResourceUrl("../../assets/images/icons/real-estates-icon.svg"))
.addSvgIcon("logoutIcon", this.domSanitizer.bypassSecurityTrustResourceUrl("../../assets/images/icons/sign-off-icon.svg"))
.addSvgIcon("downArrowIcon", this.domSanitizer.bypassSecurityTrustResourceUrl("../../assets/images/icons/down-arrow-icon.svg"))
.addSvgIcon("upArrowIcon", this.domSanitizer.bypassSecurityTrustResourceUrl("../../assets/images/icons/up-arrow-icon.svg"))
.addSvgIcon("90RigthArrozIcon", this.domSanitizer.bypassSecurityTrustResourceUrl("../../assets/images/icons/90-right-arrow-icon.svg"))
.addSvgIcon("documents", this.domSanitizer.bypassSecurityTrustResourceUrl("../../assets/images/icons/documents.svg"))
.addSvgIcon("previewIcon", this.domSanitizer.bypassSecurityTrustResourceUrl("../../assets/images/icons/preview-icon.svg"));
}

但我希望它是更通用的东西,也许不重复这么多代码,我怎么能做到呢?我想到了做一个for,它经过并有图标的名称并在路径和名称中使用它,但是还有其他方法吗?

我解决了这个问题,我添加了解决方案

icons = [
{ name: 'downloadIcon', route: 'download-arrow' },
{ name: 'filterIcon', route: 'filter-icon' },
{ name: 'investmentIcon', route: 'investment-icon' },
{ name: 'pensionFundsIcon', route: 'pension-funds-icon' },
{ name: 'realEstatesIcon', route: 'real-estates-icon' },
{ name: 'logoutIcon', route: 'sign-off-icon' },
{ name: 'downArrowIcon', route: 'down-arrow-icon' },
{ name: 'upArrowIcon', route: 'up-arrow-icon' },
{ name: '90RigthArrozIcon', route: '90-right-arrow-icon' },
{ name: 'documents', route: 'documents' },
{ name: 'previewIcon', route: 'preview-icon' },
];

and later 
loadIcons(): void {
this.icons.forEach(icon => {
this.matIconRegistry.addSvgIcon(icon.name, this.domSanitizer.bypassSecurityTrustResourceUrl(`../../assets/images/icons/${icon.route}.svg`));
});
}
Then call it in the constructor
private domSanitizer: DomSanitizer){
this.sessionService.currentLanguage = 'es';
this.loadIcons();
}

最新更新