图标颜色不适用于 LWC 中的闪电选项卡

Question

.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.

Answer 1

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

Hope this is helpful to you.
Thanks