Problem with icon color not being applied to lightning-tab component 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 attempted the same method to modify the icon color in lightning-icon, but unfortunately it did not work for my purpose with lightning-tab.

csssalesforceiconslightinglwc

Answer №1

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

https://i.sstatic.net/IXrvp.png

I hope you find this solution helpful.
Thank you

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to align a div with a background in CSS to the center

I'm attempting to center a text and an icon, but the icon is set within a background. How can I center the text and position the icon just to the left of the text? Here is the link to the fiddle with the code: jsfiddle <div class="error divErro ...

htmlcsscss-float

Is there a way to use CSS to swap out the content of one HTML element with another HTML element's content?

Having an issue with editing or locating a plugin's HTML template on WordPress. Wondering if it is possible to replace the content of one HTML element with another using just CSS? Appreciate any help! ...

htmlcsswordpress

Swapping images when hovering over a list item or anchor tag

I recently came across an intriguing issue with changing the img src on a:hover. Check out this SCREENSHOT When hovering over the <a> sector, it's not showing the white image as expected. I have black and white icons, and I want the img src to ...

htmlcsstags

Tips on how to horizontally center align a div when using the flex direction column technique

In my design, there is a container that consists of both a table and a div. The div has its display property set to flex with the flex-direction as column. I am trying to horizontally center align the div within the container. Below is the code snippet: ...

htmlcssflexbox

Customized figcaption formatting separate from the surrounding text

Is there a way to add a "figcaption" with independent settings to images placed alongside paragraphs in HTML? I have the following code snippet, but I'm unsure if I am using the figcaption tag correctly: <p><figure><span class="image ...

htmlcss

Utilizing static HTML, CSS, and JavaScript for secure backend administrative control

Seeking a solution for my static html, CSS, and JS website which includes some Jquery elements. I want to implement a user-friendly backend system that allows non-developer admins to log in, easily edit sections or change images with their own preferences. ...

phphtmlcssdynamicadmin

Is there a way to dynamically alter the heading color in Shopify liquid code?

After utilizing ChatGPT to review the code, I am uncertain if it is related to the color schemes. I am unsure of what I may be missing or doing incorrectly. While I can successfully alter the heading text, I am unable to change the color. Below is the code ...

htmlcssjsonshopifyliquid

Guide on using JavaScript to implement the universal CSS selector

One technique I frequently employ is using the CSS universal selector to reset the dimensions in my HTML document: * { border: 0; margin: 0; padding: 0; } I wonder if a similar approach can be achieved with JavaScript as well? When it come ...

javascriptcsscss-selectors

Say goodbye to my HTML5 creations

I am currently working on an HTML5 grid project that involves implementing a rectangle select tool for use within the grid. Everything is going smoothly, except for the fact that when I attempt to use the rectangular select tool, the grid disappears from t ...

javascriptcsshtml

The Kenburn zoom image effect fails to function

I want to implement a zoom effect on an image using the Ken Burns effect when it is clicked. However, the code I have written does not seem to be working as expected. Here is the code snippet: $(document).ready(function () { $('.kenburns').on( ...

javascriptcss

Creating a grid layout by designing boxes using CSS and HTML

I'm in the process of creating a homepage and I'd like it to resemble this design: (not the best quality, but the software I used was subpar (I miss mspaint)) Originally, I used buttons which made linking and customization easy, but I encounter ...

htmlcss

Shifting an image to the corner using HTML and CSS

As I work on designing a coming soon page, my goal is to have the voter's hand extend all the way to the edge of the screen by cutting off parts of the sleeve. Can you provide some guidance on what modifications are needed in the css/html code for thi ...

htmlcssimagebackground

Utilize text wrapping to ensure a fixed maximum height for content display

I am in need of a div that contains text spanning multiple lines, with both a fixed width and a maximum height. Currently, I have applied the CSS property overflow: hidden;. However, my issue arises when the last line of text exceeds the maximum height of ...

javascripthtmlcssword-wrap

What is the best way to vertically center elements within a navigation bar?

I'm currently working on a React application and I am trying to create a navigation bar. However, I am encountering some difficulties with aligning the elements in the middle of the nav bar layout. You can see the issue depicted in the image at this l ...

htmlcss

Guide to creating the onclick feature for a dynamic button in Meteor

<template name="actionTemplate"> {{#each action}} <button class="myButton" id={{_id}}>btn</button> {{> action}} {{/each}} </template> <template name="action"> <div class="sct" id={{_id}}> ...

javascriptjqueryhtmlcssmeteor

Iconic Side Navigation with collapsed button malfunctioning due to negative positioning

I'm facing two issues with my webpage. First: I have three buttons on the right side of my page that are supposed to behave like the buttons on this example. However, when you scroll, you can see that their position is incorrectly displayed "outside" ...

javascripthtmlcssbootstrap-4display

Creating a list of font sizes for each <p> tag in my HTML document

I am looking to create an array containing the font sizes of all the p tags in my HTML document. How can I specifically target only the p elements and not their parent elements? ...

javascripthtmlcss

Beginning of my initial endeavor (seeking feedback, general advice, criticism)

Hey everyone! I'm looking for a forum-style platform similar to Stack Overflow where I can get some feedback on my first project. It's the first one I've built from scratch, so I'm open to any critiques or suggestions on what could be i ...

htmlcssflexboxmedia-queries

The positioning of CSS arrows using the "top" attribute is not relative to the top of the page when using absolute values

I am currently working on positioning the arrow in the screenshot using TypeScript calculations. However, I am facing an issue where the position is being determined based on the top of the black popup instead of the top of the screen. From the top of the ...

javascriptcsstypescriptsass

I am in need of setting up two rows side by side using the display

I'm trying to have two rows side by side using display grid, but I'm facing some issues. When I use the following CSS... .grid-container { display: grid; grid-template-rows: auto auto; grid-template-columns: auto; grid-column-gap: 100px;} It cre ...

htmlcssbootstrap-5