Icon

Semantic vector graphics.

List of icons#

Click the icon and copy the code.

We are still adding two-tone icons right now, syncing to antd.

Import this Component Individually#

You can get more detail here.

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

Select the Icon Theme

Directional Icons

  • step-backward
  • step-forward
  • fast-backward
  • fast-forward
  • shrink
  • arrows-alt
  • down
  • up
  • left
  • right
  • caret-up
  • caret-down
  • caret-left
  • caret-right
  • up-circle
  • down-circle
  • left-circle
  • right-circle
  • double-right
  • double-left
  • vertical-left
  • vertical-right
  • vertical-align-top
  • vertical-align-middle
  • vertical-align-bottom
  • forward
  • backward
  • rollback
  • enter
  • retweet
  • swap
  • swap-left
  • swap-right
  • arrow-up
  • arrow-down
  • arrow-left
  • arrow-right
  • play-circle
  • up-square
  • down-square
  • left-square
  • right-square
  • login
  • logout
  • menu-fold
  • menu-unfold
  • border-bottom
  • border-horizontal
  • border-inner
  • border-outer
  • border-left
  • border-right
  • border-top
  • border-verticle
  • pic-center
  • pic-left
  • pic-right
  • radius-bottomleft
  • radius-bottomright
  • radius-upleft
  • radius-upright
  • fullscreen
  • fullscreen-exit

Suggested Icons

  • question
  • question-circle
  • plus
  • plus-circle
  • pause
  • pause-circle
  • minus
  • minus-circle
  • plus-square
  • minus-square
  • info
  • info-circle
  • exclamation
  • exclamation-circle
  • close
  • close-circle
  • close-square
  • check
  • check-circle
  • check-square
  • clock-circle
  • warning
  • issues-close
  • stop

Editor Icons

  • edit
  • form
  • copy
  • scissor
  • delete
  • snippets
  • diff
  • highlight
  • align-center
  • align-left
  • align-right
  • bg-colors
  • bold
  • italic
  • underline
  • strikethrough
  • redo
  • undo
  • zoom-in
  • zoom-out
  • font-colors
  • font-size
  • line-height
  • colum-height
  • dash
  • small-dash
  • sort-ascending
  • sort-descending
  • drag
  • ordered-list
  • unordered-list
  • radius-setting
  • column-width

Data Icons

  • area-chart
  • pie-chart
  • bar-chart
  • dot-chart
  • line-chart
  • radar-chart
  • heat-map
  • fall
  • rise
  • stock
  • box-plot
  • fund
  • sliders

Brand and Logos

  • android
  • apple
  • windows
  • ie
  • chrome
  • github
  • aliwangwang
  • dingding
  • weibo-square
  • weibo-circle
  • taobao-circle
  • html5
  • weibo
  • twitter
  • wechat
  • youtube
  • alipay-circle
  • taobao
  • skype
  • qq
  • medium-workmark
  • gitlab
  • medium
  • linkedin
  • google-plus
  • dropbox
  • facebook
  • codepen
  • code-sandbox
  • amazon
  • google
  • codepen-circle
  • alipay
  • ant-design
  • ant-cloud
  • aliyun
  • zhihu
  • slack
  • slack-square
  • behance
  • behance-square
  • dribbble
  • dribbble-square
  • instagram
  • yuque
  • alibaba
  • yahoo
  • reddit
  • sketch

