refactor(web): material icons (#4636)

web/src/routes/admin/system-settings/+page.svelte

@@ -17,11 +17,10 @@
   import { featureFlags } from '$lib/stores/server-config.store';
   import { downloadBlob } from '$lib/utils/asset-utils';
   import { copyToClipboard } from '@api';
-  import Alert from 'svelte-material-icons/Alert.svelte';
-  import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
-  import Download from 'svelte-material-icons/Download.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import type { PageData } from './$types';
   import NewVersionCheckSettings from '$lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte';
+  import { mdiAlert, mdiContentCopy, mdiDownload } from '@mdi/js';
 
   export let data: PageData;
 
@@ -39,7 +38,7 @@
 
 {#if $featureFlags.configFile}
   <div class="mb-8 flex flex-row items-center gap-2 rounded-md bg-gray-100 p-3 dark:bg-gray-800">
-    <Alert class="text-yellow-400" size={18} />
+    <Icon path={mdiAlert} class="text-yellow-400" size={18} />
     <h2 class="text-md text-immich-primary dark:text-immich-dark-primary">Config is currently set by a config file</h2>
   </div>
 {/if}
@@ -48,13 +47,13 @@
   <div class="flex justify-end gap-2" slot="buttons">
     <LinkButton on:click={() => copyToClipboard(JSON.stringify(configs, null, 2))}>
       <div class="flex place-items-center gap-2 text-sm">
-        <ContentCopy size="18" />
+        <Icon path={mdiContentCopy} size="18" />
         Copy to Clipboard
       </div>
     </LinkButton>
     <LinkButton on:click={() => downloadConfig()}>
       <div class="flex place-items-center gap-2 text-sm">
-        <Download size="18" />
+        <Icon path={mdiDownload} size="18" />
         Export as JSON
       </div>
     </LinkButton>