Fix aside icons when MDX optimization is disabled

.changeset/tricky-dolls-cover.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes an issue where aside icons were rendered incorrectly in projects where Astro’s MDX integration had optimization disabled

packages/starlight/__e2e__/fixtures/no-mdx-optimization/astro.config.mjs

@@ -0,0 +1,15 @@
+// @ts-check
+import mdx from '@astrojs/mdx';
+import starlight from '@astrojs/starlight';
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+	integrations: [
+		starlight({
+			title: 'Basics',
+			pagefind: false,
+		}),
+		// Starlight sets `optimize: true`, so we provide our own copy of the MDX integration to test without optimization.
+		mdx({ optimize: false }),
+	],
+});

packages/starlight/__e2e__/fixtures/no-mdx-optimization/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@e2e/no-mdx-optimization",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/starlight": "workspace:*",
+    "astro": "^7.0.2"
+  }
+}

packages/starlight/__e2e__/fixtures/no-mdx-optimization/src/content.config.ts

@@ -0,0 +1,7 @@
+import { docsLoader } from '@astrojs/starlight/loaders';
+import { docsSchema } from '@astrojs/starlight/schema';
+import { defineCollection } from 'astro:content';
+
+export const collections = {
+	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+};

packages/starlight/__e2e__/fixtures/no-mdx-optimization/src/content/docs/asides.mdx

@@ -0,0 +1,19 @@
+---
+title: Asides
+---
+
+:::note
+Directive aside
+:::
+
+:::tip{icon="heart"}
+Directive aside with custom icon
+:::
+
+import { Aside } from '@astrojs/starlight/components';
+
+<Aside type="note">Component aside</Aside>
+
+<Aside type="tip" icon="starlight">
+	Component aside with custom icon
+</Aside>

packages/starlight/__e2e__/no-mdx-optimization.test.ts

@@ -0,0 +1,19 @@
+import { expect, testFactory } from './test-utils';
+
+const test = testFactory('./fixtures/no-mdx-optimization/');
+
+test.describe('no MDX optimization', () => {
+	test.describe('asides', () => {
+		test('asides render an SVG icon', async ({ page, getProdServer }) => {
+			const starlight = await getProdServer();
+			await starlight.goto('/asides/');
+
+			const asideIconsLocator = page.locator('.starlight-aside__title svg');
+
+			// All four aside instances should have an icon, so we expect four icons to be rendered.
+			// This checks an issue where SVGs were escaped and rendered as text with MDX optimization
+			// disabled. See https://github.com/withastro/starlight/pull/3967#issuecomment-4833368829
+			await expect(asideIconsLocator).toHaveCount(4);
+		});
+	});
+});

packages/starlight/integrations/satteri.ts

@@ -103,6 +103,15 @@ function satteriAsidesPlugin(
 
 			const icon = getAsideIcon(variant, node.attributes?.['icon']);
 			const iconSvg = `<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="starlight-aside__icon">${icon}</svg>`;
+			// Markdown and MDX require different AST shapes for raw HTML content.
+			// TODO: replace endsWith check with an official Sätteri API once available.
+			const iconNode = ctx.fileURL?.pathname.endsWith('.mdx')
+				? {
+						type: 'mdxJsxTextElement',
+						name: 'Fragment',
+						attributes: [{ type: 'mdxJsxAttribute', name: 'set:html', value: iconSvg }],
+					}
+				: { type: 'html', value: iconSvg };
 
 			return paragraphElement(
 				'aside',
@@ -112,7 +121,7 @@ function satteriAsidesPlugin(
 				},
 				[
 					paragraphElement('p', { class: 'starlight-aside__title', 'aria-hidden': 'true' }, [
-						{ type: 'html', value: iconSvg },
+						iconNode,
 						...titleNode,
 					]),
 					paragraphElement('div', { class: 'starlight-aside__content' }, children),