Application Icons

  • account-book
  • alert
  • api
  • appstore
  • audio
  • bank
  • bell
  • book
  • bug
  • build
  • bulb
  • calculator
  • calendar
  • camera
  • car
  • carry-out
  • cloud
  • code
  • compass
  • contacts
  • container
  • control
  • credit-card
  • crown
  • customer-service
  • dashboard
  • database
  • dislike
  • environment
  • experiment
  • eye-invisible
  • eye
  • file-add
  • file-excel
  • file-image
  • file-exclamation
  • file-markdown
  • file-pdf
  • file-ppt
  • file-text
  • file-unknown
  • file-word
  • file-zip
  • file
  • filter
  • fire
  • flag
  • folder-add
  • folder-open
  • folder
  • frown
  • funnel-plot
  • gift
  • hdd
  • heart
  • home
  • hourglass
  • idcard
  • insurance
  • interaction
  • layout
  • like
  • lock
  • mail
  • medicine-box
  • meh
  • message
  • mobile
  • money-collect
  • notification
  • pay-circle
  • phone
  • picture
  • play-square
  • printer
  • profile
  • project
  • property-safety
  • pushpin
  • read
  • reconciliation
  • red-envelope
  • rest
  • rocket
  • safety-certificate
  • save
  • schedule
  • security-scan
  • setting
  • shop
  • shopping
  • skin
  • smile
  • sound
  • star
  • switcher
  • tablet
  • tag
  • tags
  • thunderbolt
  • tool
  • trophy
  • unlock
  • usb
  • video-camera
  • wallet
  • apartment
  • audit
  • barcode
  • bars
  • block
  • border
  • branches
  • ci
  • cloud-download
  • cloud-server
  • cloud-sync
  • cloud-upload
  • cluster
  • coffee
  • column-height
  • copyright
  • deployment-unit
  • desktop
  • disconnect
  • dollar
  • download
  • ellipsis
  • euro
  • exception
  • export
  • file-done
  • file-jpg
  • file-protect
  • file-search
  • file-sync
  • fork
  • gateway
  • global
  • gold
  • history
  • import
  • inbox
  • laptop
  • key
  • line
  • link
  • loading-3-quarters
  • loading
  • man
  • menu
  • monitor
  • more
  • number
  • paper-clip
  • percentage
  • pound
  • poweroff
  • pull-request
  • qrcode
  • reload
  • robot
  • safety
  • scan
  • search
  • select
  • shake
  • share-alt
  • shopping-cart
  • solution
  • sync
  • table
  • team
  • to-top
  • trademark
  • transaction
  • upload
  • user-add
  • user-delete
  • user
  • usergroup-add
  • usergroup-delete
  • wifi
  • woman

Examples

Use <i nz-icon></i> to create an icon and set its type in the nzType prop. Specific the nzSpin prop to show spinning animation and the theme property to switch different themes. Old API <i class="anticon"></i>

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-icon-basic',
  template: `
    <div class="icons-list">
      <i nz-icon [nzType]="'home'"></i>
      <i nz-icon [nzType]="'setting'" [nzTheme]="'fill'"></i>
      <i nz-icon [nzType]="'smile'" [nzTheme]="'outline'"></i>
      <i nz-icon [nzType]="'sync'" [nzSpin]="true"></i>
      <i nz-icon [nzType]="'smile'" [nzTheme]="'outline'" [nzRotate]="180"></i>
      <!-- Loading with new API would spin automatically! -->
      <i nz-icon [nzType]="'loading'"></i>
    </div>
  `,
  styles: [
    `
      [nz-icon] {
        margin-right: 6px;
        font-size: 24px;
      }
    `
  ]
})
export class NzDemoIconBasicComponent {}

You can just put a svg element inside of a nz-icon to render custom content. We would take care of size and color things for you.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-icon-custom',
  template: `
    <div class="icons-list">
      <i nz-icon style="color: hotpink;">
        <svg>
          <path
            d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"
          />
        </svg>
      </i>
      <i nz-icon style="font-size: 32px;">
        <svg>
          <path
            d="M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z"
            fill="#6B676E"
            p-id="1143"
          />
          <path
            d="M1024 561.548c0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548z"
            fill="#FFEBD2"
            p-id="1144"
          />
          <path
            d="M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z"
            fill="#E9D7C3"
            p-id="1145"
          />
          <path
            d="M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74z"
            fill="#FFFFFF"
            p-id="1146"
          />
          <path
            d="M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096c-49.548-33.032-132.128-148.646-132.128-181.678zM412.904 495.484c0-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z"
            fill="#6B676E"
            p-id="1147"
          />
          <path
            d="M512.002 726.622c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032z"
            fill="#464655"
            p-id="1148"
          />
          <path
            d="M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"
            fill="#464655"
            p-id="1149"
          />
          <path
            d="M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"
            fill="#464655"
            p-id="1150"
          />
        </svg>
      </i>
    </div>
  `,
  styles: [
    `
      [nz-icon] {
        margin-right: 6px;
        font-size: 24px;
      }
    `
  ]
})
export class NzDemoIconCustomComponent {}

You can use namespace to add your own icons. Static loading and dynamic loading are both supported.

expand codeexpand code
import { Component } from '@angular/core';
import { NzIconService } from 'ng-zorro-antd';

