In my lwc html I'm using

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

In .js setting value in icon-name on any event say platform event,

this.iconname = 'utility:success';


I tried

<lightning-icon data-id="icon-data" icon-name={iconname}></lightning-icon>

with query selector in .js

let icon = this.template.querySelector('lightning-icon[data-id=icon-data]'); icon.iconName = 'utility:success';

but still no use

any help would be appreciated


1 Answer 1


The very simple example below works fine so I suggest you add some console.log statements to check that your code is executing as you think.

The norm in LWC is to drive the view from the JavaScript properties (your first approach).

import { LightningElement } from 'lwc';

export default class MyIcon extends LightningElement {
    iconName = 'standard:link';
    toggle() {
        if (this.iconName == 'standard:link') this.iconName = 'standard:search';
        else if (this.iconName == 'standard:search') this.iconName = 'standard:link';
        <lightning-icon icon-name={iconName} onclick={toggle}></lightning-icon>

You must log in to answer this question.

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