Skip to content

Add MDI icon picker for player icon settings#1779

Open
dmoo500 wants to merge 2 commits into
music-assistant:mainfrom
dmoo500:feature/mdi-icon-picker
Open

Add MDI icon picker for player icon settings#1779
dmoo500 wants to merge 2 commits into
music-assistant:mainfrom
dmoo500:feature/mdi-icon-picker

Conversation

@dmoo500
Copy link
Copy Markdown
Contributor

@dmoo500 dmoo500 commented May 17, 2026

Replaces the plain text field for ConfigEntryType.ICON (player icon settings) with a proper autocomplete icon picker, matching the UX pattern from Home Assistant's ha-icon-picker.

Changes

  • src/components/MdiIconPicker.vue — new component: v-autocomplete with icon preview, 5-level keyword search ranking (exact name → exact keyword → starts-with → contains name → contains keyword), max 100 results
  • src/views/settings/ConfigEntryField.vue — swap v-text-field for MdiIconPicker on ICON config entries
  • scripts/gen-mdi-icon-names.mjs — build-time script that generates src/helpers/mdi-icon-names.ts from @mdi/svg/meta.json (7188 icons with tags + aliases for keyword search)
  • vite.config.ts — Vite buildStart plugin calls the gen script automatically on every dev/build run
  • package.json — remove unused @mdi/js; add @mdi/svg as devDependency (provides meta.json with icon metadata)
  • .gitignore — exclude the generated src/helpers/mdi-icon-names.ts (rebuilt at build time, not committed)

Approach

Follows the same pattern as Home Assistant: icon list is generated at build time from @mdi/svg/meta.json which includes tags and aliases for quality keyword search. The generated file is gitignored and rebuilt automatically.

Screenshot

MDI Icon Picker

@OzGav
Copy link
Copy Markdown
Contributor

OzGav commented May 18, 2026

Satisfies Music Assistant Project Board (view)

@stvncode
Copy link
Copy Markdown
Contributor

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
Copy link
Copy Markdown
Contributor

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
Copy link
Copy Markdown
Contributor

@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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants