无法渲染某些 NG-ZORRO 图标

Can't render some NG-ZORRO icon

如题所述，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>

main.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainComponent } from './main.component';

import { MainRoutingModule } from './main-routing.module';
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzIconModule } from 'ng-zorro-antd/icon';

import { LeftControlComponent } from './left-control/left-control.component';

@NgModule({
  declarations: [
    MainComponent,
    LeftControlComponent
  ],
  imports: [
    CommonModule,
    MainRoutingModule,
    NzLayoutModule,
    NzButtonModule,
    NzIconModule,
  ]
})
export class MainModule { }

输出

根据 NG-ZORRO Static loading and dynamic loading，您应该按照以下步骤显示那些丢失的图标。

先决条件：

npm install @ant-design/icons-angular

第 1 步：通过 angular.json

动态导入

angular.json

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

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

main.module.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. 我如何知道要导入图标的相应模块？

Capital camel-case type & theme, i.e. alibaba => AlibabaOutline.

Sample solution on StackBlitz

针对 Post 所有者的评论进行了更新

这两个图标 DownOutline 和 DoubleRightOutline 不需要导入，因为这些图标已由 default 导入。

参考

  1. ERROR Error: [@ant-design/icons-angular]: the icon arrow-left-o does not exist or is not registered.
  2. Add Icons in Lazy-loaded Modules
  3. How do I know a icon's corresponding module to import?