Angular 18+NG Zorro 18 Karma测试报错：图标未找到或未注册

问题诊断 #

错误提示[@ant-design/icons-angular]:the icon dropbox-o does not exist or is not registered，核心原因通常是图标未正确注册或测试环境未加载图标配置，结合你的配置，可按以下步骤排查解决：

解决步骤 #

1. 确认图标已正确导入并注册 #

检查你定义的icons数组是否包含DropboxOutline（NG Zorro中dropbox-o对应的图标类为DropboxOutline）：

// 导入对应图标
import { DropboxOutline } from '@ant-design/icons-angular/icons';

// 确保icons数组包含该图标
const icons = [DropboxOutline];

注意：NG Zorro图标命名规则中，后缀-o对应Outline类，不要用错图标名称。

2. 配置测试环境的图标模块 #

Karma测试环境不会自动继承应用的appConfig配置，需在组件测试文件中单独注册图标：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { DropboxOutline } from '@ant-design/icons-angular/icons';
import { YourComponent } from './your.component';

describe('YourComponent', () => {
  let fixture: ComponentFixture<YourComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        // 其他依赖模块
        NzIconModule.forChild([DropboxOutline]) // 注册需要的图标
      ],
      declarations: [YourComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    fixture.detectChanges();
  });

  // 测试用例...
});

如果多个组件都用到该图标，可在test.ts中全局配置，避免重复注册：

import { TestBed } from '@angular/core/testing';
import { importProvidersFrom } from '@angular/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { DropboxOutline } from '@ant-design/icons-angular/icons';

TestBed.configureTestingModule({
  providers: [
    importProvidersFrom(NzIconModule.forChild([DropboxOutline]))
  ]
});

3. 同步测试环境的Assets配置 #

你当前仅在build配置中添加了图标SVG路径，需确保angular.json的test配置下也包含相同的Assets规则：

"projects": {
  "your-project-name": {
    "architect": {
      "test": {
        "options": {
          "assets": [
            {
              "glob": "**/*",
              "input": "public"
            },
            {
              "glob": "**/*",
              "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
              "output": "/assets/"
            }
          ],
          // 其他测试配置...
        }
      }
    }
  }
}

测试环境若无法访问SVG文件，也可能触发类似的未找到错误。

4. 全局注册图标（可选优化） #

如果该图标在应用中全局使用，可将NzIconModule.forChild(icons)替换为NzIconModule.forRoot(icons)，在根配置中一次性注册，测试环境可直接继承：

// app.config.ts
importProvidersFrom(FormsModule, NzIconModule.forRoot(icons)),

注意：forRoot仅能在根配置中使用一次，避免重复注册冲突。

内容的提问来源于stack exchange，提问作者Gabriel Moura e Silva