replace google material icons with phosphor icons

src/routes/+page.svelte

@@ -21,6 +21,7 @@
 	import {
 		ArrowUUpLeft,
 		ArrowUUpRight,
+		Plus,
 		TextB,
 		TextItalic,
 		TextStrikethrough,
@@ -51,12 +52,14 @@
 <div class="component">
 	<p class="title">Button, Frameless Button, & Link</p>
 	<div class="flex gap-4">
-		<Button icon="add" loading={false} onclick={() => alert('Button clicked!')}>Click Me</Button>
-		<Button icon="add" loading={true} onclick={() => alert('Button clicked!')}
+		<Button icon={{ component: Plus }} loading={false} onclick={() => alert('Button clicked!')}
+			>Click Me</Button
+		>
+		<Button icon={{ component: Plus }} loading={true} onclick={() => alert('Button clicked!')}
 			>Loading Button</Button
 		>
 
-		<FramelessButton icon="add">Click Me</FramelessButton>
+		<FramelessButton icon={{ component: Plus }}>Click Me</FramelessButton>
 
 		<Link href="https://svelte.dev">Visit Svelte</Link>
 
@@ -136,7 +139,7 @@
 		<DateInput bind:value={dateInputValue} />
 		<div class="shrink-0">
 			<Button
-				icon="add"
+				icon={{ component: Plus }}
 				onclick={() => {
 					dateInputValue = new Date();
 					console.log('Dateinput value set to:', dateInputValue);