部分NG-ZORRO图标无法正常渲染问题排查求助

云原生阿岚

2026-10-10

问题原因

NG-ZORRO 9.0及以上版本默认启用图标按需加载机制，未手动注册的图标无法正常渲染。你当前可以正常显示的2个图标，是项目中引入的其他NG-ZORRO组件内部已经完成注册的，剩下3个未注册的图标自然无法渲染。

解决方案

方案1：批量导入全量图标（适合开发阶段快速验证）

直接在项目根模块（AppModule）中注册所有图标，无需单独维护用到的图标列表：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NzIconModule, IconDefinition } from 'ng-zorro-antd/icon';
import * as AllIcons from '@ant-design/icons-angular/icons';

@NgModule({
  imports: [
    BrowserModule,
    // 其他全局模块...
    NzIconModule.forRoot([...Object.values(AllIcons) as IconDefinition[]])
  ],
  // 其他配置...
})
export class AppModule { }

方案2：按需导入指定图标（推荐生产环境使用，减小打包体积）

仅注册你当前用到的图标，减少冗余资源：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NzIconModule } from 'ng-zorro-antd/icon';
// 导入需要的图标
import { 
  StepBackwardOutline, 
  DownOutline, 
  CaretLeftOutline, 
  DoubleRightOutline, 
  SettingOutline 
} from '@ant-design/icons-angular/icons';

@NgModule({
  imports: [
    BrowserModule,
    // 其他全局模块...
    NzIconModule.forRoot([
      StepBackwardOutline,
      DownOutline,
      CaretLeftOutline,
      DoubleRightOutline,
      SettingOutline
    ])
  ],
  // 其他配置...
})
export class AppModule { }