Angular Ionic icon binding does not compile

Issue

I have a custom version of <ion-select> under which I use the standard <ion-select-option>.

<custom-select>
    <ion-select-option></ion-select-option>
</custom-select>

When I bind an icon like this

<ion-select-option value="test" icon="information-circle">
    Test
</ion-select-option>

The code compiles and the custom wrapper component takes care of adding the icon in the appropriate place.

But when I bind it like this

<ion-select-option value="test" [icon]="getIcon()">Test2</ion-select-option>

I get error Can't bind to 'icon' since it isn't a known property of 'ion-select-option'.

I need the latter because adding the icon is conditional.

Example: stackblitz link

Solution

I found a solution, using attr.icon works:

<ion-select-option
  value="test2"
  attr.icon="{{ 1===1 ? 'information-circle' : null }}"
>
  Test2
</ion-select-option>

I still don't know why it works although ion-select-option does not have icon attribute officially.

Answered By - Boat