很多同学在使用NG-ZORRO时，会发现很多图标没有，图标不够用，接下来我就教你如何添加自己的图标。
创建图标
在ng-zorro官网中有很多种添加方式，我这里采用的是命名空间的方式，这种方式比较简单。
首先创建一个目录icon-extend，然后使用ng g class icon-extend创建一个class类，该类主要是给AppComponent根类继承用的，用于实现图标的初始化。然后使用ng g class icon-extend-model的model类，该类定义了一个图标的模型。然后创建一个platform-icon-list.ts的文件，这个文件用于添加图标信息。然后为icon-extend-model类添加属性，代码如下：export class IconExtendModel {
// 图标
type: string;
//图标对应的svg
svg: string;
//图标描述
descript: string;
}
5. 在platform-icon-list.ts中添加图标信息，这里定义成一个常量，其中type是图标名称，格式是：命名空间:图标名称，例如：app:sys-manage；descript是图标的中文描述，主要是给使用的人或开发人员看的；svg是一个svg文件内容，这个svg内容可以通过https://www.iconfont.cn/ 网站获取（需要有注册帐号），点击你需要的图标，在弹出的框中点击又下角的“复制svg”把它贴到我们的platformIconList中就可以了，代码如下：
import { IconExtendModel } from '@platform/common/model/icon-extend-model';
export const platformIconList: Array<IconExtendModel> = [
{
type: 'app:sys-manage',
descript: '系统管理',
// tslint:disable-next-line:max-line-length
svg: '<svg t=\"1569064677032\" class=\"icon\" viewBox=\"0 0 1169 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"7564\" width=\"512\" height=\"512\"><path d=\"M787.333831 588.946093a75.189984 75.189984 0 0 0-75.093984 75.092984 75.189984 75.189984 0 0 0 75.093984 75.093984 75.165984 75.165984 0 0 0 75.067984-75.093984 75.165984 75.165984 0 0 0-75.067984-75.092984m0 222.841953a147.919968 147.919968 0 0 1-147.748968-147.748969c0-81.455982 66.291986-147.747968 147.748968-147.747968 81.431983 0 147.747968 66.291986 147.747968 147.747968 0 81.480982-66.315986 147.748968-147.747968 147.748969m89.452981 102.106978c0.342 0.244 1.317 0.585 2.315999 0.585h0.122l71.484985-39.496992c-1.706-4.022999-9.605998-23.478995-9.605998-43.739991a113.858976 113.858976 0 0 1 107.739977-113.613975c0.853-4.729999 5.557999-31.524993 5.557998-51.639989s-4.704999-46.88399-5.558998-51.637989a113.858976 113.858976 0 0 1-107.738977-113.565976c0-20.357996 7.923998-39.813991 9.605998-43.81299l-70.313985-39.057992-0.293-0.025a5.339999 5.339999 0 0 0-2.706 0.732 196.753958 196.753958 0 0 1-26.014994 21.819995c-21.698995 15.238997-42.153991 22.967995-60.951987 22.967995-18.919996 0-39.594991-7.874998-61.390987-23.405995a194.705958 194.705958 0 0 1-26.160994-22.283995 5.777999 5.777999 0 0 0-2.729999-0.707h-0.245l-72.824985 40.032992c1.706 4.046999 9.580998 23.479995 9.580998 43.73999A113.858976 113.858976 0 0 1 528.895886 614.350088c-0.854 4.729999-5.509999 31.524993-5.509998 51.638989s4.655999 46.90899 5.533998 51.662989a113.858976 113.858976 0 0 1 107.763977 113.589975c0 20.334996-7.972998 39.863991-9.679998 43.788991l68.973985 38.545992h0.146c1.024 0 1.95-0.365 2.317-0.585a200.849957 200.849957 0 0 1 26.428994-23.161995c22.088995-16.188997 43.079991-24.429995 62.414987-24.429995 19.552996 0 40.715991 8.387998 62.950986 24.917995 14.920997 11.068998 25.258995 22.185995 26.550995 23.575995m22.673995 108.397976c-13.774997-0.025-27.135994-5.704999-35.765993-15.213996-11.775997-12.896997-49.005989-46.44599-79.530982-46.44599-30.280993 0-68.119985 33.767993-78.993984 45.54399-8.606998 9.386998-21.869995 14.969997-35.498992 14.969997-6.484999 0-12.604997-1.243-18.187996-3.706l-0.975-0.414-92.69698-51.833988-0.926-0.683a44.46999 44.46999 0 0 1-14.920996-53.735989c0.049-0.146 8.532998-19.699996 8.532998-37.594992a98.376979 98.376979 0 0 0-98.254979-98.254978h-3.900999c-15.505997 0-28.159994-13.799997-32.182993-35.108993-0.341-1.706-7.923998-42.178991-7.923999-74.044984 0-31.913993 7.557998-72.361984 7.899999-74.117984 4.119999-21.576995 16.992996-35.449992 32.816993-35.083993h3.266999a98.400979 98.400979 0 0 0 98.279979-98.303978c0-17.846996-8.484998-37.399992-8.558998-37.619992a44.34899 44.34899 0 0 1 15.067996-53.661989l0.95-0.658 97.840979-53.759988 1.024-0.415c5.485999-2.364999 11.507998-3.534999 17.895996-3.534999 13.604997 0 26.891994 5.436999 35.595992 14.628997 11.580998 12.116997 48.17699 43.641991 77.774984 43.64199 29.354994 0 65.755986-30.914993 77.287983-42.812991 8.654998-8.996998 21.844995-14.335997 35.302992-14.335997 6.509999 0 12.653997 1.219 18.285997 3.657l0.974999 0.414 94.47698 52.516988 0.95 0.658c16.895996 11.751997 23.332995 34.889993 14.945997 53.735989-0.049 0.146-8.532998 19.699996-8.532999 37.545992a98.400979 98.400979 0 0 0 98.254979 98.279978h3.291c15.774997-0.341 28.719994 13.506997 32.816993 35.107993 0.317 1.707 7.899998 42.203991 7.899998 74.069984 0 31.889993-7.582998 72.410984-7.948998 74.117984-4.046999 21.551995-16.992996 35.424992-32.767993 35.059993h-3.291a98.400979 98.400979 0 0 0-98.254979 98.278978c0 17.846996 8.483998 37.449992 8.556999 37.619992a44.42199 44.42199 0 0 1-15.017997 53.710989l-0.927 0.683-96.133979 53.100988-0.975 0.415a44.88499 44.88499 0 0 1-17.846996 3.583999z m222.061952-705.339848a48.76199 48.76199 0 1 1-97.523979 0V121.977194c0-13.457997-10.873998-24.453995-24.307995-24.453995h-877.859811c-13.262997 0-24.306995 10.970998-24.306995 24.453995v584.995874c0 13.457997 10.873998 24.453995 24.307995 24.453995h219.500953a48.76199 48.76199 0 1 1 0 97.523979H48.907989A48.76199 48.76199 0 0 1 0 780.190052V48.76221C0 21.822215 21.893995 0.00022 48.907989 0.00022h1023.706781a48.76199 48.76199 0 0 1 48.907989 48.76199v268.189942zM219.427953 975.23701c0-26.940994 21.991995-48.76199 48.981989-48.761989h194.607959a48.76199 48.76199 0 1 1 0 97.523979H268.433942a48.76199 48.76199 0 0 1-49.005989-48.76199z\" fill=\"\" p-id=\"7565\"></path></svg>' }];
6.接下来就是初始化图标，在icon-extend类中，需要注入ng-zorro的NzIconService服务，然后通过服务的addIconLiteral方法添加图标，代码实现如下：
import { Injectable } from '@angular/core';
import { NzIconService } from 'ng-zorro-antd/icon';
import { IconExtendModel } from '@platform/common/model/icon-extend-model';
import { platformIconList } from './platform-icon-list';
@Injectable()
export class IconExtend {
constructor(
private iconService: NzIconService
) {
this.initExtendIcons();
}
initExtendIcons() {
this.addIcons(platformIconList);
}
/**
* 添加图标，继承这个类后，可以调用这个方法自己添加图标
* @param iconList
*/
addIcons(iconList: Array<IconExtendModel>) {
for (const icon of iconList) {
this.iconService.addIconLiteral(icon.type, icon.svg);
}
}
}
在app.component.ts类中的AppComponent类继承IconExtend类即可，一定要放在根的component中去初始化，因为这个类是第一个初始化的，所以其它组件在初始化前就已经把图标初始化好了，代码如下：图标初始化的使用
import { Component, OnInit } from '@angular/core';
import { IconExtend } from '@platform/shared/icon-extend/icon-extend';
import { appIconList } from './app-icon-list';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent extends IconExtend implements OnInit {
ngOnInit() {
}
}
2.页面中的图标使用和原来使用ng-zorro的图标是一样的，只是这里的type名字需要有命名空间，就是我们上面定义的格式，代码如下：
<i nz-icon nzType=\"app:sys-manage\"></i>
3.使用这种方式的话有以下几个好处：
图标的使用方式不变，比如菜单的实现，需要把图标保存到数据库，这样就不需要区分是谁的图标，一样的保存一个字符串到库就可以了。不需要的时候不继承就可以了，不影响使用。使用了命名空间，就可以使用这个图标是ng-zorro的还是自己定义的，如果你的系统是一个基础框架，还可以封装起来，系统基础框架添加自己的图标，业务系统添加自己的图标，不容易被修改，如果是业务系统就不需要去系统基础框架中添加和个性图标，只需要在AppComponent中添加一个初始化的方法，调用IconExtend类继承下来的addIcons方法添加图标就可以了，例如：import { Component, OnInit } from '@angular/core';
import { IconExtend } from '@platform/shared/icon-extend/icon-extend';
import { appIconList } from './app-icon-list';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent extends IconExtend implements OnInit {
ngOnInit() {
this.addExtendIcons();
}
/**
* 通过该方法添加自定义的icon
* addIcons方法来自IconExtend类，不可删除
* 用法： <i nz-icon nzType=\"custom:logo\"></i>
*/
addExtendIcons() {
this.addIcons(appIconList);
}
}