From 48a94924981b58306b4594999665a494bd21e947 Mon Sep 17 00:00:00 2001
From: kn <kristiannoergaard@gmail.com>
Date: Wed, 21 Oct 2026 10:03:45 +0200
Subject: [PATCH] (Svelte) Render unmapped MDI icons in the Svelte client

config.xml names icons by MDI name ("mdi-library"), and vue2 ships the
whole @mdi/font, so any MDI name works there. The Svelte client maps
names to lucide icons through a short table and drew an empty circle
for everything else. The example configs hit the same gap.

Names missing from the table now render from @mdi/font, the same font
vue2 uses. The lucide table stays, so mapped icons look as before. The
glyph is sized from the caller's h-*/w-* box (font-size 100cqh in a
size container), so call sites are unchanged. Names that are not
"mdi-[a-z0-9-]+" still get the circle, which keeps config values out
of the class list.

The lockfile carries only the @mdi/font entries; npm would also have
rewritten unrelated "dev" flags.
---
 Client/svelte/package-lock.json           | 8 ++++++++
 Client/svelte/package.json                | 1 +
 Client/svelte/src/lib/amcf/MdiIcon.svelte | 8 ++++++++
 3 files changed, 17 insertions(+)

diff --git a/Client/svelte/package-lock.json b/Client/svelte/package-lock.json
index 5dfee7c0..3a62d61a 100644
--- a/Client/svelte/package-lock.json
+++ b/Client/svelte/package-lock.json
@@ -18,6 +18,7 @@
 			"devDependencies": {
 				"@internationalized/date": "^3.11.0",
 				"@lucide/svelte": "^0.561.0",
+				"@mdi/font": "^7.4.47",
 				"@sveltejs/adapter-auto": "^7.0.0",
 				"@sveltejs/adapter-static": "^3.0.10",
 				"@sveltejs/kit": "^2.50.2",
@@ -565,6 +566,13 @@
 				"svelte": "^5"
 			}
 		},
+		"node_modules/@mdi/font": {
+			"version": "7.4.47",
+			"resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.4.47.tgz",
+			"integrity": "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==",
+			"dev": true,
+			"license": "Apache-2.0"
+		},
 		"node_modules/@polka/url": {
 			"version": "1.0.0-next.29",
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
diff --git a/Client/svelte/package.json b/Client/svelte/package.json
index 4a0a6699..947bde37 100644
--- a/Client/svelte/package.json
+++ b/Client/svelte/package.json
@@ -15,6 +15,7 @@
 	"devDependencies": {
 		"@internationalized/date": "^3.11.0",
 		"@lucide/svelte": "^0.561.0",
+		"@mdi/font": "^7.4.47",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.50.2",
diff --git a/Client/svelte/src/lib/amcf/MdiIcon.svelte b/Client/svelte/src/lib/amcf/MdiIcon.svelte
index dc9e724b..e00c941d 100644
--- a/Client/svelte/src/lib/amcf/MdiIcon.svelte
+++ b/Client/svelte/src/lib/amcf/MdiIcon.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '@mdi/font/css/materialdesignicons.min.css';
 	import Home from '@lucide/svelte/icons/house';
 	import LayoutDashboard from '@lucide/svelte/icons/layout-dashboard';
 	import Settings from '@lucide/svelte/icons/settings';
@@ -178,11 +179,18 @@
 	};
 
 	let Icon = $derived(mdiMap[icon] || null);
+	// Names without a lucide equivalent render from the MDI webfont, as in the vue2 client.
+	let isMdiName = $derived(/^mdi-[a-z0-9-]+$/.test(icon));
 </script>
 
 {#if Icon}
 	{@const ResolvedIcon = Icon}
 	<ResolvedIcon class={className} />
+{:else if isMdiName}
+	<!-- The glyph is sized from the box (100cqh), so callers size it with h-*/w-* like a lucide icon. -->
+	<span class="inline-block shrink-0 {className}" style="container-type: size" aria-hidden="true">
+		<i class="mdi {icon} block leading-none" style="font-size: 100cqh"></i>
+	</span>
 {:else if icon}
 	<CircleIcon class={className} />
 {/if}