replace google material icons with phosphor icons

src/lib/Button.svelte

@@ -2,9 +2,11 @@
 	import type { Snippet } from 'svelte';
 	import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
 	import Spinner from './Spinner.svelte';
+	import type { IconComponentProps } from 'phosphor-svelte';
+	import { defaultIconProps, type IconDef } from './util';
 
 	interface Props extends Omit<HTMLButtonAttributes, 'class'> {
-		icon?: string;
+		icon?: IconDef;
 		animate?: boolean;
 		loading?: boolean;
 		class?: ClassValue | null | undefined;
@@ -25,7 +27,13 @@
 		...others
 	}: Props = $props();
 
-	let iconElement = $state<HTMLSpanElement | null>(null);
+	type SVGInHTML = HTMLElement & SVGElement;
+	let iconElement = $state<SVGInHTML | null>(null);
+	$effect(() => {
+		if (icon && ref) {
+			iconElement = ref.querySelector('svg') as SVGInHTML | null;
+		}
+	});
 
 	const handleButtonClick: MouseEventHandler<HTMLButtonElement> = (event) => {
 		if (animate) {
@@ -41,8 +49,11 @@
 	const triggerAnimation = (className: string) => {
 		if (icon && iconElement) {
 			iconElement.classList.remove(className);
-			void iconElement.offsetWidth;
-			iconElement.classList.add(className);
+
+			// make sure we have DOM reflow
+			requestAnimationFrame(() => {
+				iconElement?.classList.add(className);
+			});
 		}
 	};
 
@@ -76,7 +87,7 @@
 	{type}
 	bind:this={ref}
 	class={[
-		'button group relative flex gap-3 overflow-hidden rounded-sm px-5',
+		'button group relative flex items-center gap-3 overflow-hidden rounded-sm px-5',
 		'text-sui-background cursor-pointer py-3 font-medium transition-colors',
 		!loading ? ' bg-sui-primary hover:bg-sui-secondary' : 'bg-sui-primary/50 cursor-not-allowed ',
 		classValue
@@ -87,7 +98,7 @@
 	{@render children()}
 
 	{#if icon && !loading}
-		<span class="material-symbols-outlined" bind:this={iconElement}>{icon}</span>
+		<icon.component {...icon.props || defaultIconProps} />
 	{/if}
 
 	{#if loading}
@@ -140,12 +151,12 @@
 		}
 	}
 
-	:global(button span.animate) {
+	:global(button svg.animate) {
 		animation-name: loop;
 		animation-duration: 0.5s;
 	}
 
-	:global(button span.bounce) {
+	:global(button svg.bounce) {
 		animation-name: bounce;
 		animation-duration: 180ms;
 		animation-timing-function: ease-in-out;