feat: Use icon library instead of SVGs (#271)

src/lib/components/Button.svelte

@@ -1,23 +1,16 @@
 <script lang="ts">
 	export let type: 'filled' | 'tonal' | 'text' | 'outlined';
-	export let icon = '';
-	export let href = '';
-	export let target = '';
-	export let label = '';
+	export let href: string = '';
+	export let target: string = '';
+	export let label: string = '';
 </script>
 
 {#if href}
 	<a {href} {target} class={`button-${type}`} aria-label={label}>
-		{#if icon}
-			<img src="../icons/{icon}.svg" alt={icon} />
-		{/if}
 		<slot />
 	</a>
 {:else}
 	<button on:click class={`button-${type}`} aria-label={label}>
-		{#if icon}
-			<img src="../icons/{icon}.svg" alt={icon} />
-		{/if}
 		<slot />
 	</button>
 {/if}
@@ -74,8 +67,4 @@
 	a:hover {
 		filter: brightness(85%);
 	}
-
-	img {
-		height: 20px;
-	}
 </style>

src/lib/components/Dialogue.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { quadInOut } from 'svelte/easing';
+
+	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+
 	export let modalOpen = false;
 	export let fullscreen = false;
 	export let notDismissible = false;
@@ -39,7 +42,7 @@
 			<div class="title" class:hasIcon={$$slots.icon}>
 				{#if fullscreen}
 					<button id="back-button" on:click={() => (modalOpen = !modalOpen)}>
-						<img src="../icons/back.svg" id="back" alt="back" />
+						<ArrowLeft size="24px" color="var(--surface-six)" />
 					</button>
 				{/if}
 				{#if $$slots.icon}
@@ -145,10 +148,6 @@
 		align-items: center;
 	}
 
-	#back {
-		height: 24px;
-	}
-
 	.fullscreen {
 		padding: 0;
 		max-height: 100%;

src/lib/components/FilterChip.svelte

@@ -1,4 +1,7 @@
 <script>
+	import Check from 'svelte-material-icons/Check.svelte';
+	import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
+
 	export let dropdown = false;
 	export let check = false;
 	export let selected = false;
@@ -6,11 +9,11 @@
 
 <button class:selected on:click>
 	{#if check}
-		<img id="check" src="/icons/check.svg" alt="selected" />
+		<Check size="18px" color="var(--surface-six)" />
 	{/if}
 	<slot />
 	{#if dropdown}
-		<img id="dropdown" src="/icons/expand_more.svg" alt="dropdown" />
+		<ChevronDown size="18px" color="var(--surface-six)" />
 	{/if}
 </button>
 
@@ -36,10 +39,6 @@
 		color: var(--primary);
 	}
 
-	img {
-		height: 18px;
-	}
-
 	#dropdown {
 		margin-right: -6px;
 	}

src/lib/components/Search.svelte

@@ -4,6 +4,9 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 
+	import Close from 'svelte-material-icons/Close.svelte';
+	import Magnify from 'svelte-material-icons/Magnify.svelte';
+
 	export let title: string;
 	export let searchTerm: string | null;
 	export let displayedTerm: string | undefined;
@@ -19,16 +22,18 @@
 </script>
 
 <div class="search-container">
-	<img src="../icons/search.svg" id="search" alt="Search" />
+	<div id="search">
+		<Magnify size="24px" color="var(--surface-six)" />
+	</div>
 	{#if searchTerm}
-		<img
-			src="../icons/close.svg"
+		<div
 			id="clear"
-			alt="Clear"
 			on:click={clear}
 			on:keypress={clear}
 			transition:fade={{ easing: quintOut, duration: 250 }}
-		/>
+		>
+			<Close size="24px" color="var(--surface-six)" />
+		</div>
 	{/if}
 	<input
 		type="text"