fix(overlay): Fix SVG icons not showing properly in the overflow menu (#9235)

4 files changed, 22 insertions, 23 deletions

diff --git a/.changeset/green-impalas-fetch.md b/.changeset/green-impalas-fetch.md
new file mode 100644
index 000000000..02b77375f
--- /dev/null
+++ b/.changeset/green-impalas-fetch.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix SVG icons not showing properly in the extended dropdown menu of the dev overlay
diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
index 9daccc361..32fca3759 100644
--- a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
@@ -2,7 +2,6 @@ import type { DevOverlayPlugin as DevOverlayPluginDefinition } from '../../../@t
 import { type AstroDevOverlay, type DevOverlayPlugin } from './overlay.js';
 
 import { settings } from './settings.js';
-import type { Icon } from './ui-library/icons.js';
 
 let overlay: AstroDevOverlay;
 
@@ -13,7 +12,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 		{ default: astroAuditPlugin },
 		{ default: astroXrayPlugin },
 		{ default: astroSettingsPlugin },
-		{ AstroDevOverlay, DevOverlayCanvas },
+		{ AstroDevOverlay, DevOverlayCanvas, getPluginIcon },
 		{
 			DevOverlayCard,
 			DevOverlayHighlight,
@@ -188,8 +187,9 @@ document.addEventListener('DOMContentLoaded', async () => {
 					button.setAttribute('data-plugin-id', plugin.id);
 
 					const iconContainer = document.createElement('div');
-					const iconElement = getPluginIcon(plugin.icon);
-					iconContainer.append(iconElement);
+					const iconElement = document.createElement('template');
+					iconElement.innerHTML = getPluginIcon(plugin.icon);
+					iconContainer.append(iconElement.content.cloneNode(true));
 
 					const notification = document.createElement('div');
 					notification.classList.add('notification');
@@ -224,14 +224,6 @@ document.addEventListener('DOMContentLoaded', async () => {
 				}
 
 				canvas.append(dropdown);
-
-				function getPluginIcon(icon: Icon) {
-					if (isDefinedIcon(icon)) {
-						return getIconElement(icon)!;
-					}
-
-					return icon;
-				}
 			}
 		},
 	} satisfies DevOverlayPluginDefinition;
diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
index 348e62717..2a45e740f 100644
--- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
@@ -386,19 +386,11 @@ export class AstroDevOverlay extends HTMLElement {
 
 	getPluginTemplate(plugin: DevOverlayPlugin) {
 		return `<button class="item" data-plugin-id="${plugin.id}">
-				<div class="icon">${this.getPluginIcon(plugin.icon)}<div class="notification"></div></div>
+				<div class="icon">${getPluginIcon(plugin.icon)}<div class="notification"></div></div>
 				<span class="item-tooltip">${plugin.name}</span>
 			</button>`;
 	}
 
-	getPluginIcon(icon: Icon) {
-		if (isDefinedIcon(icon)) {
-			return getIconElement(icon)?.outerHTML;
-		}
-
-		return icon;
-	}
-
 	getPluginById(id: string) {
 		return this.plugins.find((plugin) => plugin.id === id);
 	}
@@ -525,3 +517,11 @@ export class DevOverlayCanvas extends HTMLElement {
 		</style>`;
 	}
 }
+
+export function getPluginIcon(icon: Icon) {
+	if (isDefinedIcon(icon)) {
+		return getIconElement(icon).outerHTML;
+	}
+
+	return icon;
+}
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts
index d712a3d54..28878ef11 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts
@@ -5,10 +5,12 @@ export function isDefinedIcon(icon: Icon): icon is DefinedIcon {
 	return icon in icons;
 }
 
+export function getIconElement(name: DefinedIcon): SVGElement;
+export function getIconElement(name: string & NonNullable<unknown>): undefined;
 export function getIconElement(
-	name: keyof typeof icons | (string & NonNullable<unknown>)
+	name: DefinedIcon | (string & NonNullable<unknown>)
 ): SVGElement | undefined {
-	const icon = icons[name as keyof typeof icons];
+	const icon = icons[name as DefinedIcon];
 
 	if (!icon) {
 		return undefined;