6

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

2 Answers 2

11

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.

1
  • 1
    Interesting, I did not know that! Commented Dec 24, 2019 at 2:58
1

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>
1
  • 1
    +1, but note: @track is no longer necessary for shallow references, such as a string variable in your answer. You only need to track objects and arrays if you want them to be reactive.
    – sfdcfox
    Commented Feb 14, 2021 at 0:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .