Add iconify and replace offline icons

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"
 		>