How to add css to change the label color of navigation icon in LWC

Question

<lightning-vertical-navigation selected-item={selectedItem} onselect={handleselecteditem} class="navigation">
              <lightning-vertical-navigation-section label="Teacher">
              <lightning-vertical-navigation-item-icon label="Teacher Dashboard"  name="teacher dashboard" icon-name="utility:home" class="my icon"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon  label="Edit Teacher Profile" name="edit teacher profile" icon-name="utility:identity"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="My Photo Albums" name="My Photo Albums" icon-name="utility:image" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="My Messages" name="My Messages" icon-name="utility:email" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="My Member Assistance Program" name="My MemberAssistance Program" icon-name="utility:groups" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="Communication Settings" name="Communication Settings" icon-name="utility:automate" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="Billing" name="Billing" icon-name="utility:moneybag" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="My Teaching Hours" name="MyTeachingHours" icon-name="utility:clock" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="My Training Hours" name="MyTrainingHours" icon-name="utility:clock" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="commUnity" name="commUnity" icon-name="utility:comments" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
              <lightning-vertical-navigation-item-icon label="YACEP® Dashboard" name="yacep dashboard" icon-name="utility:groups" href="https://nirast-dev-ed.develop.builder.salesforce-experience.com/sfsites/picasso/core/config/commeditor.jsp?exitURL=https%3A%2F%2Fnirast-dev-ed.develop.my.salesforce.com%2Fservlet%2Fnetworks%2Fswitch%3FnetworkId%3D0DB2w000000bvXQ%26startURL%3D%252FcommunitySetup%252FcwApp.app%2523%252Fc%252Fhome"></lightning-vertical-navigation-item-icon>
          </lightning-vertical-navigation-section>

How can I change the label color for this navigation icon labels. I changed icon color using

:host {
    --sds-c-icon-color-foreground-default: rgb(219, 40, 40);
}

But I need to change label color too.

Answer 1

There are no styling hooks for label's color, so you cannot change it. Even if you set valid css rules in your component, it will not leak into standard lightning-vertical-navigation-item-icon component due to Shadow DOM.

Anyway you could build your own component starting from blueprint, or you could replace those lightning-vertical-navigation-item-icon with a combination of div and lightning-icon, this way you could add your own style for the label, I.E.

HTML

<div class="slds-nav-vertical__item" onclick={setActive}>
    <a href="#" class="slds-nav-vertical__action">
        <lightning-icon icon-name="utility:home" size="x-small" class="slds-m-right_x-small" alternative-text="Teacher Dashboard" title="Teacher Dashboard"></lightning-icon>
        <!-- Label -->
        <span class="slds-text-color_error">Teacher Dashboard</span>
    </a>
</div>

<div class="slds-nav-vertical__item" onclick={setActive}>
    <a href="#" class="slds-nav-vertical__action">
        <lightning-icon icon-name="utility:identity" size="x-small" class="slds-m-right_x-small" alternative-text="Edit Teacher Profile" title="Edit Teacher Profile"></lightning-icon>
        <!-- Label -->
        <span class="slds-text-color_error">Edit Teacher Profile</span>
    </a>
</div>

In order to have the same behavior of the standard component, I've added a listener on click event on outer div to set the element as active. It just toggle the slds-is-active class on that element.

Javascript

previousActiveElement;

setActive(event) {
    if (this.previousActiveElement) {
        this.previousActiveElement.classList.remove('slds-is-active');
    }
    event.currentTarget.classList.add('slds-is-active');
    this.previousActiveElement = event.currentTarget;
}