Dynamically changing a button icon

Question

Given the following button,

  <button
      icon = 'ui-icon-check'
      type = 'text'
      pButton
      label = 'Age'
      iconPos = 'right'></button>

I would like to dynamically change the icon assigned to the button icon property:

My attempt is as shown below:

ng.html

  <button
      [icon] = 'btnIcon'
      type = 'text'
      pButton
      label = 'Age'
      iconPos = 'right'></button>

....
btnIcon: string = 'ui-icon-check'

The icon is correctly assigned when the component initializes.

However, when I do

if(this.form.valid)
{this.btnIcon = 'ui-icon-information'}

although the form is valid, the icon does not change as expected.

Any idea is welcome. Thanks

Possible duplicate of [How to get ons-icon to load the icon dynamically?](http://stackoverflow.com/questions/39054548/how-to-get-ons-icon-to-load-the-icon-dynamically) — Fabio Antunes, Oct 18 '16 at 16:13
As you can see on the other question you need to use `[attr.icon] = 'btnIcon'` — Fabio Antunes, Oct 18 '16 at 16:18

score 1 · Answer 1 · answered Oct 18 '16 at 20:05

1

As per the comment noted give this a try

 <button
      [attr.icon] = 'btnIcon'
      type = 'text'
      pButton
      label = 'Age'
      iconPos = 'right'></button>

answered Oct 18 '16 at 20:05