One way to change the icon color for Lightning-tab in LWC is by utilizing renderedCallback in JavaScript.
.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);
}
}
I hope you find this solution helpful.
Thank you