在Angular中,可以使用Angular Material库来选择材料图标。下面是一个包含代码示例的解决方法:
npm install @angular/material @angular/cdk @angular/animations
然后,将它们添加到app.module.ts文件中的imports数组中:
import { MatIconModule } from '@angular/material/icon';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [MatIconModule, BrowserAnimationsModule],
// ...
})
export class AppModule { }
Select an icon
{{icon}}
{{icon}}
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material/icon';
@Component({
selector: 'app-icon-selector',
templateUrl: './icon-selector.component.html',
styleUrls: ['./icon-selector.component.css']
})
export class IconSelectorComponent {
selectedIcon: string;
icons: string[] = ['home', 'account_circle', 'favorite'];
constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {
// Register the icons
this.icons.forEach(icon => {
this.matIconRegistry.addSvgIcon(
icon,
this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/icons/${icon}.svg`)
);
});
}
}
创建一个名为“icons”(或其他名称)的文件夹,并在其中放置对应的SVG图标文件(例如,home.svg、account_circle.svg等)。
在需要使用图标的地方,可以使用MatIcon组件来显示选定的图标。将以下代码添加到模板中的适当位置:
{{selectedIcon}}
这样就可以实现一个简单的材料图标选择器了。用户可以从下拉列表中选择一个图标,并在页面上显示所选的图标。