Icon图标

语义化的矢量图形。

图标列表#

新版图标可能略有缺失，我们将与 Ant Design 同步保持图标的更新。

import { NzIconModule } from 'ng-zorro-antd/icon';

选择图标主题风格

方向性图标

  • StepBackward
  • StepForward
  • FastBackward
  • FastForward
  • Shrink
  • ArrowsAlt
  • Down
  • Up
  • Left
  • Right
  • CaretUp
  • CaretDown
  • CaretLeft
  • CaretRight
  • UpCircle
  • DownCircle
  • LeftCircle
  • RightCircle
  • DoubleRight
  • DoubleLeft
  • VerticalLeft
  • VerticalRight
  • VerticalAlignTop
  • VerticalAlignMiddle
  • VerticalAlignBottom
  • Forward
  • Backward
  • Rollback
  • Enter
  • Retweet
  • Swap
  • SwapLeft
  • SwapRight
  • ArrowUp
  • ArrowDown
  • ArrowLeft
  • ArrowRight
  • PlayCircle
  • UpSquare
  • DownSquare
  • LeftSquare
  • RightSquare
  • Login
  • Logout
  • MenuFold
  • MenuUnfold
  • BorderBottom
  • BorderHorizontal
  • BorderInner
  • BorderOuter
  • BorderLeft
  • BorderRight
  • BorderTop
  • BorderVerticle
  • PicCenter
  • PicLeft
  • PicRight
  • RadiusBottomleft
  • RadiusBottomright
  • RadiusUpleft
  • RadiusUpright
  • Fullscreen
  • FullscreenExit

提示建议性图标

  • Question
  • QuestionCircle
  • Plus
  • PlusCircle
  • Pause
  • PauseCircle
  • Minus
  • MinusCircle
  • PlusSquare
  • MinusSquare
  • Info
  • InfoCircle
  • Exclamation
  • ExclamationCircle
  • Close
  • CloseCircle
  • CloseSquare
  • Check
  • CheckCircle
  • CheckSquare
  • ClockCircle
  • Warning
  • IssuesClose
  • Stop

编辑类图标

  • Edit
  • Form
  • Copy
  • Scissor
  • Delete
  • Snippets
  • Diff
  • Highlight
  • AlignCenter
  • AlignLeft
  • AlignRight
  • BgColors
  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Redo
  • Undo
  • ZoomIn
  • ZoomOut
  • FontColors
  • FontSize
  • LineHeight
  • Dash
  • SmallDash
  • SortAscending
  • SortDescending
  • Drag
  • OrderedList
  • UnorderedList
  • RadiusSetting
  • ColumnWidth
  • ColumnHeight

数据类图标

  • AreaChart
  • PieChart
  • BarChart
  • DotChart
  • LineChart
  • RadarChart
  • HeatMap
  • Fall
  • Rise
  • Stock
  • BoxPlot
  • Fund
  • Sliders

品牌和标识

  • Android
  • Apple
  • Windows
  • Linux
  • Ie
  • Chrome
  • Github
  • Aliwangwang
  • Dingding
  • Dingtalk
  • WeiboSquare
  • WeiboCircle
  • Weibo
  • Taobao
  • TaobaoCircle
  • Twitter
  • Wechat
  • Youtube
  • AlipayCircle
  • Skype
  • Qq
  • MediumWorkmark
  • Gitlab
  • Medium
  • Linkedin
  • GooglePlus
  • Dropbox
  • Facebook
  • Html5
  • Java
  • JavaScript
  • Python
  • Docker
  • Kubernetes
  • Ruby
  • DotNet
  • Codepen
  • CodeSandbox
  • Amazon
  • Google
  • CodepenCircle
  • Alipay
  • AntDesign
  • AntCloud
  • Aliyun
  • Zhihu
  • Slack
  • SlackSquare
  • Behance
  • BehanceSquare
  • Dribbble
  • DribbbleSquare
  • Instagram
  • Yuque
  • Alibaba
  • Yahoo
  • Reddit
  • Discord
  • Sketch
  • Baidu
  • Bilibili
  • HarmonyOS
  • OpenAI
  • Pinterest
  • Spotify
  • TikTok
  • Twitch
  • WechatWork
  • WhatsApp
  • X

