From 2877f7709ad17e1aef5e0f5fb104635babc6fb6e Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Tue, 28 Oct 2025 18:34:42 +0000
Subject: [PATCH] fix issues with icon coloring in chrome by switching to img
 tags

---
 web/css/form.css                    |  2 +-
 web/css/style.css                   |  4 ++
 web/html/index.html                 |  4 +-
 web/images/common/blank.svg         |  1 +
 web/scripts/config.js               | 16 ++++----
 web/scripts/dialog.js               | 14 +++----
 web/scripts/index.js                | 48 ++++++++++++----------
 web/scripts/utils.js                | 13 ++----
 web/templates/backups.go.tmpl       |  8 ++--
 web/templates/config.go.tmpl        | 64 ++++++++++++++---------------
 web/templates/instance-card.go.tmpl | 49 +++++++++++-----------
 11 files changed, 115 insertions(+), 108 deletions(-)
 create mode 100644 web/images/common/blank.svg

diff --git a/web/css/form.css b/web/css/form.css
index 0e80897..5828005 100644
--- a/web/css/form.css
+++ b/web/css/form.css
@@ -16,7 +16,7 @@
 	padding: 8px;
 }
 
-.input-grid svg {
+.input-grid img {
 	padding: 0;
 }
 
diff --git a/web/css/style.css b/web/css/style.css
index e013dd7..e0d91a4 100644
--- a/web/css/style.css
+++ b/web/css/style.css
@@ -100,6 +100,10 @@ img, svg {
 	color: var(--main-text-color)
 }
 
+a img {
+	vertical-align: unset;
+}
+
 hr {
 	border-color: var(--main-text-color);
 }
diff --git a/web/html/index.html b/web/html/index.html
index 7eb307e..8e1d383 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -74,13 +74,13 @@
 				<div class="w3-card w3-padding">
 					<div class="flex row nowrap" style="margin-top: 1em; justify-content: space-between;">
 						<form id="vm-search" role="search" class="flex row nowrap" tabindex="0">
-							<svg role="img" aria-label="Search Instances"><use href="images/common/search.svg#symb"></use></svg>
+							<img alt="Search Instances" aria-label="Search Instances" src="images/common/search.svg#symb">
 							<input type="search" id="search" class="w3-input w3-border" style="height: 1lh; max-width: fit-content;" aria-label="search instances by name">
 						</form>
 						<!--Add Instance Button & Dialog Template-->
 						<button type="button" id="instance-add" class="w3-button" aria-label="create new instance">
 							<span class="large" style="margin: 0;">Create Instance</span>
-							<svg class="small" style="height: 1lh; width: 1lh;" role="img" aria-label="Create New Instance"><use href="images/actions/instance/add.svg#symb"></use></svg>
+							<img class="small" style="height: 1lh; width: 1lh;" alt="Create Instance" aria-label="Create Instance" src="images/actions/instance/add.svg#symb">
 						</button>
 						<template id="create-instance-dialog">
 							<dialog class="w3-container w3-card w3-border-0">
diff --git a/web/images/common/blank.svg b/web/images/common/blank.svg
new file mode 100644
index 0000000..0a81379
--- /dev/null
+++ b/web/images/common/blank.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="cpu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>
\ No newline at end of file
diff --git a/web/scripts/config.js b/web/scripts/config.js
index 9072265..53be948 100644
--- a/web/scripts/config.js
+++ b/web/scripts/config.js
@@ -1,4 +1,4 @@
-import { requestPVE, requestAPI, goToPage, getURIData, setAppearance, setSVGSrc, requestDash } from "./utils.js";
+import { requestPVE, requestAPI, goToPage, getURIData, setAppearance, setIconSrc, requestDash } from "./utils.js";
 import { alert, dialog } from "./dialog.js";
 
 window.addEventListener("DOMContentLoaded", init);
@@ -48,8 +48,8 @@ class VolumeAction extends HTMLElement {
 	}
 
 	async setStatusLoading () {
-		const svg = document.querySelector(`svg[data-volume="${this.dataset.volume}"]`);
-		setSVGSrc(svg, "images/status/loading.svg");
+		const icon = document.querySelector(`img[data-volume="${this.dataset.volume}"]`);
+		setIconSrc(icon, "images/status/loading.svg");
 	}
 
 	async handleDiskDetach () {
@@ -247,8 +247,8 @@ class NetworkAction extends HTMLElement {
 	}
 
 	async setStatusLoading () {
-		const svg = document.querySelector(`svg[data-network="${this.dataset.network}"]`);
-		setSVGSrc(svg, "images/status/loading.svg");
+		const icon = document.querySelector(`img[data-network="${this.dataset.network}"]`);
+		setIconSrc(icon, "images/status/loading.svg");
 	}
 
 	async handleNetworkConfig () {
@@ -277,7 +277,7 @@ class NetworkAction extends HTMLElement {
 		const netID = this.dataset.network;
 		dialog(this.template, async (result, form) => {
 			if (result === "confirm") {
-				setSVGSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
+				setIconSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
 				const net = `${netID}`;
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/delete`, "DELETE");
 				if (result.status !== 200) {
@@ -349,8 +349,8 @@ class DeviceAction extends HTMLElement {
 	}
 
 	async setStatusLoading () {
-		const svg = document.querySelector(`svg[data-device="${this.dataset.device}"]`);
-		setSVGSrc(svg, "images/status/loading.svg");
+		const icon = document.querySelector(`img[data-device="${this.dataset.device}"]`);
+		setIconSrc(icon, "images/status/loading.svg");
 	}
 
 	async handleDeviceConfig () {
diff --git a/web/scripts/dialog.js b/web/scripts/dialog.js
index a9048bf..5209059 100644
--- a/web/scripts/dialog.js
+++ b/web/scripts/dialog.js
@@ -103,7 +103,7 @@ class ErrorDialog extends HTMLElement {
 			</dialog>
 		`;
 		this.dialog = this.shadowRoot.querySelector("dialog");
-		this.errors = this.shadowRoot.querySelector("#errors")
+		this.errors = this.shadowRoot.querySelector("#errors");
 
 		for (const control of this.shadowRoot.querySelector("#controls").childNodes) {
 			control.addEventListener("click", async (e) => {
@@ -111,15 +111,15 @@ class ErrorDialog extends HTMLElement {
 				this.dialog.close(e.target.value);
 			});
 		}
-		
+
 		this.dialog.addEventListener("close", () => {
-			if (this.dialog.returnValue == "ok") {}
-			else if (this.dialog.returnValue == "copy") {
-				let errors = ""
+			if (this.dialog.returnValue === "ok") {}
+			else if (this.dialog.returnValue === "copy") {
+				let errors = "";
 				for (const error of this.errors.childNodes) {
-					errors += `${error.innerText}\n`
+					errors += `${error.innerText}\n`;
 				}
-				navigator.clipboard.writeText(errors)
+				navigator.clipboard.writeText(errors);
 			}
 			this.parentElement.removeChild(this);
 		});
diff --git a/web/scripts/index.js b/web/scripts/index.js
index 2685365..0de2e33 100644
--- a/web/scripts/index.js
+++ b/web/scripts/index.js
@@ -1,5 +1,5 @@
-import { requestPVE, requestAPI, setAppearance, getSearchSettings, requestDash, setSVGSrc, setSVGAlt } from "./utils.js";
-import { alert, dialog } from "./dialog.js";
+import { requestPVE, requestAPI, setAppearance, getSearchSettings, requestDash, setIconSrc, setIconAlt } from "./utils.js";
+import { alert, dialog, error } from "./dialog.js";
 import { setupClientSync } from "./clientsync.js";
 import wfaInit from "../modules/wfa.js";
 
@@ -120,25 +120,29 @@ class InstanceCard extends HTMLElement {
 		}
 
 		const powerButton = this.shadowRoot.querySelector("#power-btn");
-		if (powerButton.classList.contains("clickable")) {
-			powerButton.onclick = this.handlePowerButton.bind(this);
-			powerButton.onkeydown = (event) => {
-				if (event.key === "Enter") {
-					event.preventDefault();
-					this.handlePowerButton();
-				}
-			};
+		if (powerButton !== null) {
+			if (powerButton.classList.contains("clickable")) {
+				powerButton.onclick = this.handlePowerButton.bind(this);
+				powerButton.onkeydown = (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						this.handlePowerButton();
+					}
+				};
+			}
 		}
 
 		const deleteButton = this.shadowRoot.querySelector("#delete-btn");
-		if (deleteButton.classList.contains("clickable")) {
-			deleteButton.onclick = this.handleDeleteButton.bind(this);
-			deleteButton.onkeydown = (event) => {
-				if (event.key === "Enter") {
-					event.preventDefault();
-					this.handleDeleteButton();
-				}
-			};
+		if (deleteButton !== null) {
+			if (deleteButton.classList.contains("clickable")) {
+				deleteButton.onclick = this.handleDeleteButton.bind(this);
+				deleteButton.onkeydown = (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						this.handleDeleteButton();
+					}
+				};
+			}
 		}
 	}
 
@@ -146,10 +150,10 @@ class InstanceCard extends HTMLElement {
 		this.status = "loading";
 		const statusicon = this.shadowRoot.querySelector("#status");
 		const powerbtn = this.shadowRoot.querySelector("#power-btn");
-		setSVGSrc(statusicon, "images/status/loading.svg");
-		setSVGAlt(statusicon, "instance is loading");
-		setSVGSrc(powerbtn, "images/status/loading.svg");
-		setSVGAlt(powerbtn, "");
+		setIconSrc(statusicon, "images/status/loading.svg");
+		setIconAlt(statusicon, "instance is loading");
+		setIconSrc(powerbtn, "images/status/loading.svg");
+		setIconAlt(powerbtn, "");
 	}
 
 	async handlePowerButton () {
diff --git a/web/scripts/utils.js b/web/scripts/utils.js
index 05af804..41b102c 100644
--- a/web/scripts/utils.js
+++ b/web/scripts/utils.js
@@ -192,15 +192,10 @@ export function setAppearance () {
 }
 
 // assumes href is path to svg, and id to grab is #symb
-export function setSVGSrc (svgElem, href) {
-	let useElem = svgElem.querySelector("use");
-	if (!useElem) {
-		useElem = document.createElementNS("http://www.w3.org/2000/svg", "use");
-	}
-	useElem.setAttribute("href", `${href}#symb`);
-	svgElem.append(useElem);
+export function setIconSrc (icon, path) {
+	icon.setAttribute("src", path);
 }
 
-export function setSVGAlt (svgElem, alt) {
-	svgElem.setAttribute("aria-label", alt);
+export function setIconAlt (icon, alt) {
+	icon.setAttribute("alt", alt);
 }
diff --git a/web/templates/backups.go.tmpl b/web/templates/backups.go.tmpl
index 7a1ec96..bd2a3ce 100644
--- a/web/templates/backups.go.tmpl
+++ b/web/templates/backups.go.tmpl
@@ -23,9 +23,9 @@
 			<p class="w3-col l6 m6 hide-small">{{.Notes}}</p>
 			<p class="w3-col l2 hide-medium">{{.SizeFormatted}}</p>
 			<div class="w3-col l2 m2 s4 flex row nowrap" style="height: 1lh;">
-				<svg id="edit-btn" class="clickable" aria-label="change notes"><use href="images/actions/backups/config.svg#symb"></svg>
-				<svg id="delete-btn" class="clickable" aria-label="delete backup" role="button" tabindex=0><use href="images/actions/backups/delete-active.svg#symb"></svg>
-				<svg id="restore-btn" class="clickable" aria-label="restore from backup" role="button" tabindex=0><use href="images/actions/backups/restore.svg#symb"></svg>
+				<img id="edit-btn" class="clickable" aria-label="change notes" src="images/actions/backups/config.svg#symb">
+				<img id="delete-btn" class="clickable" aria-label="delete backup" role="button" tabindex=0 src="images/actions/backups/delete-active.svg#symb">
+				<img id="restore-btn" class="clickable" aria-label="restore from backup" role="button" tabindex=0 src="images/actions/backups/restore.svg#symb">
 			</div>
 		</div>
 		<template id="edit-dialog">
@@ -100,7 +100,7 @@
 {{define "backups-add-backup"}}
 <button type="button" id="backup-add" class="w3-button" aria-label="Create Backup">
 	<span class="large" style="margin: 0;">Create Backup</span>
-	<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Create Backup"><use href="images/actions/network/add.svg#symb"></use></svg>
+	<img class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Create Backup" src="images/actions/network/add.svg#symb">
 </button>
 <template id="create-backup-dialog">
 	<link rel="stylesheet" href="modules/w3.css">
diff --git a/web/templates/config.go.tmpl b/web/templates/config.go.tmpl
index 47b67a7..d6706db 100644
--- a/web/templates/config.go.tmpl
+++ b/web/templates/config.go.tmpl
@@ -1,26 +1,26 @@
 {{define "proctype-input"}}
-<svg aria-label="CPU Type"><use href="images/resources/cpu.svg#symb"></svg>
+<img aria-label="CPU Type" src="images/resources/cpu.svg#symb">
 <label for="proctype">CPU Type</label>
 {{template "select" .}}
 <div></div>
 {{end}}
 
 {{define "cores-input"}}
-<svg aria-label="CPU Amount"><use href="images/resources/cpu.svg#symb"></svg>
+<img aria-label="CPU Amount" src="images/resources/cpu.svg#symb">
 <label for="cores">CPU Amount</label>
 <input id="cores" name="cores" class="w3-input w3-border" type="number" required value="{{.}}">
 <p>Cores</p>
 {{end}}
 
 {{define "memory-input"}}
-<svg aria-label="Memory Amount"><use href="images/resources/ram.svg#symb"></svg>
+<img aria-label="Memory Amount" src="images/resources/ram.svg#symb">
 <label for="ram">Memory</label>
 <input id="ram" name="ram" class="w3-input w3-border" type="number" required value="{{.}}">
 <p>MiB</p>
 {{end}}
 
 {{define "swap-input"}}
-<svg aria-label="Swap Amount"><use href="images/resources/swap.svg#symb"></svg>
+<img aria-label="Swap Amount" src="images/resources/swap.svg#symb">
 <label for="swap">Swap</label>
 <input id="swap" name="swap" class="w3-input w3-border" type="number" required value="{{.}}">
 <p>MiB</p>
@@ -46,7 +46,7 @@
 {{define "volumes-add-disk"}}
 <button type="button" id="disk-add" class="w3-button" aria-label="Add New Disk">
 	<span class="large" style="margin: 0;">Add Disk</span>
-	<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Disk"><use href="images/actions/disk/add-disk.svg#symb"></use></svg>
+	<img class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Disk" src="images/actions/disk/add-disk.svg#symb">
 </button>
 <template id="add-disk-dialog">
 	<dialog class="w3-container w3-card w3-border-0">
@@ -75,7 +75,7 @@
 {{define "volumes-add-cd"}}
 <button type="button" id="cd-add" class="w3-button" aria-label="Add New CD">
 	<span class="large" style="margin: 0;">Mount CD</span>
-	<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New CDROM"><use href="images/actions/disk/add-cd.svg#symb"></use></svg>
+	<img class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New CDROM" src="images/actions/disk/add-cd.svg#symb">
 </button>
 <template id="add-cd-dialog">
 	<dialog class="w3-container w3-card w3-border-0">
@@ -97,7 +97,7 @@
 {{end}}
 
 {{define "volume-rootfs"}}
-<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
+<img data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive" src="images/resources/drive.svg#symb">
 <p>{{.Name}}</p>
 <p>{{.Volume.File}}</p>
 <div>
@@ -109,7 +109,7 @@
 {{end}}
 
 {{define "volume-mp"}}
-<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
+<img data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive" src="images/resources/drive.svg#symb">
 <p>{{.Name}}</p>
 <p>{{.Volume.File}}</p>
 <div>
@@ -121,7 +121,7 @@
 {{end}}
 
 {{define "volume-ide"}}
-<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
+<img data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive" src="images/resources/drive.svg#symb">
 <p>{{.Name}}</p>
 <p>{{.Volume.File}}</p>
 <div>
@@ -133,7 +133,7 @@
 {{end}}
 
 {{define "volume-scsi"}}
-<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
+<img data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive" src="images/resources/drive.svg#symb">
 <p>{{.Name}}</p>
 <p>{{.Volume.File}}</p>
 <div>
@@ -145,7 +145,7 @@
 {{end}}
 
 {{define "volume-unused"}}
-<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
+<img data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive" src="images/resources/drive.svg#symb">
 <p>{{.Name}}</p>
 <p>{{.Volume.File}}</p>
 <div>
@@ -160,7 +160,7 @@
 <volume-action data-type="move" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg class="clickable" aria-label="Move {{.Name}}"><use href="images/actions/disk/move-active.svg#symb"></svg>
+		<img class="clickable" aria-label="Move {{.Name}}" src="images/actions/disk/move-active.svg#symb">
 		<template id="dialog-template">
 			<dialog class="w3-container w3-card w3-border-0">
 				<p class="w3-large" id="prompt" style="text-align: center;">
@@ -186,7 +186,7 @@
 <volume-action data-type="none" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg aria-label=""><use href="images/actions/disk/move-inactive.svg#symb"></svg>
+		<img aria-label="" src="images/actions/disk/move-inactive.svg#symb">
 	</template>
 </volume-action>
 {{end}}
@@ -195,7 +195,7 @@
 <volume-action data-type="resize" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg class="clickable" aria-label="Resize {{.Name}}"><use href="images/actions/disk/resize-active.svg#symb"></svg>
+		<img class="clickable" aria-label="Resize {{.Name}}" src="images/actions/disk/resize-active.svg#symb">
 		<template id="dialog-template">
 			<dialog class="w3-container w3-card w3-border-0">
 				<p class="w3-large" id="prompt" style="text-align: center;">
@@ -221,7 +221,7 @@
 <volume-action data-type="none" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg aria-label=""><use href="images/actions/disk/resize-inactive.svg#symb"></svg>
+		<img aria-label="" src="images/actions/disk/resize-inactive.svg#symb">
 	</template>
 </volume-action>
 {{end}}
@@ -230,7 +230,7 @@
 <volume-action data-type="delete" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg class="clickable" aria-label="Delete {{.Name}}"><use href="images/actions/disk/delete-active.svg#symb"></svg>
+		<img class="clickable" aria-label="Delete {{.Name}}" src="images/actions/disk/delete-active.svg#symb">
 		<template id="dialog-template">
 			<dialog class="w3-container w3-card w3-border-0">
 				<p class="w3-large" id="prompt" style="text-align: center;">
@@ -255,7 +255,7 @@
 <volume-action data-type="none" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg aria-label=""><use href="images/actions/disk/delete-inactive.svg#symb"></svg>
+		<img aria-label="" src="images/actions/disk/delete-inactive.svg#symb">
 	</template>
 </volume-action>
 {{end}}
@@ -264,7 +264,7 @@
 <volume-action data-type="attach" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg class="clickable" aria-label="Attach {{.Name}}"><use href="images/actions/disk/attach.svg#symb"></svg>
+		<img class="clickable" aria-label="Attach {{.Name}}" src="images/actions/disk/attach.svg#symb">
 		<template id="dialog-template">
 			<dialog class="w3-container w3-card w3-border-0">
 				<p class="w3-large" id="prompt" style="text-align: center;">
@@ -297,7 +297,7 @@
 <volume-action data-type="detach" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg class="clickable" aria-label="Detach {{.Name}}"><use href="images/actions/disk/detach.svg#symb"></svg>
+		<img class="clickable" aria-label="Detach {{.Name}}" src="images/actions/disk/detach.svg#symb">
 		<template id="dialog-template">
 			<dialog class="w3-container w3-card w3-border-0">
 				<p class="w3-large" id="prompt" style="text-align: center;">
@@ -322,7 +322,7 @@
 <volume-action data-type="none">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg aria-label=""></svg>
+		<img aria-label="" src="images/common/blank.svg">
 	</template>
 </volume-action>
 {{end}}
@@ -336,7 +336,7 @@
 {{define "nets-add-net"}}
 <button type="button" id="network-add" class="w3-button" aria-label="Add New Network Interface">
 	<span class="large" style="margin: 0;">Add Network</span>
-	<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Network Interface"><use href="images/actions/network/add.svg#symb"></use></svg>
+	<img class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Network Interface" src="images/actions/network/add.svg#symb">
 </button>
 <template id="add-net-dialog">
 	<dialog class="w3-container w3-card w3-border-0">
@@ -361,14 +361,14 @@
 {{end}}
 
 {{define "net"}}
-<svg data-network="{{.Net_ID}}" aria-label="Net {{.Net_ID}}"><use href="images/resources/network.svg#symb"></svg>
+<img data-network="{{.Net_ID}}" aria-label="Net {{.Net_ID}}" src="images/resources/network.svg#symb">
 <p>{{.Net_ID}}</p>
 <p>{{.Value}}</p>
 <div>
 	<network-action data-type="config" data-network="{{.Net_ID}}" data-value="{{.Value}}">
 		<template shadowrootmode="open">
 			<link rel="stylesheet" href="css/style.css">
-			<svg class="clickable" aria-label="Configure Net {{.Net_ID}}"><use href="images/actions/network/config.svg#symb"></svg>
+			<img class="clickable" aria-label="Configure Net {{.Net_ID}}" src="images/actions/network/config.svg#symb">
 			<template id="dialog-template">
 				<dialog class="w3-container w3-card w3-border-0">
 					<p class="w3-large" id="prompt" style="text-align: center;">
@@ -390,7 +390,7 @@
 	<network-action data-type="delete" data-network="{{.Net_ID}}" data-value="{{.Value}}">
 		<template shadowrootmode="open">
 			<link rel="stylesheet" href="css/style.css">
-			<svg class="clickable" aria-label="Delete Net {{.Net_ID}}"><use href="images/actions/network/delete-active.svg#symb"></svg>
+			<img class="clickable" aria-label="Delete Net {{.Net_ID}}" src="images/actions/network/delete-active.svg#symb">
 			<template id="dialog-template">
 				<dialog class="w3-container w3-card w3-border-0">
 					<p class="w3-large" id="prompt" style="text-align: center;">
@@ -421,7 +421,7 @@
 {{define "devices-add-device"}}
 <button type="button" id="device-add" class="w3-button" aria-label="Add New PCIe Device">
 	<span class="large" style="margin: 0;">Add Device</span>
-	<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New PCIe Device"><use href="images/actions/device/add.svg#symb"></use></svg>
+	<img class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New PCIe Device" src="images/actions/device/add.svg#symb">
 </button>
 <template id="add-device-dialog">
 	<dialog class="w3-container w3-card w3-border-0">
@@ -444,14 +444,14 @@
 {{end}}
 
 {{define "device"}}
-<svg data-device="{{.Device_ID}}" aria-label="Device {{.Device_ID}}"><use href="images/resources/device.svg#symb"></svg>
+<img data-device="{{.Device_ID}}" aria-label="Device {{.Device_ID}}" src="images/resources/device.svg#symb">
 <p>{{.Device_ID}}</p>
 <p>{{.Device_Name}}</p>
 <div>
 	<device-action data-type="config" data-device="{{.Device_ID}}" data-value="{{.Value}}">
 		<template shadowrootmode="open">
 			<link rel="stylesheet" href="css/style.css">
-			<svg class="clickable" aria-label="Configure Device {{.Device_ID}}"><use href="images/actions/device/config.svg#symb"></svg>
+			<img class="clickable" aria-label="Configure Device {{.Device_ID}}" src="images/actions/device/config.svg#symb">
 			<template id="dialog-template">
 				<dialog class="w3-container w3-card w3-border-0">
 					<p class="w3-large" id="prompt" style="text-align: center;">
@@ -473,7 +473,7 @@
 	<device-action data-type="delete" data-device="{{.Device_ID}}" data-value="{{.Value}}">
 		<template shadowrootmode="open">
 			<link rel="stylesheet" href="css/style.css">
-			<svg class="clickable" aria-label="Delete Device {{.Device_ID}}"><use href="images/actions/device/delete-active.svg#symb"></svg>
+			<img class="clickable" aria-label="Delete Device {{.Device_ID}}" src="images/actions/device/delete-active.svg#symb">
 			<template id="dialog-template">
 				<dialog class="w3-container w3-card w3-border-0">
 					<p class="w3-large" id="prompt" style="text-align: center;">
@@ -537,15 +537,15 @@
 {{define "boot-target"}}
 {{if .volume_id}}
 <div class="draggable-item" data-value="{{.volume_id}}" style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 10px; align-items: center;">
-	<svg aria-label="Drag"><use href="images/actions/drag.svg#symb"></use></svg>
-	<svg aria-label="Volume"><use href="images/resources/drive.svg#symb"></use></svg>
+	<img aria-label="Drag" src="images/actions/drag.svg#symb">
+	<img aria-label="Volume" src="images/resources/drive.svg#symb">
 	<p style="margin: 0px;">{{.volume_id}}</p>
 	<p style="margin: 0px; overflow: hidden; white-space: nowrap;">{{.file}}</p>
 </div>
 {{else if .net_id}}
 <div class="draggable-item" data-value="{{.net_id}}" style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 10px; align-items: center;">
-	<svg aria-label="Drag"><use href="images/actions/drag.svg#symb"></use></svg>
-	<svg aria-label="Net"><use href="images/resources/network.svg#symb"></use></svg>
+	<img aria-label="Drag" src="images/actions/drag.svg#symb">
+	<img aria-label="Net" src="images/resources/network.svg#symb">
 	<p style="margin: 0px;">{{.net_id}}</p>
 	<p style="margin: 0px; overflow: hidden; white-space: nowrap;">{{.value}}</p>
 </div>
diff --git a/web/templates/instance-card.go.tmpl b/web/templates/instance-card.go.tmpl
index fb166ec..72d14e5 100644
--- a/web/templates/instance-card.go.tmpl
+++ b/web/templates/instance-card.go.tmpl
@@ -9,13 +9,16 @@
 				padding: 0;
 				width: fit-content;
 			}
-			a, svg {
+			a, svg, img {
 				line-height: 1em;
 				height: 1em;
 				width: 1em;
 				margin: 0px;
 				padding: 0px;
 			}
+			a img {
+				vertical-align: unset;
+			}
 			#instance-name {
 				overflow-x: hidden;
 				min-width: 0;
@@ -57,53 +60,53 @@
 		<p class="hide-small">{{.Type}}</p>
 		<div class="flex row nowrap hide-tiny">
 			{{if eq .Status "running"}}
-				<svg id="status" aria-label="instance is running"><use href="images/status/active.svg#symb"></svg>
+				<img id="status" aria-label="instance is running" src="images/status/active.svg#symb">
 			{{else if eq .Status "stopped"}}
-				<svg id="status" aria-label="instance is stopped"><use href="images/status/inactive.svg#symb"></svg>
+				<img id="status" aria-label="instance is stopped" src="images/status/inactive.svg#symb">
 			{{else if eq .Status "loading"}}
-				<svg id="status" aria-label="instance is loading"><use href="images/status/loading.svg#symb"></svg>
+				<img id="status" aria-label="instance is loading" src="images/status/loading.svg#symb">
 			{{else}}
-				<svg id="status" aria-label="instance is loading"><use href="images/status/loading.svg#symb"></svg>
+				<img id="status" aria-label="instance is loading" src="images/status/loading.svg#symb">
 			{{end}}
 			<p>{{.Status}}</p>
 		</div>
 		<p class="hide-medium">{{.Node}}</p>
 		<div class="flex row nowrap hide-medium">
 			{{if eq .NodeStatus "online"}}
-				<svg aria-label="node is online"><use href="images/status/active.svg#symb"></svg>
+				<img aria-label="node is online" src="images/status/active.svg#symb">
 			{{else if eq .NodeStatus "offline"}}
-				<svg aria-label="node is offline"><use href="images/status/inactive.svg#symb"></svg>
+				<img aria-label="node is offline" src="images/status/inactive.svg#symb">
 			{{else if eq .NodeStatus "unknown"}}
-				<svg aria-label="node is offline"><use href="images/status/inactive.svg#symb"></svg>
+				<img aria-label="node is offline" src="images/status/inactive.svg#symb">
 			{{else}}
 			{{end}}
 			<p>{{.NodeStatus}}</p>
 		</div>
 		<div class="flex row nowrap" style="height: 1lh;">
 			{{if and (eq .NodeStatus "online") (eq .Status "running")}}
-				<svg id="power-btn" class="clickable" aria-label="shutdown instance" role="button" tabindex=0><use href="images/actions/instance/stop.svg#symb"></svg>
-				<svg id="configure-btn" aria-disabled="true" role="none"><use href="images/actions/instance/config-inactive.svg#symb"></svg>
-				<svg id="backup-btn" aria-disabled="true" role="none"><use href="images/actions/instance/backup-inactive.svg#symb"></svg>
+				<img id="power-btn" class="clickable" aria-label="shutdown instance" role="button" tabindex=0 src="images/actions/instance/stop.svg#symb">
+				<img id="configure-btn" aria-disabled="true" role="none" src="images/actions/instance/config-inactive.svg#symb">
+				<img id="backup-btn" aria-disabled="true" role="none" src="images/actions/instance/backup-inactive.svg#symb">
 				<a href="{{.ConsolePath}}" target="_blank">
-					<svg id="console-btn" class="clickable" aria-label="open console"><use href="images/actions/instance/console-active.svg#symb"></svg>
+					<img id="console-btn" class="clickable" aria-label="open console" src="images/actions/instance/console-active.svg#symb">
 				</a>
-				<svg id="delete-btn" aria-disabled="true" role="none"><use href="images/actions/instance/delete-inactive.svg#symb"></svg>
+				<img id="delete-btn" aria-disabled="true" role="none" src="images/actions/instance/delete-inactive.svg#symb">
 			{{else if and (eq .NodeStatus "online") (eq .Status "stopped")}}
-				<svg id="power-btn" class="clickable" aria-label="start instance" role="button" tabindex=0><use href="images/actions/instance/start.svg#symb"></svg>
+				<img id="power-btn" class="clickable" aria-label="start instance" role="button" tabindex=0 src="images/actions/instance/start.svg#symb">
 				<a href="{{.ConfigPath}}">
-					<svg id="configure-btn" class="clickable" aria-label="change configuration"><use href="images/actions/instance/config-active.svg#symb"></svg>
+					<img id="configure-btn" class="clickable" aria-label="change configuration" src="images/actions/instance/config-active.svg#symb">
 				</a>
 				<a href="{{.BackupsPath}}">
-					<svg id="backup-btn" class="clickable" aria-label="manage backups"><use href="images/actions/instance/backup-active.svg#symb"></svg>
+					<img id="backup-btn" class="clickable" aria-label="manage backups" src="images/actions/instance/backup-active.svg#symb">
 				</a>
-				<svg id="console-btn" aria-disabled="true" role="none"><use href="images/actions/instance/console-inactive.svg#symb"></svg>
-				<svg id="delete-btn" class="clickable" aria-label="delete instance" role="button" tabindex=0><use href="images/actions/instance/delete-active.svg#symb"></svg>
+				<img id="console-btn" aria-disabled="true" role="none" src="images/actions/instance/console-inactive.svg#symb">
+				<img id="delete-btn" class="clickable" aria-label="delete instance" role="button" tabindex=0 src="images/actions/instance/delete-active.svg#symb">
 			{{else if and (eq .NodeStatus "online") (eq .Status "loading")}}
-				<svg id="power-btn" aria-disabled="true" role="none"><use href="images/actions/instance/loading.svg#symb"></svg>
-				<svg id="configure-btn" aria-disabled="true" role="none"><use href="images/actions/instance/config-inactive.svg#symb"></svg>
-				<svg id="backup-btn" aria-disabled="true" role="none"><use href="images/actions/instance/backup-inactive.svg#symb"></svg>
-				<svg id="console-btn" aria-disabled="true" role="none"><use href="images/actions/instance/console-inactive.svg#symb"></svg>
-				<svg id="delete-btn" aria-disabled="true" role="none"><use href="images/actions/instance/delete-inactive.svg#symb"></svg>
+				<img id="power-btn" aria-disabled="true" role="none" src="images/actions/instance/loading.svg#symb">
+				<img id="configure-btn" aria-disabled="true" role="none" src="images/actions/instance/config-inactive.svg#symb">
+				<img id="backup-btn" aria-disabled="true" role="none" src="images/actions/instance/backup-inactive.svg#symb">
+				<img id="console-btn" aria-disabled="true" role="none" src="images/actions/instance/console-inactive.svg#symb">
+				<img id="delete-btn" aria-disabled="true" role="none" src="images/actions/instance/delete-inactive.svg#symb">
 			{{else}}
 			{{end}}
 		</div>