Add iconify and replace offline icons

frontend/package-lock.json

@@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"@codemirror/lang-python": "^6.2.1",
+				"@iconify/svelte": "^5.0.2",
 				"codemirror": "^6.0.2",
 				"monaco-editor": "^0.54.0",
 				"svelte-codemirror-editor": "^2.1.0"
@@ -803,6 +804,27 @@
 				"url": "https://github.com/sponsors/nzakas"
 			}
 		},
+		"node_modules/@iconify/svelte": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-5.0.2.tgz",
+			"integrity": "sha512-1iWUT+1veS/QOAzKDG0NPgBtJYGoJqEPwF97voTm8jw6PQ6yU0hL73lEwFoTGMrZmatLvh9cjRBmeSHHaltmrg==",
+			"license": "MIT",
+			"dependencies": {
+				"@iconify/types": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/cyberalien"
+			},
+			"peerDependencies": {
+				"svelte": ">4.0.0"
+			}
+		},
+		"node_modules/@iconify/types": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+			"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+			"license": "MIT"
+		},
 		"node_modules/@isaacs/fs-minipass": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",

frontend/package.json

@@ -38,6 +38,7 @@
 	},
 	"dependencies": {
 		"@codemirror/lang-python": "^6.2.1",
+		"@iconify/svelte": "^5.0.2",
 		"codemirror": "^6.0.2",
 		"monaco-editor": "^0.54.0",
 		"svelte-codemirror-editor": "^2.1.0"

frontend/src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '../app.css';
+	import Icon from '@iconify/svelte';
 	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
 	import { checkHealth } from '$lib/api';
@@ -64,14 +65,19 @@
 
 <div class="fixed bottom-4 left-4 group">
 	{#if $healthStatus === 'healthy'}
-		<span class="text-green-500">✅</span>
+		<Icon
+			icon="material-symbols:check-circle-rounded"
+			width="24"
+			height="24"
+			class="text-green-400"
+		/>
 		<div
 			class="absolute bottom-full left-1/2 hidden group-hover:flex group-hover:w-max bg-green-500 text-white px-2 py-1 rounded shadow-lg"
 		>
 			Connected to backend
 		</div>
 	{:else}
-		<span class="text-red-500">✘</span>
+		<Icon icon="ix:disconnected-circle-filled" width="24" height="24" class="text-red-400" />
 		<div
 			class="absolute bottom-full left-1/2 hidden group-hover:flex group-hover:w-max bg-red-500 text-white px-2 py-1 rounded shadow-lg"
 		>