In ng-alain, using the ng-zorro icon library, it is found that some can be displayed normally, but some cannot be displayed. An error was found on the console.
ERROR Error: [@ant-design/icons-angular]: the icon redo-o does not exist or is not registered.
at IconNotFoundError (:159)
at (:343)
...
The above problem occurs because the relative icons are not imported and exported.
ng-alain only imports dozens of icons from the icon library by default, and can be viewed in .
Therefore, you can refer to the icons you need to import and export
ng-zorro icon library:/compone...
PS: Let's take a look at the modification of the default style of components such as ng-zorro
Some ways to modify the default style of ng-zorro component in your project:
- Class name, etc. Add::ng-deep;
- Class name, etc. Previously: root;
- Class name, etc. Add: host /deep/;
::ng-deep .ant-spin-dot i {
background-color: #4c7bff;
}
:host ::ng-deep .ant-spin-dot i {
background-color: #4c7bff;
}
:root .ant-select-dropdown {
background-color: #1F273E;
font-size: 14px;
margin-top: 16px;
}
:host /deep/ .ant-spin-dot i {
background-color: #4c7bff;
}
Note: You can try the above three methods separately, and one of them will take effect under different circumstances.
As of now the latest version of 7.0.0-rc.0
When the content in td in the table component tbody exceeds the content, the default line will be wrapped. To achieve the effect of xxxx..., you need a hack:
::ng-deep .ant-table-tbody > tr > td {
max-width: 0;
white-space: nowrap;
}
Summarize
The above is what the editor introduces to you. Some icons in Angular using the ng-zorro icon library cannot be displayed normally. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!