CODEWITHSUNDEEP
angularonsen-ui2
i8abug
i8abug

Reputation: 1682

How to get ons-icon to load the icon dynamically?

I've been having an issue with using the ons-icon and angular2 for a while.

<span *ngFor="let theIcon of item.getItem().style.get('icon')">
   <ons-icon [icon]="theIcon"></ons-icon> {{theIcon}}
</span>

While {{theIcon}} does display the proper icon text (md-cutlery), ons-icon never shows the icon. If I copy the text into the control and change it to icon="md-cutlery", it displays fine.

What am I missing?

Upvotes: 1

Views: 536

Answers (1)

Fabio Antunes
Fabio Antunes

Reputation: 22862

In Angular2 you have different directives to create bindings, you have directives for Attribute, Class, and Style Bindings. Since you want to create an attribute binding you need to do:[attr.icon]="myIconVar"

So your code should be:

<span *ngFor="let theIcon of item.getItem().style.get('icon')">
   <ons-icon [attr.icon]="theIcon"></ons-icon> {{theIcon}}
</span>

Upvotes: 1

Related Questions