Dynamically changing lightning button icon name with setAttribute not working

Question

I'm trying to change the icon of a lightning button icon but the image isn't changing however I see that the attribute is being updated.

 this.template.querySelector('#'+event.target.id).setAttribute("icon-name","utility:check");

Answer 1

setAttribute is for setting HTML attributes. For component attributes, use direct assignment:

event.target.iconName='utility:check"

If you use query selectors, just remember that if it's not an HTML component, use the direct assignment method.

Answer 2

Using track variable is another way to go.

In the javascript controller

@track iconname = 'DefaultIconName';

handleToggleIconname(){
  this.iconname = 'NewIconName';
}

In the html template file

<lightning-icon icon-name={iconname}></lightning-icon>