无法渲染某些 NG-ZORRO 图标

Question

如标题所述，NG-ZORRO 的部分图标无法渲染。

预计会渲染 5 个图标，但实际只渲染了 2 个。

查看附加的输出

main.component.html

<nz-layout class="full-screen">
    <nz-sider nzCollapsible
              [(nzCollapsed)]="isCollapsed"
              [nzWidth]="260">
        <app-left-control></app-left-control>
    </nz-sider>
    <nz-content class="container">
        <i nz-icon nzType="step-backward" nzTheme="outline"></i> Cannot render<br>
        <i nz-icon nzType="down" nzTheme="outline"></i> Can render<br>
        <i nz-icon nzType="caret-left" nzTheme="outline"></i> Cannot render<br>
        <i nz-icon nzType="double-right" nzTheme="outline"></i> Can render<br>
        <i nz-icon nzType="setting" nzTheme="outline"></i> Cannot render<br>
    </nz-content>
</nz-layout>

主模块.ts

<nz-layout class="full-screen">
    <nz-sider nzCollapsible
              [(nzCollapsed)]="isCollapsed"
              [nzWidth]="260">
        <app-left-control></app-left-control>
    </nz-sider>
    <nz-content class="container">
        <i nz-icon nzType="step-backward" nzTheme="outline"></i> Cannot render<br>
        <i nz-icon nzType="down" nzTheme="outline"></i> Can render<br>
        <i nz-icon nzType="caret-left" nzTheme="outline"></i> Cannot render<br>
        <i nz-icon nzType="double-right" nzTheme="outline"></i> Can render<br>
        <i nz-icon nzType="setting" nzTheme="outline"></i> Cannot render<br>
    </nz-content>
</nz-layout>

输出

Answer 1

根据NG-ZORRO 静态加载和动态加载，您应该按照以下步骤来显示那些丢失的图标。

先决条件：

npm install @ant-design/icons-angular

第 1 步：通过 angular.json 动态导入

角度.json

{
  "assets": [
    {
      "glob": "**/*",
      "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
      "output": "/assets/"
    }
  ]
}

第 2 步：在延迟加载模块中添加图标

主模块.ts

import {
  StepBackwardOutline,
  CaretLeftOutline,
  SettingOutline
} from '@ant-design/icons-angular/icons';

const icons: IconDefinition[] = [
  StepBackwardOutline,
  CaretLeftOutline,
  SettingOutline
];

export class MainModule {
  ...
  imports: [
    NzIconModule.forChild(icons),
  ]
}

笔记：

1. 我如何知道要导入的图标对应的模块？

大写驼峰式和主题，即 alibaba => ObamaOutline。

StackBlitz 上的示例解决方案

更新了帖子所有者的评论

这两个图标DownOutline不需要DoubleRightOutline导入，因为这些图标已默认导入。

参考）

1. 错误 错误：[@ant-design/icons-angular]：图标 arrow-left-o 不存在或未注册。
2. 在延迟加载模块中添加图标
3. 我如何知道要导入的图标对应的模块？