const ngZorroIconLiteral =
  '<svg viewBox="0 0 106 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n  <defs>\n    <linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-1">\n      <stop stop-color="#FA8E7D" offset="0%"></stop>\n      <stop stop-color="#F74A5C" offset="51.2635191%"></stop>\n      <stop stop-color="#F51D2C" offset="100%"></stop>\n    </linearGradient>\n    <linearGradient x1="68.1279872%" y1="-35.6905737%" x2="74.5363914%" y2="162.511755%" id="linearGradient-2">\n      <stop stop-color="#FA8E7D" offset="0%"></stop>\n      <stop stop-color="#F74A5C" offset="51.2635191%"></stop>\n      <stop stop-color="#F51D2C" offset="100%"></stop>\n    </linearGradient>\n    <linearGradient x1="69.644116%" y1="0%" x2="69.644116%" y2="100%" id="linearGradient-3">\n      <stop stop-color="#29CDFF" offset="0%"></stop>\n      <stop stop-color="#148EFF" offset="37.8600687%"></stop>\n      <stop stop-color="#0A60FF" offset="100%"></stop>\n    </linearGradient>\n    <linearGradient x1="-19.8191553%" y1="-36.7931464%" x2="138.57919%" y2="157.637507%" id="linearGradient-4">\n      <stop stop-color="#29CDFF" offset="0%"></stop>\n      <stop stop-color="#0F78FF" offset="100%"></stop>\n    </linearGradient>\n  </defs>\n  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n    <g id="Angular" transform="translate(-11.000000, -4.000000)">\n      <g id="Group-9" transform="translate(11.000000, 4.000000)">\n        <path d="M65.63,72.2 L53.23,53.2 L46,63.69 L53.37,63.69 C56.4075661,63.69 58.87,66.1524339 58.87,69.19 C58.87,72.2275661 56.4075661,74.69 53.37,74.69 L35.49,74.69 C33.4448986,74.6890667 31.569189,73.5534846 30.620326,71.7418281 C29.671463,69.9301715 29.8061511,67.7416349 30.97,66.06 L48.84,40.26 C49.879226,38.7527636 51.6013948,37.8627393 53.4320154,37.8868264 C55.2626361,37.9109135 56.960791,38.8459421 57.96,40.38 L74.84,66.18 C75.9449505,67.8698206 76.0352122,70.0292067 75.0751376,71.8053446 C74.115063,73.5814826 72.2590116,74.6888076 70.24,74.69 C68.3799194,74.6978131 66.6433454,73.7598372 65.63,72.2 Z" id="Path" fill="url(#linearGradient-1)"></path>\n        <path d="M70.28,25 C69.0616939,25.0004053 67.8648105,24.6796268 66.81,24.07 L52.87,16.07 L39,24 C36.8331842,25.2504298 34.1638674,25.249892 31.9975556,23.9985892 C29.8312438,22.7472865 28.4970513,20.4353214 28.4975555,17.933589 C28.4980597,15.4318566 29.833184,13.1204295 32,11.87 L49.34,1.87 C51.5058075,0.619570435 54.1741925,0.619570435 56.34,1.87 L73.76,11.87 C76.574107,13.4207731 77.9710889,16.688234 77.147902,19.7941088 C76.324715,22.8999837 73.492775,25.0466031 70.28,25 Z" id="Path" fill="url(#linearGradient-2)"></path>\n        <path d="M52.86,119.92 C51.6310454,119.919338 50.4239235,119.595139 49.36,118.98 L3.93,92.75 C1.76486614,91.4999595 0.43077789,89.190081 0.43,86.69 L0.43,34.23 C0.43077789,31.729919 1.76486614,29.4200405 3.93,28.17 L15.16,21.69 C17.3290879,20.369153 20.0434251,20.3267208 22.2527396,21.5791219 C24.4620541,22.831523 25.8197544,25.182284 25.8004986,27.7218131 C25.7812428,30.2613423 24.3880518,32.5912449 22.16,33.81 L14.43,38.27 L14.43,82.65 L52.86,104.83 L89.7896161,83.5159515 C90.7180357,82.9801111 91.29,81.9896088 91.29,80.9176536 L91.29,40.0028421 C91.29,38.9306213 90.7177545,37.9399157 89.7889721,37.4041727 L83.61,33.84 C81.4431842,32.5895704 80.1080601,30.2781434 80.1075559,27.7764111 C80.1070518,25.2746788 81.4412443,22.9627138 83.6075559,21.7114111 C85.7738676,20.4601083 88.4431842,20.4595704 90.61,21.71 L101.79,28.17 C103.955134,29.4200405 105.289222,31.729919 105.29,34.23 L105.29,86.69 C105.289222,89.190081 103.955134,91.4999595 101.79,92.75 L56.36,119 C55.2952279,119.610805 54.087499,119.928265 52.86,119.92 Z" id="Path" fill="url(#linearGradient-3)" fill-rule="nonzero"></path>\n        <path d="M78.06,106.45 C66.89,113 52.87,104.83 52.87,104.83 L15.9403839,83.5159515 C15.0119643,82.9801111 14.44,81.9896088 14.44,80.9176536 L14.44,40.0026171 C14.44,38.9305169 15.0121179,37.9399035 15.9407356,37.4041163 L22.17,33.81 C24.3980518,32.5912449 25.7912428,30.2613423 25.8104986,27.7218131 C25.8297544,25.182284 24.4720541,22.831523 22.2627396,21.5791219 C20.0534251,20.3267208 17.3390879,20.369153 15.17,21.69 L3.94,28.17 C1.77486614,29.4200405 0.44077789,31.729919 0.44,34.23 L0.44,86.69 C0.44077789,89.190081 1.77486614,91.4999595 3.94,92.75 L49.36,119 C51.5258075,120.25043 54.1941925,120.25043 56.36,119 L78.06,106.47 L78.06,106.45 Z" id="Path" fill="url(#linearGradient-4)" fill-rule="nonzero"></path>\n      </g>\n    </g>\n  </g>\n</svg>';

