Icon图标

语义化的矢量图形。
使用

图标列表#

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

选择图标主题风格

方向性图标

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

代码演示

使用 <nz-icon> 来声明组件。使用 nzType 属性指定对应的图标。 可以通过 nzTheme 属性来设置不同的主题风格的图标,也可以通过设置 nzSpin 属性来实现动画旋转效果。

<nz-icon> 自 v19 版本起受支持,而 <span nz-icon><i nz-icon> 仍受支持,但不再推荐。

expand codeexpand code
      加载中
    

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

expand codeexpand code
      加载中
    

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

expand codeexpand code
      加载中
    

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

expand codeexpand code
      加载中
    

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

expand codeexpand code
      加载中
    

API#

nz-icon, [nz-icon]#

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

NzIconService#

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

SVG 图标#

NG-ZORRO 采用 svg 图标,带来了以下优势:

  • 支持多色图标。
  • 在低端设备上 SVG 有更好的清晰度。
  • 对于内建图标的更换可以提供更多 API,而无需样式覆盖。

你可以使用 nz-icon 组件,传入 theme 以明确图标的主题风格,例如:

<nz-icon nzType="star" nzTheme="fill" />

静态加载与动态加载#

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

静态加载,可以在 app.config.ts 中使用 provideNzIcons 引入你需要的图标(推荐)或者是全部的图标,例如:

import { IconDefinition } from '@ant-design/icons-angular';
import { provideNzIcons } 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 Record<string, IconDefinition>;
// const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key])

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

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

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

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

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

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

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

在子模块中补充图标#

有时候,为了避免增大 main.js 的体积,你可能想要在懒加载的组件中或路由的 providers 中使用 provideNzIconsPatch 来补充图标

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

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

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

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

双色图标主色#

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

自定义 font 图标#

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

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

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

options 的配置项如下:

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

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

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

命名空间#

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

静态引入,只需要调用 NzIconServiceaddIconLiteral 方法即可。

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

常见问题#

图标都不见了!#

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

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

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

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

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

然后通过 provideNzIcons 或者 NzIconServiceaddIcon 方法引入。

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

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

我怎么知道一个图标的静态引入名?#

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