Icon SVG packs

[luwes]

we've discussed this before a bit internally and it came up again recently as a friction point.
I think we all agree that the big SVG's can get noisy in the HTML markup.
SVG symbols work https://replit.com/@luwes/media-theme-tailwind-audio#index.html
not 100% sure yet what is better, SVG <use> or a custom element that renders the SVG icon itself

I think icon packs could work a bit like themes where only a simple ESM import is needed.

you can start using the icons granularly with a custom element similar to https://shoelace.style/components/icon
<media-icon name="play"></media-icon>

but since the control buttons are all named specifically it could be automatic
<media-play-button></media-play-button> would get the play and pause icon of the currently loaded icon pack

maybe with an top down override system

<media-controller icons="fontawesome">
<media-control-bar icons="material">
<media-icon slot="play" icons="material" name="play">

this should still work once SSR declarative shadom dom is fully supported

[luwes]

custom elements seem the way to go. some more resources:

• https://iconify.design/docs/iconify-icon/
• https://ionic.io/ionicons/usage