edit

src/app/app.component.ts

@@ -2,6 +2,7 @@ import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
 import { NavigationEnd, NavigationError, RouteConfigLoadStart, Router } from '@angular/router';
 import { TitleService, VERSION as VERSION_ALAIN } from '@delon/theme';
 import { environment } from '@env/environment';
+import { NzIconService } from 'ng-zorro-antd/icon';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { VERSION as VERSION_ZORRO } from 'ng-zorro-antd/version';
 
@@ -15,10 +16,14 @@ export class AppComponent implements OnInit {
     renderer: Renderer2,
     private router: Router,
     private titleSrv: TitleService,
-    private modalSrv: NzModalService
+    private modalSrv: NzModalService,
+    private iconService: NzIconService
   ) {
     renderer.setAttribute(el.nativeElement, 'ng-alain-version', VERSION_ALAIN.full);
     renderer.setAttribute(el.nativeElement, 'ng-zorro-version', VERSION_ZORRO.full);
+    this.iconService.fetchFromIconfont({
+      scriptUrl: 'https://at.alicdn.com/t/font_3153207_udngwyp35db.js'
+    });
   }
 
   ngOnInit(): void {

src/app/layout/pro/components/menu/menu.component.html

@@ -1,7 +1,7 @@
 <ng-template #icon let-i>
   <ng-container *ngIf="i" [ngSwitch]="i.type">
     <i *ngSwitchCase="'icon'" nz-icon [nzType]="i.value" class="alain-pro__menu-icon"></i>
-    <i *ngSwitchCase="'iconfont'" nz-icon [nzIconfont]="i.iconfont" class="alain-pro__menu-icon"></i>
+    <i *ngSwitchCase="'iconfont'" nz-icon [nzIconfont]="i.iconfont" class="alain-pro__menu-icon icon"></i>
     <img *ngSwitchCase="'img'" src="{{ i.value }}" class="anticon alain-pro__menu-icon alain-pro__menu-img" />
     <i *ngSwitchDefault class="anticon alain-pro__menu-icon {{ i.value }}"></i>
   </ng-container>

src/assets/mocks/menu-data.json

@@ -8,7 +8,11 @@
         "children": [
           {
             "text": "用户中心",
-            "icon": "anticon anticon-dashboard",
+            "icon": {
+              "type": "iconfont",
+              "value": "icon-yonghu-copy",
+              "iconfont": "icon-yonghu-copy"
+            },
             "group": true,
             "children": [
               {
@@ -89,7 +93,11 @@
           },
           {
             "text": "运力管理",
-            "icon": "anticon anticon-dashboard",
+            "icon": {
+              "type": "iconfont",
+              "value": "icon-yunli-copy",
+              "iconfont": "icon-yunli-copy"
+            },
             "group": true,
             "children": [
               {
@@ -114,7 +122,11 @@
           },
           {
             "text": "货源管理",
-            "icon": "anticon anticon-dashboard",
+            "icon": {
+              "type": "iconfont",
+              "value": "icon-huoyuan-copy",
+              "iconfont": "icon-huoyuan-copy"
+            },
             "group": true,
             "children": [
               {
@@ -145,48 +157,44 @@
           },
           {
             "text": "订单管理",
-            "icon": "anticon anticon-dashboard",
+            "icon": {
+              "type": "iconfont",
+              "value": "icon-dingdan-copy",
+              "iconfont": "icon-dingdan-copy"
+            },
             "group": true,
             "children": [
               {
                 "text": "整车订单",
-                "icon": "anticon anticon-dashboard",
                 "link": "/order-management/vehicle"
               },
               {
                 "text": "大宗订单",
-                "icon": "anticon anticon-dashboard",
                 "link": "/order-management/bulk"
               },
               {
                 "text": "风险单管理",
-                "icon": "anticon anticon-dashboard",
                 "link": "/order-management/risk"
               },
               {
                 "text": "单据审核",
-                "icon": "anticon anticon-dashboard",
                 "link": "/order-management/receipts-audit"
               },
               {
                 "text": "投诉管理",
-                "icon": "anticon anticon-dashboard",
                 "link": "/order-management/complaint"
               },
               {
                 "text": "合规抽查",
-                "icon": "anticon anticon-dashboard",
                 "link": "/order-management/compliance-audit"
               },
               {
                 "text": "整车订单详情",
-                "icon": "anticon anticon-dashboard",
                 "link": "/order-management/vehicle-detail/:id",
                 "hide": true
               },
               {
                 "text": "大宗订单详情",
-                "icon": "anticon anticon-dashboard",
                 "link": "/order-management/bulk-detail/:id",
                 "hide": true
               }
@@ -194,7 +202,11 @@
           },
           {
             "text": "运单管理",
-            "icon": "anticon anticon-dashboard",
+            "icon": {
+              "type": "iconfont",
+              "value": "icon-yundan-copy",
+              "iconfont": "icon-yundan-copy"
+            },
             "group": true,
             "children": [
               {
@@ -223,7 +235,11 @@
           },
           {
             "text": "财务管理",
-            "icon": "anticon anticon-dashboard",
+            "icon": {
+              "type": "iconfont",
+              "value": "icon-caiwu-copy",
+              "iconfont": "icon-caiwu-copy"
+            },
             "group": true,
             "children": [
               {
@@ -326,7 +342,11 @@
           },
           {
             "text": "票务管理",
-            "icon": "anticon anticon-dashboard",
+            "icon":  {
+              "type": "iconfont",
+              "value": "icon-piaowu-copy",
+              "iconfont": "icon-piaowu-copy"
+            },
             "group": true,
             "children": [
               {
@@ -404,7 +424,11 @@
           },
           {
             "text": "合同管理",
-            "icon": "anticon anticon-dashboard",
+            "icon":  {
+              "type": "iconfont",
+              "value": "icon-hetong-copy",
+              "iconfont": "icon-hetong-copy"
+            },
             "group": true,
             "children": [
               {
@@ -423,7 +447,11 @@
           },
           {
             "text": "系统设置",
-            "icon": "anticon anticon-dashboard",
+            "icon": {
+              "type": "iconfont",
+              "value": "icon-shezhi-copy",
+              "iconfont": "icon-shezhi-copy"
+            },
             "group": true,
             "children": [
               {

src/styles.less

@@ -6,7 +6,17 @@
 @import './styles/index';
 @import './styles/theme';
 
+.icon {
+    width    : 18px;
+    height   : 18px;
+    fill     : currentColor;
+    overflow : hidden;
+    font-size: 18px !important;
+    color    : #ffffff;
+}
+
 @layout-gutter: 8px;
+
 /* 全局滚动条美化 */
 *::-webkit-scrollbar {
     width : (@layout-gutter);
@@ -24,16 +34,17 @@ input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
 }
+
 /* 全局隐藏input-number上下箭头 火狐*/
 input[type="number"] {
     -moz-appearance: textfield;
 }
 
-.alain-pro__sider-logo{
+.alain-pro__sider-logo {
     padding-left: 12px;
 }
 
-.break-word-all{
+.break-word-all {
     word-break: break-all;
     word-wrap : break-word;
 }