Question

我已经在侧栏中定义了菜单项，如下所示，我打算添加一个新的自定义SVG图标。通过当前的实现，我可以按预期的方式渲染材质图标，但是现在，当我添加未渲染的新的自定义SVG图标时，挑战就来了。

在side-bar-component.html中，您将看到我正在遍历图标列表并动态呈现它们。

我在MatIconRegistry中添加了app.component.ts服务，并在HttpClientModule中导入了app.module.ts。我需要以svgIcon的格式将mat-icon添加到<mat-icon svgIcon=“license_certificate”></mat-icon>中以呈现SVG图标，但是其余图标是不需要的实质图标。如何动态添加svgIcon=“license_certificate并呈现图标？

侧边栏

side-bar-component.ts

    menu = [
        {
          path: '/dashboard',
          icon: 'home',
          name: 'Home'
        },
        {
          icon: 'local_drink',
          name: 'Liquor',
          perm: 'liquor',
          children: [
            {
              path: '/applications',
              icon: 'assignment',
              name: 'Applications'
            },
            {
              path: '/renewals',
              icon: 'autorenew',
              name: 'Renewals'
            },
            {
              path: '/license/issue',
              icon: 'license_certificate', // CUSTOM ICON
              name: 'Issue'
            },
            {
              path: '/activities',
              icon: 'business_center',
              name: 'Activities'
            },
          ]
        },
        {
          name: 'Billing',
          icon: 'receipt',
          perm: 'billing',
          children: [
            {
              path: '/billing/list',
              icon: 'history',
              name: 'Billing History'
            },
            {
              path: '/billing/search',
              icon: 'search',
              name: 'Search Bills'
            }
          ]
        },

        {
          name: 'Receipting',
          icon: 'receipt',
          perm: 'receipting',
          children: [
            {
              path: '/receipting/add',
              icon: 'note_add',
              name: 'New Receipt'
            },
            {
              path: '/receipting/list',
              icon: 'history',
              name: 'Receipt List'
            },
            {
              path: '/receipting/search',
              icon: 'search',
              name: 'Search'
            }

          ]
        }]


  ngOnInit() {
    const perms = ['sbp', 'liquor', 'billing', 'receipting'];
    perms.push('None');
    perms.push('sbp');
    console.log(perms);
    // perms = perms.split(',')

    this.menu = this.menu.filter(item => perms.some(f => f.toLowerCase() === item.perm)
    );

  }

side-bar-component.html

要使SVG呈现，预计mat-icon具有svgIcon="nameOfIcon，这不适用于其余图标。

<mat-accordion>
   <li *ngFor="let item of menu" class="row" [ngClass]="{active: isActive(item)}">
   <div class="row parent-item" [routerLink]="item.path" *ngIf="!item.children">
   <mat-icon>{{item.icon}}</mat-icon>
   <span>{{item.name}}</span>
   </div>
   </li>
</mat-accordion>

app.module.ts

我已按照预期在HttpClientModule中导入了app.module.ts

.....
  imports: [
    AppCommonModule,
    HttpClientModule,
....

app.component.ts

export class AppComponent {

  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer) {

    this.matIconRegistry.addSvgIcon(
      `license_certificate`,
      this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/images/icons/license_certificate.svg')
    );
  }
}

图片目录

Answer 1

向模型添加新字段


X_test = [df.loc[x[0]:x[1] - 1] for x in zero_ranges]

（显然，这不是一个例子）

在您的HTML中：

path: '/dashboard',
icon: 'home',
name: 'Home',
isCustom: true,

动态呈现由材质图标和自定义SVG图标组成的列表

1 个答案: