CODEWITHSUNDEEP
angulariconsangular-materialngfor
isherwood
isherwood

Reputation: 61115

How can I use a mix of core and custom Angular Material icons in an ngFor list?

Say I have a list of core Angular Material icons like so:

<md-nav-list>
    <a md-list-item *ngFor="let item of items">
        <md-icon>{{item.icon}}</md-icon>
    </a>
</md-nav-list>

But I've defined some custom ones like so:

iconRegistry
  .addSvgIcon('blah_icon', sanitizer.bypassSecurityTrustResourceUrl('images/blah.svg'))

And custom icons require a different markup structure, like so:

<md-icon svgIcon="{{item.icon}}"></md-icon>

How can I use a blend the two in the repeating list?

Upvotes: 0

Views: 300

Answers (1)

Z. Bagley
Z. Bagley

Reputation: 9270

You'll need some sort of flag to say whether or not it's core or custom. You can then use an ngIf to render the DOM

<md-nav-list>
    <a md-list-item *ngFor="let item of items">
        <md-icon *ngIf="item.flag">{{item.icon}}</md-icon>
        <md-icon *ngIf="!item.flag" svgIcon="{{item.icon}}"></md-icon>
    </a>
</md-nav-list>

Another option would be to use [innerHTML] in your template and change the icon string to include the DOM:

<md-nav-list>
    <a md-list-item *ngFor="let item of items" [innerHtml]="item.icon"></a>
</md-nav-list>

With new item.icon being...

'<md-icon>home</md-icon>'

or

'<md-icon svgIcon="blah_icon"></md-icon>'

Upvotes: 1

Related Questions