Dropdown can now receive list of icons to display with selected option

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import SwapVertical from 'svelte-material-icons/SwapVertical.svelte';
   import Check from 'svelte-material-icons/Check.svelte';
   import LinkButton from './buttons/link-button.svelte';
   import { clickOutside } from '$lib/utils/click-outside';
@@ -7,6 +6,7 @@
 
   export let options: string[] = [];
   export let value = options[0];
+  export let icons: any[] = undefined;
 
   let showMenu = false;
 
@@ -18,13 +18,18 @@
     value = options[index];
     showMenu = false;
   };
+
+  $: index = options.findIndex(option => option === value)
+  $: icon = icons?.[index]
 </script>
 
 <div id="dropdown-button" use:clickOutside on:outclick={handleClickOutside}>
   <!-- BUTTON TITLE -->
   <LinkButton on:click={() => (showMenu = true)}>
     <div class="flex place-items-center gap-2 text-sm">
-      <SwapVertical size="18" />
+      {#if icon}
+        <svelte:component this={icon} size="18" />
+      {/if}
       {value}
     </div>
   </LinkButton>

web/src/routes/(user)/albums/+page.svelte

@@ -5,6 +5,9 @@
   import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+  import SwapVertical from 'svelte-material-icons/SwapVertical.svelte';
+  import FormatListBulletedSquare from 'svelte-material-icons/FormatListBulletedSquare.svelte';
+  import ViewGridOutline from 'svelte-material-icons/ViewGridOutline.svelte';
   import type { PageData } from './$types';
   import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
   import { useAlbums } from './albums.bloc';