From 69b1fb1bfda510b9d471ae939180171d19b8a4bc Mon Sep 17 00:00:00 2001
From: Stela Augustinova <augustinovast@gmail.com>
Date: Wed, 17 Dec 2025 16:15:35 +0100
Subject: [PATCH] Add support for SVG icons in FontIcon component and update
 connection icon logic

---
 .../web/src/appobj/ConnectionAppObject.svelte |  3 +-
 packages/web/src/icons/FontIcon.svelte        | 42 +++++++++++++++----
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/packages/web/src/appobj/ConnectionAppObject.svelte b/packages/web/src/appobj/ConnectionAppObject.svelte
index afdaa91e5..0c3d848c8 100644
--- a/packages/web/src/appobj/ConnectionAppObject.svelte
+++ b/packages/web/src/appobj/ConnectionAppObject.svelte
@@ -431,13 +431,14 @@
   }
 
   $: apps = useAllApps();
+  $: driver = $extensions.drivers.find(x => x.engine == data.engine);
 </script>
 
 <AppObjectCore
   {...$$restProps}
   {data}
   title={getConnectionLabel(data, { showUnsaved: true })}
-  icon={data._id.startsWith('cloud://') ? 'img cloud-connection' : data.singleDatabase ? 'img database' : 'img server'}
+  icon={driver?.icon || (data._id.startsWith('cloud://') ? 'img cloud-connection' : data.singleDatabase ? 'img database' : 'img server')}
   isBold={data.singleDatabase
     ? $currentDatabase?.connection?._id == data._id && $currentDatabase?.name == data.defaultDatabase
     : $currentDatabase?.connection?._id == data._id}
diff --git a/packages/web/src/icons/FontIcon.svelte b/packages/web/src/icons/FontIcon.svelte
index 743461e0e..c60ab2703 100644
--- a/packages/web/src/icons/FontIcon.svelte
+++ b/packages/web/src/icons/FontIcon.svelte
@@ -32,6 +32,7 @@
   export let padRight = false;
   export let style = null;
   export let colorClass = null;
+  $: isSvgString = icon && icon.trim().startsWith('<svg');
 
   const iconNames = {
     'icon minus-box': 'mdi mdi-minus-box-outline',
@@ -357,17 +358,40 @@
   };
 </script>
 
-<span
-  class={`${iconNames[icon] || icon} ${colorClass || ''}`}
-  {title}
-  class:padLeft
-  class:padRight
-  {style}
-  on:click
-  data-testid={$$props['data-testid']}
-/>
+{#if isSvgString}
+  <span
+    class="svg-inline"
+    class:padLeft
+    class:padRight
+    {title}
+    {style}
+    on:click
+    data-testid={$$props['data-testid']}
+  >
+    {@html icon}
+  </span>
+{:else}
+  <span
+    class={`${iconNames[icon] || icon} ${colorClass || ''}`}
+    {title}
+    class:padLeft
+    class:padRight
+    {style}
+    on:click
+    data-testid={$$props['data-testid']}
+  />
+{/if}
 
 <style>
+  .svg-inline {
+    display: inline-block;
+    line-height: 1;
+  }
+  .svg-inline :global(svg) {
+    width: 1.125em;
+    height: 1.125em;
+    vertical-align: middle;
+  }
   .padLeft {
     margin-left: 0.25rem;
   }