# @ant-design/icons-angular 中文文档
规范地址：https://npmcn.com/package/%40ant-design/icons-angular/
版本：22\.1\.1
npm 元数据更新时间：2026-09-18T15:06:14.174Z
中文译文更新时间：2026-11-06T06:00:33.569Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40ant-design/icons-angular
原文对照：https://npmcn.com/package/%40ant-design/icons-angular/?lang=original
项目主页：https://github.com/ant-design/ant-design-icons/tree/master#readme
源码仓库：https://github.com/ant-design/ant-design-icons#master
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：3.1 MB，1709 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：rxjs ^6\.5\.3 \|\| ^7\.4\.0，@angular/core ^22\.0\.0，@angular/common ^22\.0\.0，@angular/platform-browser ^22\.0\.0
- 首次发布：2018-09-29T09:54:03.907Z
- 最新版本发布：2026-09-18T15:06:14.026Z
- 近 30 天下载量：564088（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：62（近 12 个月 9 个）
## 中文简介
# Angular 的蚂蚁设计图标
## 安装
```sh
npm install @ant-design/icons-angular
```
也可以使用：`pnpm add @ant-design/icons-angular`、`yarn add @ant-design/icons-angular`、`bun add @ant-design/icons-angular`
## README
# Angular 的蚂蚁设计图标
[](https://npmjs.org/package/@ant-design/icons-angular) [](https://npmjs.org/package/@ant-design/icons-angular)
## 安装
```bash
ng add @ant-design/icons-angular
# or npm install @ant-design/icons-angular
```
## 使用量
您应该导入 `IconDirective` 在您的组件.
```ts
import { IconDirective } from '@ant-design/icons-angular';
@Component({
imports: [ IconDirective ]
})
export class AppComponent {}
```
注册您需要的图标 `IconService` (所有或明确,我们称之为 **静态加载**:
> 注意点! 我们强烈建议大家不要登记所有图标,这会大大增加捆绑大小.
```ts
import { Component, inject } from '@angular/core';
import { IconService } from '@ant-design/icons-angular';
import { AccountBookFill } from '@ant-design/icons-angular/icons'
// import * as AllIcons from 'ant-icons-angular/icons';
@Component({
// ...
})
export class AppComponent {
readonly iconService = inject(IconService);
constructor() {
// Import all. NOT RECOMMENDED. ❌
// const antDesignIcons = AllIcons as {
// [key: string]: IconDefinition;
// };
// this.iconService.addIcon(...Object.keys(antDesignIcons).map(key => antDesignIcons[key]));
// Import what you need! ✔️
this.iconService.addIcon(...[ AccountBookFill ]);
this.iconService.twoToneColor = { primaryColor: '#1890ff' };
}
}
```
您也可以在 `app.config.ts`数字 :
```ts
import { ApplicationConfig } from '@angular/core';
import { provideAntIcons } from '@ant-design/icons-angular';
import { AccountBookFill } from '@ant-design/icons-angular/icons';
export const appConfig: ApplicationConfig = {
providers: [
provideAntIcons([ AccountBookFill ])
]
};
```
当您想要制作图标时 :
```html
```
请查看演示详情.
对于由Ant Design提供的图标,我们提供 **动态加载** 减少捆绑大小的策略. 刚刚配置你的 `angular.json` 甚至不需要注册 图标! 检查 `examples` 文件夹和 `angular.json` 更多细节.
### 命名空间
命名空间允许用户用简单的API来注册自己的图标,同时支持动态加载和静态加载.
如果你想添加一个 `panda` 图标 `animal` 名称空间 :
- 静态加载时,可以拨打 `addIconLiteral('animal:panda', '')`· ;
- 用于动态加载,只需放入 `panda.svg` 下级 `assets/animal`并让一只熊猫像: ``。 。 。 .
请查看演示详情.
## 发展
您可以找到源代码 [这里](https://github.com/ant-design/ant-design-icons)。 。 。 .
### 设置
安装依赖性 `@ant-design/icons-angular`运行 `npm run generate`。 。 。 .
### 演示
运行 `npm run generate` 接下来 `npm run start`。 。 。 .
### 构建
运行 `npm run build:lib`。 。 。 .
### 延长
您可以简单地通过创建扩展指令或服务来扩展此软件包 `IconDirective` 财务报告和审定财务报表 `IconService`值得一提的是 `_changeIcon` 方法返回 a `Promise