[SalesForce] Dynamically changing lightning button icon name with setAttribute not working

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");

Best Answer

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.