在Angular项目中使用NG-ZORRO中的小图标

• 以下操作要在安装nodejs之后进行

• 目录

  • • 在Angular项目中导入NG-ZORRO
    • 使用NG-ZORRO中的小图标

在Angular项目中导入NG-ZORRO

1.安装angular脚手架工具

npm install -g @angular/cli

2.新建angular项目（project-name是你的项目名称）

ng new PROJECT-NAME

3.在新建的项目中完成NG-ZORRO的初始化配置

cd project-name
ng add ng-zorro-antd

自动弹出的提示消息按照如下设置即可：

4.浏览器打开Angular项目进行开发调试

ng serve

使用NG-ZORRO中的小图标

1.在官网中搜索需要的小图标

2.选好以后先定下名字，然后在app.module中加入icon组件

例：引用AccountBookFill, AlertOutline, AlertFill 3个小图标

// 部分引入icon图标
import { NzIconModule } from 'ng-zorro-antd/icon';
import { IconDefinition } from '@ant-design/icons-angular';
import { AccountBookFill, AlertFill, AlertOutline } from '@ant-design/icons-angular/icons';
const icons: IconDefinition[] = [AccountBookFill, AlertOutline, AlertFill];
imports: [
    NzIconModule.forRoot(icons),
]

3.在需要小图标的html文件下输入如下语句显示小图标

<i nz-icon nzType="alert" nzTheme="outline"></i>
<i nz-icon nzType="account-book" nzTheme="fill"></i>
<i nz-icon nzType="alert" nzTheme="fill"></i>

ps：这个语句可以通过点击官网的小图标复制

4.在css文件下输入如下语句可以调整小图标大小

[nz-icon] {
    font-size: 36px;
    }

标签：NG,ng,icons,ZORRO,angular,Angular,小图标
来源： https://blog.csdn.net/m0_52457734/article/details/111386871