网站通用图标

  • Aim
  • AccountBook
  • Apartment
  • Api
  • Alert
  • AppstoreAdd
  • AudioMuted
  • Appstore
  • Audio
  • Audit
  • Bank
  • Bars
  • Bell
  • Border
  • Branches
  • Build
  • Bulb
  • Bug
  • Calendar
  • Camera
  • Car
  • Block
  • Book
  • CarryOut
  • CiCircle
  • Ci
  • Clear
  • CloudDownload
  • CloudServer
  • Cloud
  • CloudSync
  • Cluster
  • Barcode
  • Code
  • BorderlessTable
  • CloudUpload
  • Compass
  • Compress
  • Coffee
  • ConsoleSql
  • Comment
  • Container
  • Calculator
  • CopyrightCircle
  • Control
  • Copyright
  • Crown
  • CustomerService
  • Database
  • DeleteColumn
  • DeleteRow
  • Desktop
  • DeploymentUnit
  • Contacts
  • Disconnect
  • Dislike
  • Dashboard
  • Download
  • DollarCircle
  • Ellipsis
  • EuroCircle
  • Euro
  • DeliveredProcedure
  • Exception
  • Expand
  • ExpandAlt
  • Environment
  • Export
  • Eye
  • FieldBinary
  • FieldNumber
  • FileDone
  • FileAdd
  • FieldString
  • CreditCard
  • Experiment
  • FileExclamation
  • EyeInvisible
  • FileGif
  • Dollar
  • FieldTime
  • FileMarkdown
  • File
  • FileJpg
  • FileSearch
  • FileExcel
  • FileSync
  • FileProtect
  • FilePdf
  • FileWord
  • FileUnknown
  • FileText
  • Filter
  • FilePpt
  • Fire
  • Flag
  • FolderAdd
  • Folder
  • FolderView
  • Fork
  • FormatPainter
  • Function
  • FunnelPlot
  • FundView
  • FundProjectionScreen
  • Gateway
  • Gif
  • Gift
  • Frown
  • Global
  • Gold
  • Group
  • Heart
  • Hdd
  • FolderOpen
  • Home
  • Hourglass
  • FileZip
  • Import
  • Inbox
  • Idcard
  • InsertRowBelow
  • InsertRowAbove
  • InsertRowLeft
  • Insurance
  • Key
  • Laptop
  • Layout
  • InsertRowRight
  • FileImage
  • Like
  • Line
  • Link
  • Loading3Quarters
  • Interaction
  • Lock
  • MacCommand
  • History
  • MedicineBox
  • Man
  • Loading
  • Meh
  • Menu
  • Merge
  • MergeCells
  • Message
  • Mobile
  • Holder
  • MoneyCollect
  • Monitor
  • Moon
  • More
  • Muted
  • NodeExpand
  • NodeIndex
  • NodeCollapse
  • Notification
  • OneToOne
  • Number
  • PaperClip
  • Partition
  • PayCircle
  • Percentage
  • Phone
  • PlaySquare
  • PoundCircle
  • Pound
  • Poweroff
  • Printer
  • Mail
  • Product
  • Picture
  • Profile
  • PropertySafety
  • Pushpin
  • Qrcode
  • Read
  • Reconciliation
  • RedEnvelope
  • Reload
  • PullRequest
  • Rocket
  • RotateRight
  • Robot
  • SafetyCertificate
  • Safety
  • Save
  • Scan
  • SecurityScan
  • Schedule
  • Setting
  • Shake
  • ShareAlt
  • Shop
  • Send
  • Project
  • Select
  • Search
  • ShoppingCart
  • Signature
  • Rest
  • Sisternode
  • Skin
  • Smile
  • Solution
  • Star
  • Shopping
  • Sound
  • Switcher
  • Sync
  • Table
  • Sun
  • Tags
  • Subnode
  • Thunderbolt
  • ToTop
  • Tool
  • TrademarkCircle
  • Transaction
  • Translation
  • Tag
  • Trophy
  • Truck
  • Team
  • Trademark
  • Unlock
  • Ungroup
  • Usb
  • UserAdd
  • Tablet
  • UserSwitch
  • UsergroupDelete
  • Verified
  • VideoCameraAdd
  • VideoCamera
  • User
  • RotateLeft
  • UserDelete
  • SplitCells
  • UsergroupAdd
  • Wifi
  • Woman
  • Wallet
  • Upload

代码演示

基本使用

使用 <span ></span> 标签声明组件，指定图标对应的 nzType 属性。可以通过 nzTheme 属性来设置不同的主题风格的图标，也可以通过设置 nzSpin 属性来实现动画旋转效果。对旧的 API <i class="anticon"></i> 兼容。

expand codeexpand code
      加载中
自定义图标

你可以直接将 svg 标签放在 nz-icon 中来渲染自定义内容，我们会为你处理大小和颜色等问题。

