关于ng-alain图标icon不显示的解决方法

问题

按照官网文档的推荐方法使用icon插件，插件会自动在 src 目录下生成两个文件：

src/style-icons.ts 自定义部分无法解析（例如：远程菜单图标）

src/style-icons-auto.ts 命令自动生成文件
同时，需要手动在 startup.service.ts 中导入：

import { ICONS_AUTO } from '../../../style-icons-auto';
import { ICONS } from '../../../style-icons';
@Injectable()
export class StartupService {
  constructor(iconSrv: NzIconService) {
    iconSrv.addIcon(...ICONS_AUTO, ...ICONS);
  }
}

然后写了一些有效语法举例，如下：

<i class="anticon anticon-user"></i>
<i class="anticon anticon-question-circle-o"></i>
<i class="anticon anticon-spin anticon-loading"></i>
<i nz-icon class="anticon anticon-user"></i>
<i nz-icon nzType="align-{{type ? 'left' : 'right'}}"></i>
<i nz-icon [type]="type ? 'menu-fold' : 'menu-unfold'" [theme]="theme ? 'outline' : 'fill'"></i>
<i nz-icon [type]="type ? 'fullscreen' : 'fullscreen-exit'"></i>
<i nz-icon nzType="{{ type ? 'arrow-left' : 'arrow-right' }}"></i>
<i nz-icon nzType="filter" theme="outline"></i>
<nz-input-group [nzAddOnBeforeIcon]="focus ? 'anticon anticon-arrow-down' : 'anticon anticon-search'"></nz-input-group>

但是！但是！但是！重要的事情说三遍！有些图标无法显示，文档未说明处理方法。以下是我的解决思路，仅供参考！仅供参考！仅供参考！

解决方法

1. 首先找到style-icons-auto.ts文件，文件内容如下：

/*
* Automatically generated by 'ng g ng-alain:plugin icon'
* @see https://ng-alain.com/cli/plugin#icon
*/

import {
  AppstoreOutline,
  ArrowDownOutline,
  ClearOutline,
  CloudOutline,
  FolderOpenOutline,
  FolderOutline,
  FullscreenExitOutline,
  FullscreenOutline,
  GlobalOutline,
  LockOutline,
  LogoutOutline,
  MailOutline,
  MenuFoldOutline,
  MenuUnfoldOutline,
  PayCircleOutline,
  PrinterOutline,
  ScanOutline,
  SettingOutline,
  StarOutline,
  TeamOutline,
  ToolOutline,
  UserOutline
} from '@ant-design/icons-angular/icons';

export const ICONS_AUTO = [
  AppstoreOutline,
  ArrowDownOutline,
  CloudOutline,
  ClearOutline,
  FolderOpenOutline,
  FolderOutline,
  FullscreenExitOutline,
  FullscreenOutline,
  GlobalOutline,
  LockOutline,
  LogoutOutline,
  MailOutline,
  MenuFoldOutline,
  MenuUnfoldOutline,
  PayCircleOutline,
  PrinterOutline,
  ScanOutline,
  SettingOutline,
  StarOutline,
  TeamOutline,
  ToolOutline,
  UserOutline
];

我们在ICONS_AUTO数组中，随便点击一个，按F12(vs code)，就会跳到icons/outline文件加下，找到你需要的icon图标名称，将名称导入到ICONS_AUTO数组中，这样就可以显示图标了。