Rich HTML inside header of <AccordionItem> components?

[MarkBFamFour]

I am using <Accordion> and <AccordionItem> components for a project and would like to add rich HTML to the header prop in the <AccordionItem> in order to, in this case, add an icon to the header bar of the <AccordionItem>. I see there is a <AccordionHeader> component but I can't see how this ties in or if it's just something you used internally in <AccordionItem>.

Is adding rich HTML in this part possible?

Edit: Looking at how the Modal components work, would it be a terrible idea to make Accordions work the same way, so an <AccordionHeader> can be explicitly supplied?

[UncountedBrute3]

Hi, not a maintainer just thought I might be able to help. Looking at the source code for AccordionHeader if I'm understanding the code correctly it's more of an internal component which is exposed by <slot />

If I'm understanding what you're asking (sorry if not), could you not do something like the following:

<script lang="ts">
  import { Accordion, AccordionItem, Styles, Icon } from "sveltestrap";
</script>

<Styles />

<Accordion>
  <AccordionItem active>
    <h4 class="m-0" slot="header">
      <Icon name="globe2" />
      Home
    </h4>
    Fallbrook
  </AccordionItem>
</Accordion>

Note the call to slot="header" which then allows the icon to be put into the according.

[MarkBFamFour]

Thanks, that fixed it, It is in the docs on closer inspection but it really wasn't that obvious!