Ng-zorro-antd: ERROR Error: [@ant-design/icons-angular]: the icon arrow-left-o does not exist or is not registered.

[devpei]

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-start?embed=1&file=package.json

Steps to reproduce

根据官网快速上手一步步创建，在使用图标的时候错误。

What is expected?

能够显示图标

What is actually happening?

ERROR Error: [@ant-design/icons-angular]: the icon arrow-left-o does not exist or is not registered.

| Environment | Info |
|---|---|
| ng-zorro-antd | 7.3.2 |
| Browser | Chrome |

---

原因：
{
"glob": "*/",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
版本7.3.2install后node_moudle没有/@ant-design/icons-angular/src/inline-svg/目录

[wendellhu95]

重新安装即可解决。

[BruneXX]

Sorry guys, but can you put your questions/answers in English? I'm using the ng-zorro version 8.1.2 but reinstall do not solve the probem. Do I need to install a specific library for those icons?

[BruneXX]

In my particular case if I use: <i [nzType].... /> the following error arise:

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

but when I'm using <i nz-icon [nzType].... /> the specific error displayed here appears:

ERROR Error: [@ant-design/icons-angular]: the icon menu-fold-o does not exist or is not registered.

I've extracted that from the documentation page and nothing of above tried seems to work.

[wendellhu95]

@BruneXX Please read the doc https://ng.ant.design/components/icon/en#static-loading-and-dynamic-loading. You need to register icons (import icon resources in another word). The error is quite explicit IMHO.

[BruneXX]

Hi! @wendzhue thanks! yes, you're right, but I think the documentation should be more explicit with that. I've found different explanations and different code snippets in documentation, github repo and examples. Thank you again for the quick reply.

[wendellhu95]

PR is welcome! @BruneXX

[BruneXX]

@wendzhue great! I'll glad to help with anything when found the time!

[olegdeezus]

Hi! I received this error when running tests. Icons is dynamically linked under "ant" namespace. Can you help me?

[wendellhu95]

@olegdeezus In test environment, I strongly recommend you to write an IconTestingModule and provide all icons in that module. And import that module when you are configuraing tests.

You can use this as a reference. https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/icon/testing/nz-icon-test.module.ts

Hope this helps.

[olegdeezus]

@wendzhue Thank you!

[babarinde]

Hi,
Thanks for the answers above,
I am Using Angular Universal and I should mention that for my case it seems the error was displayed but the svgs were displayed as HTTP remote calls was loading them. It seems the error showing on the console is therefore a false alarm, since its not aware that they are dynamically loaded.
Now its quite strange to wire my mind to ignore the error messages displayed

[madumal7]

Hi,
Thanks for the answers above,
I am Using Angular Universal and I should mention that for my case it seems the error was displayed but the svgs were displayed as HTTP remote calls was loading them. It seems the error showing on the console is therefore a false alarm, since its not aware that they are dynamically loaded.
Now its quite strange to wire my mind to ignore the error messages displayed

I'm facing the same issue. Is there any solution to get rid of those ugly error messages on the console?

[kamran-mushtaq]

Hi,
Thanks for the answers above,
I am Using Angular Universal and I should mention that for my case it seems the error was displayed but the svgs were displayed as HTTP remote calls was loading them. It seems the error showing on the console is therefore a false alarm, since its not aware that they are dynamically loaded.
Now its quite strange to wire my mind to ignore the error messages displayed

I am facing the same in Angular Universal.

[s2t4nv0k]

重新安装即可解决。

Hope you are here to help me?

File : package.json
` "dependencies": {

"@angular/animations": "~10.0.2",

"@angular/common": @ #"~10.0.2",

"@angular/compiler": "~10.0.2",

"@angular/core": "~10.0.2",

"@angular/forms": "~10.0.2",

"@angular/platform-browser": "~10.0.2",

"@angular/platform-browser-dynamic": "~10.0.2",

"@angular/router": "~10.0.2",

"@ant-design/icons": "^4.2.2",

"@ant-design/icons-angular": "^10.0.1",

"ng-zorro-antd": "^10.0.2",

"rxjs": "~6.5.5",

"tslib": "^2.0.0",

"zone.js": "~0.10.3"`

When I want to add an icon :
<i nz-icon nzType="star" nzTheme="fill"></i>
It runs but
<i nz-icon nzType="menu-fold" nzTheme="outline"></i>
Error:
http://localhost:4200/assets/outline/menu-fold.svg 404 (Not Found)
ERROR Error: [@ant-design/icons-angular]:the icon menu-fold-o does not exist or is not registered.

Thanks you

[id1945]

Fix this here!
https://giai-ma.blogspot.com/2021/05/ant-designicons-angular-icon-reload-o.html

[mobinakhalilzade]

This issue solved with installing @ant-design/icons-angular and add " {
"glob": "*/",
"input": "node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}"
in angualr.json.
Thank you