Add MDI icon picker to all entity types

- Install @mdi/js (~7000 Material Design Icons)
- IconPicker component: dropdown with search, popular icons grid,
  clear option. Stores icon name as string (e.g. "mdiCamera")
- MdiIcon component: renders SVG from icon name
- Backend: add `icon` field to ImmichServer, TelegramBot,
  TrackingConfig, TemplateConfig, NotificationTarget, AlbumTracker
- All 6 entity pages: icon picker next to name input in create/edit
  forms, icon displayed on entity cards

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/routes/template-configs/+page.svelte

@@ -5,6 +5,8 @@
 	import PageHeader from '$lib/components/PageHeader.svelte';
 	import Card from '$lib/components/Card.svelte';
 	import Loading from '$lib/components/Loading.svelte';
+	import IconPicker from '$lib/components/IconPicker.svelte';
+	import MdiIcon from '$lib/components/MdiIcon.svelte';
 
 	let configs = $state<any[]>([]);
 	let loaded = $state(false);
@@ -16,7 +18,7 @@
 	let previewId = $state<number | null>(null);
 
 	const defaultForm = () => ({
-		name: '',
+		name: '', icon: '',
 		message_assets_added: '📷 {added_count} new photo(s) added to album "{album_name}"{common_date}{common_location}.{people}{assets}{video_warning}',
 		message_assets_removed: '🗑️ {removed_count} photo(s) removed from album "{album_name}".',
 		message_album_renamed: '✏️ Album "{old_name}" renamed to "{new_name}".',
@@ -119,8 +121,11 @@
 	<form onsubmit={save} class="space-y-5">
 		<div>
 			<label for="tpc-name" class="block text-sm font-medium mb-1">{t('templateConfig.name')}</label>
-			<input id="tpc-name" bind:value={form.name} required placeholder={t('templateConfig.namePlaceholder')}
-				class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+			<div class="flex gap-2">
+				<IconPicker value={form.icon} onselect={(v) => form.icon = v} />
+				<input id="tpc-name" bind:value={form.name} required placeholder={t('templateConfig.namePlaceholder')}
+					class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+			</div>
 		</div>
 
 		{#each templateSlots as group}
@@ -153,7 +158,10 @@
 			<Card>
 				<div class="flex items-start justify-between">
 					<div class="flex-1">
-						<p class="font-medium">{config.name}</p>
+						<div class="flex items-center gap-2">
+							{#if config.icon}<MdiIcon name={config.icon} />{/if}
+							<p class="font-medium">{config.name}</p>
+						</div>
 						<pre class="text-xs text-[var(--color-muted-foreground)] mt-1 whitespace-pre-wrap font-mono bg-[var(--color-muted)] rounded p-2">{config.message_assets_added?.slice(0, 120)}...</pre>
 						{#if previewResult && previewId === config.id}
 							<div class="mt-2 p-2 bg-[var(--color-success-bg)] rounded text-sm">