Player (Plyr layout) with custom-icons not working in <media-plyr-layout> (Web Component, vidstack@next)

[djount]

Hello,

I'm using vidstack@next and trying to provide custom SVG icons inside the component using the custom-icons attribute as documented here.

I've tried the following:

<media-plyr-layout custom-icons>
  <svg slot="play-icon">...</svg>
</media-plyr-layout>

However, it does not render any icons inside the corresponding (or others). The slot stays empty, and the fallback default icon is not displayed either.

To make sure it’s not an issue with my markup, I verified:

• The
• The slots are correctly named (e.g., slot="play-icon", slot="pause-icon", etc.).
• Removing custom-icons causes the default icons to render as expected.

Additionally, setting layout.icons = { ... } from JavaScript does nothing, which seems to make sense since icons is only available in the React version.

---

Edit : 06/08/2025

I just noticed that using the script directly :

<script src="https://cdn.vidstack.io/plyr" type="module"></script> works.

However, running it like this doesn't work :

import 'vidstack/player';
import 'vidstack/player/layouts/plyr';

---

Expected

Custom

Version

• vidstack@next (Web Component version, not React)
• Latest Chrome, Firefox, Safari (tested on macOS)

Happy to provide a live reproduction or demo repo if needed.

Thanks a lot for your amazing work!