Dynamically add icon name with Ionic2

Question

I'm trying to dynamically add icon names to my Ionic 2 app, the reason for this is that I have a list of attributes on my model, which are dynamic, the model returns the icon name to the ionic 2 application.

This is the response I'm getting from my API.

{
  "type": "searchresult",
  "count": 1,
  "results": [
    {
      "type": "room",
      "url": "/api/room/1",
      "id": 1,
      "name": "name1",
      "attributes": [
        {
          "type": "attribute",
          "url": "/api/room/1/attribute/1",
          "name": "attribute1",
          "icon": "people",
          "valueType": "bool",
          "value": "true"
        },
        {
          "type": "attribute",
          "url": "/api/room/1/attribute/3",
          "name": "attribute2",
          "icon": "desktop",
          "valueType": "bool",
          "value": "true"
        },
        {
          "type": "attribute",
          "url": "/api/room/1/attribute/4",
          "name": "attribute3",
          "icon": "md-videocam",
          "valueType": "bool",
          "value": "true"
        },
        {
          "type": "attribute",
          "url": "/api/room/1/attribute/5",
          "name": "attribute4",
          "icon": "icon-chair",
          "valueType": "int",
          "value": "200"
        }
      ]
    }
  }

This is what I have in the Ionic2 app at the moment.

<ion-row no-padding *ngFor="let att of room.attributes">
    <ion-col width-20 no-padding text-center>
        <ion-icon name="att.icon"</ion-icon>
    </ion-col>
</ion-row>

Thank you in advance.

developer033 · Accepted Answer · 2017-07-23T14:40:11.460

13

What happens here is that when you use name="att.icon" you're just passing the plain word att.icon to your name attribute, but in this case att is an object and icon is a key of this object.

That said, you want to use property binding like [name] instead of name:

<ion-icon [name]="att.icon"></ion-icon>

Compiler now will evaluate the value of the expression and assigns the value to the name.

Check the demo:

PLUNKER

Other questions:

edited Jul 23 '17 at 14:40

answered Jan 25 '17 at 05:13

developer033

24,267
8
82
108

I was thinking the same.. does it pic the icon like `src` attribute? or does it only pic from the imported icon directory? – Suraj Rao Jan 25 '17 at 05:16
can you please explain the difference between name and [name]? – Hamed Jul 23 '17 at 08:54

score 3 · Answer 2 · answered Jan 25 '17 at 15:16

3

Another way which I use is :

<ion-icon name={{att.icon}}></ion-icon>

Same thing works for src of img tag also

<img src={{att.image}}/>

answered Jan 25 '17 at 15:16

Sagar Kulkarni

2,072
2
16
25

score 0 · Answer 3 · edited Apr 23 '18 at 08:24

0

You can use it like <ion-icon name="{{att.icon}}"></ion-icon>.

edited Apr 23 '18 at 08:24

NightOwl888

55,572
24
139
212

answered Apr 23 '18 at 08:03

usman

3
2

score 0 · Answer 4 · answered May 30 '19 at 15:02

When data has come from ngFor I've had to use this before :

[attr.name]="ngForItem.name"

(using your code) :

<ion-row no-padding *ngFor="let att of room.attributes">
    <ion-col width-20 no-padding text-center>
        <ion-icon [attr.name]="att.icon"</ion-icon>
    </ion-col>
</ion-row>

Dynamically add icon name with Ionic2

4 Answers4