1.angular.json中引入

"assets": ["src/favicon.ico","src/assets",{"glob": "**/*","input": "./node_modules/@ant-design/icons-angular/src/inline-svg/","output": "/assets/"}],"styles": ["src/styles.less","node_modules/ng-zorro-antd/ng-zorro-antd.min.css"],

2.在app.module中引入以下文件

import { NzIconModule } from 'ng-zorro-antd/icon'; import { IconDefinition } from '@ant-design/icons-angular'; import { AccountBookFill, AlertFill, AlertOutline } from '@ant-design/icons-angular/icons'; const icons: IconDefinition[] = [AccountBookFill, AlertOutline, AlertFill]; @NgModule({declarations: [AppComponent],imports: [NzIconModule.forRoot(icons),],providers: [],bootstrap: [AppComponent] })

在需要的html文件用需要的圖標即可，但有些圖標顯示不出來還報錯，這時可以考慮引入外部的svg圖標，方法如下(例子)：
1.在assets文件中新建icons文件用于存放外部引入的svg圖標。
2.在icons中新建icon-def.ts文件

export interface IconDef{name:string;svg:string }

在icons中新建需要引入的圖標文件，例：table-up.ts文件（這里是可以創建多個引入的圖標文件）

import {IconDef} from './icon-def' export const TABLE_UP: IconDef={name:'table-up',svg:'svg的路徑' }

4.在icons中新建index.ts文件，引入icon圖標文件，例：

import { IconDef } from './icon-def'; import { TABLE_UP } from './table-up';export const CUSTOM_ICONS: Array<IconDef>=[TABLE_UP,（需要使用到什么icon圖標文件就引入什么文件） ]

5.在app文件下新建icons-provider.moudle.ts文件，管理引入的外部svg,例：

import { NgModule } from '@angular/core'; import { NZ_ICONS, NzIconModule, NzIconService } from 'ng-zorro-antd/icon'; import { IconDef } from 'src/assets/icons/icon-def'; import { CUSTOM_ICONS } from '../assets/icons/index'const icons: never[] = [ ] @NgModule({imports: [NzIconModule],exports: [NzIconModule],providers: [{provide: NZ_ICONS,useValue: icons}] }) export class IconsProviderModule {constructor(private nzIconService: NzIconService) {// 管理引入的外部svgCUSTOM_ICONS.forEach((icon: IconDef)=> { this.nzIconService.addIconLiteral(`ftc:${icon.name}`,icon.svg)});} }

6.最后使用方式，在html中引入即可

<i nz-icon nzType="ftc:table-up" nzTheme="outline"></i>

總結

以上是生活随笔為你收集整理的angular引入ng-zorro中的icon图标方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。