topic Re: Calcite accordion custom icon in Calcite Design System Questions

Calcite accordion custom icon

jca_geo — Sun, 23 Apr 2023 03:30:29 GMT

Is it possible to change the icons in an accordion when using calcite design?
I'm hoping to use a custom image but I'm only able to use what's available from the calcite library. Thanks.

<calcite-accordion appearance="transparent" icon-position="start" scale="l">

<calcite-accordion-item description="Yachts, boats, and dinghies" heading="Watercraft" icon-start="embark">
<calcite-notice open>
<div slot="message">Recommended for coastal use</div>
</calcite-notice>
</calcite-accordion-item>

<calcite-accordion-item icon-start="car" heading="Automobiles" description="Cars, trucks, and buses">
<calcite-notice open>
<div slot="message">A good choice for inland adventure</div>
</calcite-notice>
</calcite-accordion-item>

<calcite-accordion-item icon-start="plane" heading="Aircrafts" description="Planes, helicopters, and jets">
<calcite-notice open>
<div slot="message">Cross continents quickly</div>
</calcite-notice>
</calcite-accordion-item>

</calcite-accordion>

Re: Calcite accordion custom icon

KittyHurley — Tue, 25 Apr 2023 15:15:55 GMT

Hi @jca_geo - Accordion Item has two slots to add customize content, actions-end and actions-start, which could include user-defined images, such as png's or svg's.

For instance:

<calcite-accordion-item heading="Bears"> <img src="https://placebear.com/30/30" slot="actions-start" alt="A bear searching for an afternoon meal" /> <calcite-notice open> <div slot="message">Bears are mammals.</div> </calcite-notice> </calcite-accordion-item>

Re: Calcite accordion custom icon

jca_geo — Wed, 26 Apr 2023 03:23:30 GMT

thank you @KittyHurley! this solution works well.