错误信息 #

[NG-ZORRO]: Error: [@ant-design/icons-angular]: the icon user-o does not exist or is not registered.
[NG-ZORRO]: Error: [@ant-design/icons-angular]: the icon login-o does not exist or is not registered.

已尝试的操作 #

• 在app.module.ts中注册UserOutline、LockOutline、IdcardOutline、LoginOutline图标，并配置NzIconModule.forRoot(icons)与NZ_ICONS提供者
• 将HTML模板中的nzPrefixIcon替换为user和login
• 更新NG-ZORRO及@ant-design/icons-angular至最新版本
• 修改register.component.html中的图标引用

排查与解决步骤 #

1. 全局清理旧图标引用
   全局搜索项目所有文件，确认user-o和login-o这两个旧图标名已完全替换，覆盖所有组件模板、配置文件，避免遗漏任何一处引用。

2. 修正图标名与注册类的对应关系
   NG-ZORRO图标名与注册类有明确对应规则：组件类名去掉Outline/Fill后缀后，转为全小写并以中划线分隔。

   • 你注册的UserOutline对应图标名是user-outline，LoginOutline对应login-outline
   • 模板引用需改为：

     <nz-input-group nzPrefixIcon="user-outline">
       <input type="text" nz-input formControlName="name" placeholder="Enter name" />
     </nz-input-group>
     

   • 若需要实心图标，需注册UserFill/LoginFill类，模板中使用nzPrefixIcon="user"/nzPrefixIcon="login"

3. 清理缓存并重启项目
   执行以下命令清理Angular缓存，再重启开发服务器，避免缓存导致修改不生效：

   ng clean
   ng serve
   

4. 检查模块导入规范

   • 仅在根模块app.module.ts中使用NzIconModule.forRoot(icons)注册图标，子模块只需导入NzIconModule（不要加forRoot）
   • NZ_ICONS提供者仅在根模块配置，避免重复注册引发冲突

5. 验证版本兼容性
   确保@ant-design/icons-angular版本与NG-ZORRO版本完全匹配，比如NG-ZORRO 17.x对应@ant-design/icons-angular 17.x，版本不匹配可能导致图标无法识别。

内容的提问来源于stack exchange，提问作者Kessnn