replace google material icons with phosphor icons

src/lib/StateMachine.svelte

@@ -13,7 +13,7 @@
 			| false
 			| {
 					text: string;
-					icon: string;
+					icon: IconDef;
 					onclick?: MouseEventHandler<HTMLButtonElement>;
 			  };
 
@@ -40,6 +40,8 @@
 	import { tweened } from 'svelte/motion';
 	import { fade, fly } from 'svelte/transition';
 	import { validateForm } from '@svelte-toolkit/validate';
+	import { ArrowLeft, Check } from 'phosphor-svelte';
+	import type { IconDef } from './util';
 
 	let {
 		pages,
@@ -321,7 +323,7 @@
 			{#if i >= index}
 				<span class="mb-[0.0625rem]">{i + 1}</span>
 			{:else}
-				<span class="material-symbols-outlined mt-0.5 text-2xl">check_small</span>
+				<Check class="mt-0.5" size="1.5rem" weight="bold" />
 			{/if}
 		</div>
 	{/each}
@@ -339,7 +341,7 @@
 			onclick={() => (index -= 1)}
 			transition:fly={{ x: -200, duration: 200 }}
 		>
-			<span class="material-symbols-outlined text-base">arrow_back</span>
+			<ArrowLeft />
 			Back
 		</button>
 	{/if}