[SalesForce] Change Icon of lightning-accordion-section component in LWC

I want to change the default "chevron" icon used for all sections and levels with Plus and Minus icons respectively. Is there any standard way by which I can achieve this? Following is the sample code of my template.

<template>
    <lightning-accordion allow-multiple-sections-open
                         active-section-name={activeSections}>
        <lightning-accordion-section name="A" label="Accordion Title A">
            <p>This is the content area for section A.</p>
            <lightning-accordion allow-multiple-sections-open>
                <lightning-accordion-section name="d" label="Accordion Title D">Content D</lightning-accordion-section>
                <lightning-accordion-section name="e" label="Accordion Title E">Content E</lightning-accordion-section>
                <lightning-accordion-section name="f" label="Accordion Title F">Content F</lightning-accordion-section>
            </lightning-accordion>
        </lightning-accordion-section>
    </lightning-accordion>
</template>

Best Answer

This is due to the Shadow DOM and the way that CSS works in LWC.

Currently developers do not have a way to override/customize CSS that is derived from Base Components. Salesforce team is working on giving developers more options.

Even in LWC Accordion's Documentation there isn't any attribute called icon-name.

If you need greater control than what's allowed by the component, you'll need to write your own instead.

Related Topic