8

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

1 Answer 1

15

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?
2
  • it was very helpful, may i ask why do the two icons rendered successful dont need to be imported?
    – XQ_CHIA
    Commented Jul 26, 2021 at 8:41
  • Update to your comment. The reason why those 2 icons are not needed import as DownOutline & DoubleRightOutline are imported by default. You may upvote/mark this as the correct answer if this helps you. Thank you.
    – Yong Shun
    Commented Jul 26, 2021 at 8:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.