expand codeexpand code
      加载中
命名空间

可以使用命名空间来添加自定义的 Icon，支持静态加载和动态加载。

expand codeexpand code
      加载中
多色图标

可以通过设置 nzTheme 属性为 twotone 来渲染双色图标，并且可以设置主题色。

expand codeexpand code
      加载中
使用 Iconfont.cn

对于使用 iconfont.cn 的用户，通过设置 fetchFromIconfont 方法参数对象中的 scriptUrl 字段，即可轻松地使用已有项目中的图标。

expand codeexpand code
      加载中

API#

[nz-icon]#

参数说明类型默认值支持全局配置
[nzType]图标类型，遵循图标的命名规范string-
[nzTheme]图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标'fill'丨'outline'丨'twotone''outline'✅
[nzSpin]是否有旋转动画booleanfalse
[nzTwotoneColor]仅适用双色图标，设置双色图标的主要颜色，默认为 Ant Design 蓝色string (十六进制颜色)-✅
[nzIconfont]指定来自 IconFont 的图标类型string-
[nzRotate]图标旋转角度（7.0.0 开始支持）number-

NzIconService#

方法/属性说明参数
addIcon()用于静态引入图标，可传入多个值（或者用数组解构赋值）IconDefinition
addIconLiteral()用于静态引入用户自定义图标string, string (SVG)
fetchFromIconfont()用于从 FontIcon 获取图标资源文件NzIconfontOption
changeAssetsSource()用于修改动态加载 icon 的资源前缀，使得你可以部署图标资源到你想要的任何位置，例如 cdnstring

SVG 图标#

我们与 Ant Design 同步，使用了 svg 图标替换了原先的 font 图标，从而带来了以下优势：

  • 完全离线化使用，不需要从支付宝 cdn 下载字体文件，图标不会因为网络问题呈现方块，同时还支持本地部署。
  • 在低端设备上 SVG 有更好的清晰度。
  • 支持多色图标。
  • 对于内建图标的更换可以提供更多 API，而不需要进行样式覆盖。

可参与 Ant Design 的相关讨论：#10353。

NG-ZORRO 之前并没有图标组件，而是提供了基于字体文件的解决方案。新版本中我们提供了旧 API 兼容，如果你不修改既有的代码，所有的图标都会被动态加载成 outline 主题的图标，而最佳实践是使用新的指令 nz-icon 并传入 theme 以明确图标的主题风格，例如：

<span nz-icon [nzType]="'star'" [nzTheme]="'fill'"></span>

所有的图标都会以 <svg> 标签渲染，但是你还是可以用之前对 i 标签设置的样式和类来控制 svg 的样式，例如：

<span nz-icon [nzType]="'message'" style="font-size: 16px; color: #08c;"></span>

静态加载与动态加载#

对于 Ant Design 提供的图标，我们提供了两种方式来加载图标资源文件。

静态加载，在 AppModule 里加入你需要的图标（推荐）或者是全部的图标，例如：

import { IconDefinition } from '@ant-design/icons-angular';
import { NzIconModule } from 'ng-zorro-antd/icon';

// 引入你需要的图标，比如你需要 fill 主题的 AccountBook Alert 和 outline 主题的 Alert，推荐 ✔️
import { AccountBookFill, AlertFill, AlertOutline } from '@ant-design/icons-angular/icons';

const icons: IconDefinition[] = [ AccountBookFill, AlertOutline, AlertFill ];

// 引入全部的图标，不推荐 ❌
// import * as AllIcons from '@ant-design/icons-angular/icons';

// const antDesignIcons = AllIcons as {
//   [key: string]: IconDefinition;
// };
// const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key])

@NgModule({
  declarations: [AppComponent],
  imports: [NzIconModule.forRoot(icons)],
  bootstrap: [AppComponent]
})
export class AppModule {}

在 standalone 模式下，你可以在 app.config.ts 中使用 provideNzIcons 引入这些图标：

import { provideNzIcons } from 'ng-zorro-antd/icon';

export const appConfig = {
  providers: [provideNzIcons(icons)]
}

本质上是调用了 NzIconService 的 addIcon 方法，引入后的文件会被打包到 .js 文件中。静态引入会增加包体积，所以我们建议尽可能地使用动态加载，如果要静态加载，也仅仅加载你需要用到的图标。

为了加快渲染速度，NG-ZORRO 本身用到的 icon 是静态引入的。而官网的图标是动态引入的。

