angular - 无法渲染某些 NG-ZORRO 图标

问题描述

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

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 { }

输出

标签： angularantdant-design-prong-zorro-antd

根据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),
  ]
}

笔记：

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

大写驼峰式&主题，即alibaba => AlibabaOutline。

StackBlitz 上的示例解决方案

更新帖子所有者的评论

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