@Component({
  selector: 'nz-demo-icon-namespace',
  template: `
    <div class="icons-list">
      <i nz-icon nzType="ng-zorro:antd"></i>
    </div>
  `,
  styles: [
    `
      [nz-icon] {
        margin-right: 6px;
        font-size: 24px;
      }
    `
  ]
})
export class NzDemoIconNamespaceComponent {
  constructor(private _iconService: NzIconService) {
    this._iconService.addIconLiteral('ng-zorro:antd', ngZorroIconLiteral);
  }
}

Specify property nzTheme to twotone to render two-tone icons. You can also set the primary color.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-icon-twotone',
  template: `
    <div class="icons-list">
      <i nz-icon [nzType]="'smile'" [nzTheme]="'twotone'"></i>
      <i nz-icon [nzType]="'heart'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#eb2f96'"></i>
      <i nz-icon [nzType]="'check-circle'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#52c41a'"></i>
    </div>
  `,
  styles: [
    `
      .icons-list > .anticon {
        margin-right: 6px;
        font-size: 24px;
      }
    `
  ]
})
export class NzDemoIconTwotoneComponent {}

If you are using iconfont.cn, you can use the icons in your project gracefully.

expand codeexpand code
import { Component } from '@angular/core';
import { NzIconService } from 'ng-zorro-antd';

@Component({
  selector: 'nz-demo-icon-iconfont',
  template: `
    <div class="icons-list">
      <i nz-icon [nzIconfont]="'icon-tuichu'"></i>
      <i nz-icon [nzIconfont]="'icon-facebook'"></i>
      <i nz-icon [nzIconfont]="'icon-twitter'"></i>
    </div>
  `,
  styles: [
    `
      [nz-icon] {
        margin-right: 6px;
        font-size: 24px;
      }
    `
  ]
})
export class NzDemoIconIconfontComponent {
  constructor(private _iconService: NzIconService) {
    this._iconService.fetchFromIconfont({
      scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'
    });
  }
}

API#

[nz-icon]#

PropertyDescriptionTypeDefault
[nzType]Type of the ant design iconstring-
[nzTheme]Type of the ant design icon'fill' | 'outline' | 'twotone''outline'
[nzSpin]Rotate icon with animationbooleanfalse
[nzTwotoneColor]Only support the two-tone icon. Specific the primary color.string (hex color)-
[nzIconfont]Type of the icon from iconfontstring-
[nzRotate]Rotate degreesnumber-

API that is not started with nz and old API that is based on icon class names would be deprecated in 8.0.0. Please migrate.

NzIconService#

Methods/PropertiesDescriptionParameters
twoToneColorTo set the default primary color of twotone icons, use Ant Design's official blue by defaultTwoToneColorPaletteSetter
addIcon()To import icons staticallyIconDefinition
addIconLiteral()To statically import custom iconsstring, string (SVG)
fetchFromIconfont()To get icon assets from fonticonNzIconfontOption
changeAssetsSource()To change the location of your icon assets, so that you can deploy these icons wherever you wantstring

InjectionToken#

TokenDescriptionParameters
NZ_ICONSTo import icons staticallyIconDefinition[], useValue
NZ_ICON_DEFAULT_TWOTONE_COLORTo set the default primary color of twotone icons, use Ant Design's official blue by defaultstring (hex color), useValue

