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>

ng.component

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

The icon is correctly assigned when the component initializes.

However, when I do

ng.cmponent

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

Answer 1

As per the comment noted give this a try

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