Search code examples
angularantdant-design-prong-zorro-antd

Can't render some NG-ZORRO icon


As described in the title, some of the icons from NG-ZORRO can't be rendered.

Expected 5 icons to be rendered, however only 2 were rendered.

View attached for the output

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

Output

Ouput of main.component.html


Solution

  • According to NG-ZORRO Static loading and dynamic loading, you should follow these steps to display those missing icons.

    Pre-requisite:

    npm install @ant-design/icons-angular
    

    Step 1: Dynamic importing via angular.json

    angular.json

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

    Step 2: Add Icons in Lazy-loaded Modules

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

    Note:

    1. How do I know a icon's corresponding module to import?

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

    Sample solution on StackBlitz


    Updated for Post Owner's comment

    These two icons DownOutline and DoubleRightOutline are not required to be imported as these icons have been imported by default.


    Reference(s)

    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?