ionic icon and “Can't bind to 'name' since it isn't a known native property” error

Question

I'm using ionic 2 and angular2 for developing mobile app, when i want use ionic icon and [name]'s property with expressions like this :

<icon item-right 
      [name]="result.kind ==='song' ? 'musical-notes' : 'film'">
</icon>

i got an error:

angular2-polyfills.js:528 Unhandled Promise rejection: Template parse errors:
Can't bind to 'name' since it isn't a known native property ("

    <icon item-right 
    [ERROR ->][name]="result.kind ==='song' ? 'musical-notes' : 'film'"></icon>

but for my learning source(video tutorial) its work... why ?!

Answer 1

I would use the ion-icon element instead of the icon one:

<ion-icon item-right 
  [name]="result.kind ==='song' ? 'musical-notes' : 'film'">
</ion-icon>

See this link for more details:

• http://ionicframework.com/docs/v2/components/#icons