change icon color on lighting tab

Question

trying to change the color of an utility icon on a lightning tab but adding a variant does not work. What are the possible ways to change the color of the lightning tab icon?

<lightning-tab label='{label}' value={value} end-icon-name='utility:icon' variant='Error'></lightning-tab>

Answer 1

You can use either Styling Hooks or Design Token to change the Tab Icon Color as below.

Styling Hooks

.blue-icon{
    --slds-c-icon-color-foreground-default:red;
}

Design Token

.blue-icon{
    --lwc-colorTextIconDefault:blue;
}

HTML

<template>   
    <lightning-card>
        <lightning-tabset class="blue-icon">
            <lightning-tab end-icon-name="utility:button_choice" label="Item One"> 
                Content for tab 1 
            </lightning-tab>
        </lightning-tabset>
    </lightning-card>
</template>