Accordion Marker

Use the marker slot for a custom SVG marker. Markers rotate by default; set rotate: unset to opt out.

Custom Icon Example

This accordion uses a custom marker icon instead of the default. The styling and animation are automatically applied to the slot, so the icon rotates when expanded or collapsed.

Code

The following example assumes that you have imported the component and set up the theme.

<sv-accordion class="accordion">
  <svg slot="marker" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
2 collapsed lines
    <path d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"></path>
  </svg>

  <span slot="summary">Custom Icon Example</span>

  <p class="accordion-content">
    This accordion uses a custom marker icon instead of the default. The styling and animation are automatically applied to the
    slot, so the icon rotates when expanded or collapsed.
  </p>
</sv-accordion>

5 collapsed lines
<style>
  .accordion .accordion-content {
    margin-block-start: 0;
  }
</style>