Aside: Add support for icons attribute.

Only built-icons will be supported for now. This commit does not
add support for the `:::` markdown shorthand for defining an aside,
that will be done in the next commit.

Author: shubham-padia

docs/src/content/docs/components/asides.mdx

@@ -49,6 +49,10 @@ Other content is also supported in asides.
 </Aside>
 
 <Aside type="danger">Do not give your password to anyone.</Aside>
+
+<Aside icon="heart">
+	Aside with a custom icon. The icon must be part of starlight's icon list.
+</Aside>
 ````
 
 <Fragment slot="markdoc">
@@ -73,6 +77,10 @@ Other content is also supported in asides.
 {% aside type="danger" %}
 Do not give your password to anyone.
 {% /aside %}
+
+{% aside icon="heart" %}
+Aside with a custom icon. The icon must be part of starlight's icon list.
+{% /aside %}
 ````
 
 </Fragment>
@@ -95,6 +103,10 @@ Do not give your password to anyone.
 
     <Aside type="danger">Do not give your password to anyone.</Aside>
 
+    <Aside icon="heart">
+        Aside with a custom icon. The icon must be part of starlight's icon list.
+    </Aside>
+
 </Fragment>
 
 </Preview>

packages/markdoc/index.mjs

@@ -67,6 +67,10 @@ export const StarlightMarkdocPreset = {
 		aside: {
 			render: component('@astrojs/starlight/components', 'Aside'),
 			attributes: {
+				icon: {
+					type: String,
+					required: false,
+				},
 				title: {
 					type: String,
 					required: false,

packages/starlight/user-components/Aside.astro

@@ -1,16 +1,18 @@
 ---
 import { AstroError } from 'astro/errors';
 import Icon from './Icon.astro';
+import type { StarlightIcon } from '../components/Icons';
 
 const asideVariants = ['note', 'tip', 'caution', 'danger'] as const;
 const icons = { note: 'information', tip: 'rocket', caution: 'warning', danger: 'error' } as const;
 
 interface Props {
 	type?: (typeof asideVariants)[number];
 	title?: string;
+	icon?: StarlightIcon;
 }
 
-let { type = 'note', title } = Astro.props;
+let { type = 'note', title, icon } = Astro.props;
 
 if (!asideVariants.includes(type)) {
 	throw new AstroError(
@@ -27,7 +29,7 @@ if (!title) {
 
 <aside aria-label={title} class={`starlight-aside starlight-aside--${type}`}>
 	<p class="starlight-aside__title" aria-hidden="true">
-		<Icon name={icons[type]} class="starlight-aside__icon" />{title}
+		<Icon name={icon || icons[type]} class="starlight-aside__icon" />{title}
 	</p>
 	<div class="starlight-aside__content">
 		<slot />