angular 使用ng-zorro添加iconfont图标

angular 使用ng-zorro添加iconfont图标

在本文章我使用的是symbol的方式，你也可以使用fontClass或者unicode方式，但据官方原话来说，symbol是以后的主流 方式，推荐使用。
另外，如果你不想借助ng-zorro，而是单纯使用angular引用iconfont,可以看我另一篇博客。
入口：angular9使用iconfont （symbol方式）

一.在线链接方式

1. 首先登录iconfont.cn
2. 选好 图标点击加入购物车，选好后在购物车中将所有图标加入项目
   
   3.复制symbol在线链接
   
   4.在使用的组件中引入NzIconService，生效，参考以下官网例子

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

@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'
    });
  }
}

官网例子入口