How to fix the nzType isn't a known property of 'i' in antd v11.4.0

Question

How to fix the:

can't bind to 'nzType' since it isn't a known property of 'i'?

here's the code

index.component.html

<nz-header>
  <i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'" (click)="isCollapsed = !isCollapsed"></i>
</nz-header>

index.component.ts

isCollapsed = false;

index.module.ts

@NgModule({
  declarations: [
    ShellComponent
  ],
  imports: [
    CommonModule,
    NzLayoutModule,
    NzBreadCrumbModule,
    NzDropDownModule,
  ]
})

Answer 1

You need to import NzIconModule.

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

index.module.ts

import { NzIconModule } from 'ng-zorro-antd/icon';
import {
  MenuFoldOutline,
  MenuUnfoldOutline
} from '@ant-design/icons-angular/icons';
import { IconDefinition } from '@ant-design/icons-angular';

const icons: IconDefinition[] = [MenuFoldOutline, MenuUnfoldOutline];

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

Sample Solution on StackBlitz

Note:

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

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

---

Reference(s)

1. Add Icons in Lazy-loaded Modules
2. How do I know a icon's corresponding module to import?