动态加载，这是为了减少包体积而提供的方式。当 NG-ZORRO 检测用户想要渲染的图标还没有静态引入时，会发起 HTTP 请求动态引入。你只需要配置 angular.json 文件：

{
  "assets": [
    {
      "glob": "**/*",
      "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
      "output": "/assets/"
    }
  ]
}

你可以通过 NzIconService 的 changeAssetsSource() 方法来修改图标资源的位置，这样你就可以部署这些资源到 cdn 上。你的参数会被直接添加到 assets/ 的前面。

例如，你在 https://mycdn.somecdn.com/icons/assets 目录下部署了静态资源文件，那么你就可以通过调用 changeAssetsSource('https://mycdn.somecdn.com/icons')，来告诉 NG-ZORRO 从这个位置动态加载图标资源。

请在 constructor 里或者在 AppInitService 里调用这个方法。

在子模块中补充图标#

有时候，为了避免增大 main.js 的体积，你可能想要从懒加载模块中引入图标，这时你就可以使用 NzIconModule.forChild 来追加图标。

@NgModule({
  imports: [CommonModule, NzIconModule.forChild([QuestionOutline])]
})
class ChildModule {}

这样，当 ChildModule 加载之后，整个应用都能够使用 QuestionOutline 图标。

当然，不要忘记在 NZ_ICONS 中删除该图标。

在 Standalone 模式下，你可以在懒加载的组件中或路由的 providers 中使用 provideNzIconsPatch 来补充图标：

import { NzIconModule, provideNzIconsPatch } from 'ng-zorro-antd/icon';

// 在 xxx.component.ts 中
@Component({
  standalone: true,
  imports: [NzIconModule],
  providers: [provideNzIconsPatch([QuestionOutline])]
})
class ChildComponent {}

// 或 在 xxx.routes.ts 中
const routes: Routes = [{
  path: '',
  providers: [provideNzIconsPatch([QuestionOutline])],
}]

双色图标主色#

对于双色图标，可以通过提供全局配置 { nzIcon: { nzTwotoneColor: 'xxx' } } 或 NzConfigService 的对应方法修改来全局设置图标主色。

自定义 font 图标#

我们提供了一个 fetchFromIconfont 方法，方便开发者调用在 iconfont.cn 上自行管理的图标。

this._iconService.fetchFromIconfont({
  scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'
});
<span nz-icon [nzIconfont]="'icon-tuichu'"></span>

其本质上是创建了一个使用 <use> 标签渲染图标的组件。

options 的配置项如下：

参数说明类型默认值
scriptUrliconfont.cn 项目在线生成的 js 地址，在 namespace 也设置的情况下有效string-

在 scriptUrl 都设置有效的情况下，组件在渲染前会自动引入 iconfont.cn 项目中的图标符号集，无需手动引入。

见 iconfont.cn 使用帮助 查看如何生成 js 地址。

命名空间#

用户可以使用该功能方便地添加自己的 icon。在渲染一个自定义 icon 时，只需要将 type 指定为 namespace:name 的形式，icon 组件就会在用户自行添加的图标中进行检索并渲染。同时支持静态和动态引入。

静态引入，只需要调用 NzIconService 的 addIconLiteral 方法即可。

动态引入，只需要保证 SVG 资源文件放到了相应的目录，即 assets/${namespace} 即可。例如你在 zoo 命名空间下有一个 panda 图标，你需要做的就是将 panda.svg 放到 assets/zoo 目录底下。

常见问题#

图标都不见了！#

你是不是没有阅读以上的文档？

我想静态引入全部的图标，该怎么做？#

尽管这是不推荐的行为，实际上我们已经在 静态加载与动态加载 部分演示过了：

import * as AllIcons from '@ant-design/icons-angular/icons';

const antDesignIcons = AllIcons as {
  [key: string]: IconDefinition;
};
const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key])

然后通过 forRoot 或者 NzIconService 的 addIcon 方法引入。

动态加载会不会影响网页的性能？#

我们用了多种手段来尽量减少动态请求，包括先静态后动态、缓存和相同 icon 的请求复用，用户很少能感知到 icon 是异步加载的。在网络环境尚可的情况下，即使是有三百多 icon 同时展示的 NG-ZORRO 官网，也基本没有卡顿。对于加载速度要求更高的用户，我们也支持 CDN。

我怎么知道一个 icon 的静态引入名？#

很简单，大写驼峰加主题即为 icon 的引入名。比如，alibaba 的引入名就是 AlibabaOutline，事实上，编辑器的自动补全能帮助到你。