SVG icons#

We synced to Ant Design and replaced font icons with svg icons which bring benefits below:

  • Complete offline usage of icon, no dependency of alipay cdn font icon file and no more empty square during downloading.
  • Much more display accuracy in lower-level screens.
  • Support multiple colors for icon.
  • No need to change built-in icons with overriding styles by providing more props in component.

You can join in this dicussion of Ant Design.

NG-ZORRO hadn't provided an icon component. Instead, icon based on font files was provided. We make this new directive compatible to old API. If you make no changes to your existing code, old icons would be dynamically loaded as outline icons. But the best pratice is always to use nz-icon directive and specify the theme prop.

<i nz-icon [nzType]="'star'" [theme]="'fill'"></i>

All the icons will be rendered to <svg>, and styles and classes applied to <i> would work.

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

Static loading and dynamic loading#

As for icons provided by Ant Design, there are two ways of importing them into your project.

Static loading. By registering icons to AppModule you load icons statically.

import { IconDefinition } from '@ant-design/icons-angular';
import { NgZorroAntdModule, NZ_ICON_DEFAULT_TWOTONE_COLOR, NZ_ICONS } from 'ng-zorro-antd';

// Import what you need. RECOMMENDED. ✔️
import { AccountBookFill, AlertFill, AlertOutline } from '@ant-design/icons-angular/icons';

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

// Import all. NOT RECOMMENDED. ❌
// 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     : [
    NgZorroAntdModule,
  ],
  providers   : [
    { provide: NZ_ICON_DEFAULT_TWOTONE_COLOR, useValue: '#00ff00' }, // If not provided, Ant Design's official blue would be used
    { provide: NZ_ICONS, useValue: icons }
  ],
  bootstrap   : [ AppComponent ]
})
export class AppModule {
}

Actually this calls addIcon of NzIconService. Icons imported would be bundled into your .js files. Static loading would increase your bundle's size so we recommend use dynamic importing as much as you can. You can track this issue of Ant Design for more details.

Icons used by NG-ZORRO itself are imported statically to increase loading speed. However, icons demonstrated on the official website are loaded dynamically.

Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO detects that the icon you want to render hasn't been registered, it would fire a HTTP request to load it. All you have to do is to config your angular.json like this:

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

You can call changeAssetsSource() of NzIconService to change the location of your icon assets, so that you can deploy these icon assets to cdn. The parameter you passed would be add in front of assets/.

Let's assume that you deploy static assets under https://mycdn.somecdn.com/icons/assets. You can call changeAssetsSource('https://mycdn.somecdn.com/icons') to tell NG-ZORRO that all your resources are located there.

Please call this in component's constructor or AppInitService.

Set Default TwoTone Color#

When using the two-tone icons, you can change the property of NzIconService to specify the primary color: this.iconService.twoToneColor = { primaryColor: '#1890ff' }.

Custom Font Icon#

We added a fetchFromIconfont method function to help developer using their own icons deployed at iconfont.cn in a convenient way.

This method is specified for iconfont.cn.

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

It create a component that uses SVG sprites in essence.

The following option are available:

PropertyDescriptionTypeDefault
scriptUrlThe URL generated by iconfont.cn project.string-

The property scriptUrl should be set to import the svg sprite symbols.

See iconfont.cn documents to learn about how to generate scriptUrl.

Namespace#

We introduced namespace so you could add your own icons in a convenient way. When you wan to render an icon, you could assign typenamespace:name. Dynamic importing and static importing are both supported.

Static importing. Invoke addIconLiteral of NzIconService.

Dynamic importing. Make sure that you have put your SVG resources in dir like assets/${namespace}. For example, if you have a panda icon and in zoo namespace, you should put panda.svg in assets/zoo.

FAQ#

All my icons are gone!#

Have you read the docs above?

There are two similar icons in a <i></i> tag. What happened?#

In older versions of NG-ZORRO, there was a font file which would use :before to insert a icon according to a i tag's className. So if you have two icons, try to remove node_modules and reinstall. If the problem is still there, search @icon-url and remove that line.

I want to import all icons statically. What should I do?#

Actually we demonstrate it here Static loading and dynamic loading:

// 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])

Does dynamic loading affect web pages' performance?#

We used several methods to reduce requests, like static cache, dynamic cache and reusable request. It's basically not noticeable for visitors that icons are loaded asynchronously assuming web connections are fairly good.

How do I know a icon's corresponding module to import?#

Capital camel-case type & theme, i.e. alibaba => AlibabaOutline.