refactor(web): material icons (#4636)

web/src/lib/components/elements/buttons/circle-icon-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type Icon from 'svelte-material-icons/AbTesting.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
 
-  export let logo: typeof Icon;
+  export let icon: string;
   export let backgroundColor = '';
   export let hoverColor = '#e2e7e9';
   export let padding = '3';
@@ -23,7 +23,7 @@
   {hideMobile && 'hidden sm:flex'}"
   on:click
 >
-  <svelte:component this={logo} {size} />
+  <Icon path={icon} {size} />
   <slot />
 </button>
 

web/src/lib/components/elements/dropdown.svelte

@@ -5,12 +5,14 @@
 </script>
 
 <script lang="ts" generics="T">
+  import Icon from './icon.svelte';
+
+  import { mdiCheck } from '@mdi/js';
+
   import _ from 'lodash';
   import LinkButton from './buttons/link-button.svelte';
   import { clickOutside } from '$lib/utils/click-outside';
   import { fly } from 'svelte/transition';
-  import type Icon from 'svelte-material-icons/DotsVertical.svelte';
-  import Check from 'svelte-material-icons/Check.svelte';
   import { createEventDispatcher } from 'svelte';
 
   const dispatch = createEventDispatcher<{
@@ -24,7 +26,7 @@
 
   type RenderedOption = {
     title: string;
-    icon?: typeof Icon;
+    icon?: string;
   };
 
   let showMenu = false;
@@ -61,7 +63,7 @@
   <LinkButton on:click={() => (showMenu = true)}>
     <div class="flex place-items-center gap-2 text-sm">
       {#if renderedSelectedOption?.icon}
-        <svelte:component this={renderedSelectedOption.icon} size="18" />
+        <Icon path={renderedSelectedOption.icon} size="18" />
       {/if}
       <p class="hidden sm:block">{renderedSelectedOption.title}</p>
     </div>
@@ -81,7 +83,7 @@
         >
           {#if _.isEqual(selectedOption, option)}
             <div class="text-immich-primary dark:text-immich-dark-primary">
-              <Check size="18" />
+              <Icon path={mdiCheck} size="18" />
             </div>
             <p class="justify-self-start text-immich-primary dark:text-immich-dark-primary">
               {renderedOption.title}

web/src/lib/components/elements/icon.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { AriaRole } from 'svelte/elements';
+
+  export let size: string | number = '1em';
+  export let color = 'currentColor';
+  export let path: string;
+  export let title = '';
+  export let desc = '';
+  export let flipped = false;
+  let className = '';
+  export { className as class };
+  export let viewBox = '0 0 24 24';
+  export let role: AriaRole = 'img';
+  export let ariaHidden: boolean | undefined = undefined;
+  export let ariaLabel: string | undefined = undefined;
+  export let ariaLabelledby: string | undefined = undefined;
+</script>
+
+<svg
+  width={size}
+  height={size}
+  {viewBox}
+  class="{className} {flipped && '-scale-x-100'}"
+  {role}
+  aria-label={ariaLabel}
+  aria-hidden={ariaHidden}
+  aria-labelledby={ariaLabelledby}
+>
+  {#if title}
+    <title>{title}</title>
+  {/if}
+  {#if desc}
+    <desc>{desc}</desc>
+  {/if}
+  <path d={path} fill={color} />
+</svg>