Add Lucide icon picker with custom MA device icons for player settings

[dmoo500]

Summary

Replaces the MDI-only icon picker with a searchable Lucide icon picker. Adds custom MA device icons and a unified PlayerIcon component used consistently throughout the UI.

---

Icon picker

• Searchable dropdown across ~1 900 Lucide icons
• Default view shows a curated suggestion list (device icons first, then room/area/media icons)
• Ranked search: exact word match → prefix → word-prefix → substring; suggested icons are boosted within each rank
• Icon preview shown inline in the input field after selection
• Existing mdi-* values continue to work (backward compat via PlayerIcon)

---

Custom MA device icons

Four new device-specific icons ship in src/components/ma-icons/:

Name	Device
homepod-mini	Apple HomePod mini
sonos	Sonos speaker
mac	Mac / MacBook
apple-tv	Apple TV

Custom icons implement the same size prop interface as Lucide icons and use currentColor — they work identically everywhere a Lucide icon is used.

Adding a new icon in future: create src/components/ma-icons/<name>.ts, add it to index.ts registry. One file, ~10 lines.

---

PlayerIcon component

New PlayerIcon.vue replaces all direct <v-icon :icon="player.icon"> usages:

• Renders MDI icons (mdi-*) via <v-icon> for backward compat
• Renders Lucide / MA icons via <component :is>
• Falls back to the Lucide Speaker icon when no icon is set

[OzGav]

Satisfies Music Assistant Project Board (view)

[stvncode]

So we are slowly switching everything to lucide icons. @MarvinSchenkel, do you think this make sense or it would be preferable to directly update it with an icon picker with lucide icons ?

[MarvinSchenkel]

So we are slowly switching everything to lucide icons. @MarvinSchenkel, do you think this make sense or it would be preferable to directly update it with an icon picker with lucide icons ?

If the effort is low the change the icons in the picker to lucide icons, I would suggest to go for lucide 👍

[stvncode]

@MarvinSchenkel hmmm, i don't think it's low coz we have to do a new component (even if i think there is already examples online so that's ok) but the main problem is that everyone who's already using custom mdi icons will not have it anymore. So either we chose a default icon if they were using a mdi icon and we let them modify with lucide for others or we stay with mdi for now (but we will modify it at some point)

[marcelveldt]

We want to switch to lucide icons anyways and we also want to have some custom player specific icons, like an outline of a homepod mini etc. So maybe we should start working on that ?

Then backend can already set a good default based on the player type/model.

For instance, I would also love to see some icons for specific areas in your house, such as a kitchen etc.
A bit how the Hue app does this. It has nice icons for specific light fixtures but also area based. We would want the same for players/speakers and areas.

Idea: what if we support both for now so it remains backwards compatible ?
player icon has explicit user-set value of an mdi icon (the icon always starts with mdi-) --> use md icon
so the icon picker will show our selection of lucide icons (and maybe also md icons for now?) but can also still handle an existing mdi value.

alternative is that we do a one time migration in the backend to migrate well-known mdi icons to our curated list and reset the ones we cant match to default

[dmoo500]

@marcelveldt This PR has been updated to address your feedback:

What is implemented:

• Lucide-only picker — MDI icons are no longer shown in the picker UI. Existing mdi-* values continue to render correctly via a new PlayerIcon component, so no migration is needed (your "support both" approach).
• Custom MA device icons — Four new icons in src/components/ma-icons/: homepod-mini, sonos, mac, apple-tv. The shapes were traced from the MA Figma design file.
• PlayerIcon component — Unified rendering throughout the UI. Falls back to Lucide Speaker when no icon is configured.
• Suggestion list — The picker shows MA device icons first, then curated Lucide icons for rooms/areas (sofa, bed-double, tree, car, door-open, sun, flower-2, utensils, …) — similar to the Hue approach you described.

[stvncode]

Vuetify component

[stvncode]

Vuetify component here

[stvncode]

For the vuetify component, maybe you have no choice for the v-autocomplete since it's for the settings elements that didn't get refactored yet. You can let it like this because using a shadcn autocomplete will defer from other settings

[stvncode]

Regarding the dynamic import, the goal is not really met. So the clean move is to import it synchronously, which both removes the hazard and simplifies the code. I'll try to improve it later

[marcelveldt]

@stvncode, @dmoo500 what is the status of this PR ?
Would be awesome to get this in and see these custom nice icons for your players everywhere

[dmoo500]

I hope I've implemented this correctly.

One more question/thought: Would it make sense to create a separate icon repository later?