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

devpei commented 5 years ago

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/目录

wzhudev commented 5 years ago

重新安装即可解决。

BruneXX commented 5 years ago

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 commented 5 years ago

In my particular case if I use:  the following error arise:

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

but when I'm using  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.

wzhudev commented 5 years ago

@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 commented 5 years ago

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.

wzhudev commented 5 years ago

PR is welcome! @BruneXX

BruneXX commented 5 years ago

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

olegdeezus commented 5 years ago

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

wzhudev commented 5 years ago

@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 commented 5 years ago

@wendzhue Thank you!

babarinde commented 4 years ago

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

achintha-weerasinghe commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

重新安装即可解决。

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 :  It runs but  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 commented 3 years ago

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

mobinakhalilzade commented 3 years ago

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

wsambian commented 3 years ago

In my particular case if I use:  the following error arise:

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

but when I'm using  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.

Please add import { NzButtonModule } from 'ng-zorro-antd/button'; to app.module and then add NzButtonModule to the list of imports.

That should do the trick.

HCenggel commented 2 years ago

我也遇到过同样的问题，删除node_modules之后重新下载依赖之后就好了，仅供参考

aniketthumar commented 1 year ago

@wendzhue Thank you

dimitriadisat commented 1 year ago

Hi all,

I m facing the same issue when I try to run ng test.

I've tried all the solutions above but I still cannot run ng test without getting many errors saying the following message: ERROR Error: [@ant-design/icons-angular]: the icon arrow-left-o does not exist or is not registered.

My version of ng-zorro-antd is 13.0.0

chenweihan commented 1 year ago

As wzhudev says above

1：Create a new file . eg: import { NzIconTestModule } from '@shared/nz-icon-test.module';

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

2: Introduce it in your test file eg: beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ NzIconTestModule //here

now , is OK！

dimitriadisat commented 1 year ago

As wzhudev says above

1：Create a new file . eg: import { NzIconTestModule } from '@shared/nz-icon-test.module';

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

2: Introduce it in your test file eg: beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ NzIconTestModule //here

now , is OK！

Thanks chenweihan.

I already implemented that but nothing has changed.

chenweihan commented 1 year ago

@dimitriadisat please check it again, because this file is the file in the official test case. https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/icon/testing/nz-icon-test.module.ts.

venkateshatfrudev commented 3 months ago

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

thank you this is working

NG-ZORRO / ng-zorro-antd