错误TypeError：iconName.split不是函数

Question

无法显示svgIcon。我给iconName作为svgIcon中的输入。

名称，如果删除<mat-icon>，则价格显示正常。

显示如下错误：

  

TypeError：iconName.split不是函数       在MatIcon.push ../ node_modules/@angular/material/esm5/icon.es5.js.MatIcon._splitIconName

app.component.ts

 getList(): ItemModel[] {

    const dataList: ItemModel[] = [];

    // let dataKey: string[] = [];

    const tempSanitizer = this.sanitizer;

    const tempService = this.service;

    Object.keys(this.service.dataSource).forEach( (key: string) => {

      dataList.push(this.service.dataSource[key]);

      // if (!tempService.dataSource.hasOwnProperty(key)) {
      //   console.log(key);
      // }
      // console.log(tempService.dataSource[key].icon);
      this.iconRegistery.addSvgIcon(

        key,

        tempSanitizer.bypassSecurityTrustResourceUrl(tempService.dataSource[key].icon)

      );

      }
    );

  return dataList;

}

app.component.html

<app-grid-beer [title]="'Top Weekly'" [itemList]="getList()"></app-grid-beer>
<!-- [dataSource]="" -->
    <app-grid-beer [title]="'Ever Green'" [itemList]="getList()"></app-grid-beer>

grid-beer.component.html

 <mat-grid-tile *ngFor="let item of itemList">

      <div fxLayout="column" fxLayoutGap="5px" fxLayoutAlign="center center">

        <mat-icon [svgIcon]="item.id" class="section-icon-height"></mat-icon>

        <span>{{item.id}}</span>

        <mat-label class="subtitle-1">{{item ? item.name : ''}}</mat-label>

        <label class="h6-header"><mat-icon svgIcon="rupee" class="rupee-icon"></mat-icon>{{item ? item.price : '' }}</label>

      </div>

    </mat-grid-tile>