Add support for SVG icons in FontIcon component and update connection icon logic

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}

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,6 +358,19 @@
   };
 </script>
 
+{#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}
@@ -366,8 +380,18 @@
     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;
   }