how to style tab icons differently in lwc

Question

I have below requirement to style individual tab icons with different colors from one another in lwc using base lightning-tabset component.

<template>
    <lightning-tabset class="tabIconClass">
        <lightning-tab label="Item One" icon-name="utility:add">
            One Content !
        </lightning-tab>
        <lightning-tab label="Item Two" icon-name="utility:check">
            Two Content !
        </lightning-tab>
        <div class="chandra">
            <lightning-tab label="Item Three" icon-name="utility:edit">
                Three Content !
            </lightning-tab>
        </div>
    </lightning-tabset>
</template>

Can you please help me on this if there is way to achieve this

Answer 1

Since you cannot directly add class names to those Icons, using styling hooks seems to be out of the question. I think your best approach would be to use the SLDS blueprints for tabs and there, add your "custom" icons and leverage styling hooks.

Answer 2

This is possible thanks to this js snippet.

renderedCallback() {
    //prepare style component which will be inserted to dom
    const styleCss = document.createElement('style');
    styleCss.innerText = ``;
    //get all tabs with data-color attribute
    this.template.querySelectorAll(`[data-color]`).forEach(tab => {
        //get actual id of the tab icon
        let iconId = tab.getAttribute("aria-labelledby");
        //add css rule which will fill the svg with defined color
        styleCss.innerText += `#${iconId} svg {fill:${tab.dataset.color} !important;}\n`;
    })
    //append the style component
    if (this.template.querySelector('lightning-tabset') != null) {
        this.template.querySelector('lightning-tabset').appendChild(styleCss);
    }
}

Below is just for completeness, the main key is above. Heavily inspired in this stackoverflow.

---

html

<lightning-tabset variant="vertical">
    <template for:each={tabs} for:item="tab">
        <lightning-tab label={tab.label} onactive={handleTabActive} key={tab.label}
                       icon-name="utility:down" data-color={tab.color}>
            {tab.text}
        </lightning-tab>
    </template>
</lightning-tabset>

tab definition

get tabs() {
    return [
        {
            label: 'label 1',
            text: 'text 1',
            color: '#ffffff',
        },
        {
            label: 'label 2',
            text: 'text 2',
            color: '#525252',
        },
    ]
}