angular图标组件--@visurel/iconify-angular

1、安装

@visurel/iconify-angular

 组件地址：https://github.com/visurel/iconify-angular     https://iconify.design/

2、package.json 中显示

"@visurel/iconify-angular": "~10.1.2",
"@iconify/icons-emojione": "~1.0.8",
"@iconify/icons-fa-brands": "~1.0.16",
"@iconify/icons-fa-solid": "~1.0.13",
"@iconify/icons-ic": "~1.0.16",
"@iconify/icons-logos": "~1.0.12",

3、在 module 中导入

import { IconModule } from '@visurel/iconify-angular';

@NgModule({
  imports: [
    ......
    IconModule,
  ],
  ......
})

4、新建 app.icons.ts

import bellSlash from '@iconify/icons-fa-solid/bell-slash';

export const AppIcons = {
    'bell-slash': bellSlash,
};

5、在组件中注入

import { AppIcons } from './app.icons';

constructor(iconService: IconService) {
    iconService.registerAll(AppIcons);
}

6、使用，与 Angular Material  的 mat-icon 组件搭配使用

 <mat-icon icIcon='bell-slash' color="primary"></mat-icon>