Calcite accordion custom icon

jca_geo

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>

 

KittyHurley

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>