csssalesforceiconslightinglwc

icon color not applying for lightning-tab in LWC

.html

<lightning-tabset variant="vertical" >
        <lightning-tab class="class1" icon-name="utility:adduser" label="demo label1"> demo label1 </lightning-tab>
        <lightning-tab class="class2" icon-name="utility:adduser" label="demo label2"> demo label</lightning-tab>
<lightning-tabset/>

.css

.class1{
    --lwc-colorTextIconDefault: blue;
}
.class2{
    --lwc-colorTextIconDefault: red;
}

I am tried the same way as changing the icon color for lighting-icon but it doesn't work for lightning-tab.

Solution

  • you can use renderedcallback in js to change icon color for Lightning-tab in LWC.

    .html

     <lightning-tabset variant="vertical" class="tabsetCss" >
        <lightning-tab class="class1" icon-name="utility:adduser" label="demo label1" data-id= 'firstIcon'> demo label1 </lightning-tab>
        <lightning-tab class="class2" icon-name="utility:adduser" label="demo label2" data-id= 'secondIcon'> demo label</lightning-tab>
    </lightning-tabset>

    .js

     renderedCallback(){
        let firstIcon  = this.template.querySelector(`[data-id='firstIcon']`);
        let firstIconId = firstIcon.getAttribute("aria-labelledby");
        const firstStyleCss = document.createElement('style');
        firstStyleCss.innerText = ` .tabsetCss #${firstIconId} .slds-icon-utility-adduser svg {
                                fill:blue !important;
                                }
                            `;
        if (this.template.querySelector('lightning-tabset') != null) {
            this.template.querySelector('lightning-tabset').appendChild(firstStyleCss);
        }


        let secondIcon  = this.template.querySelector(`[data-id='secondIcon']`);
        let secondIconId = secondIcon.getAttribute("aria-labelledby");
        const secondStyleCss = document.createElement('style');
        secondStyleCss.innerText = ` .tabsetCss #${secondIconId} .slds-icon-utility-adduser svg {
                                fill:red !important;
                                }
                            `;
        if (this.template.querySelector('lightning-tabset') != null) {
            this.template.querySelector('lightning-tabset').appendChild(secondStyleCss);
        }
    }

    enter image description here

    Hope this is helpful to you.
    Thanks