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/guides/components.mdx

@@ -282,6 +282,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>
 ````
 
 The above code generates the following on the page:
@@ -306,6 +310,11 @@ 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>
+
 Starlight also provides a custom syntax for rendering asides in Markdown and MDX as an alternative to the `<Aside>` component.
 See the [“Authoring Content in Markdown”](/guides/authoring-content/#asides) guide for details of the custom syntax.
 

packages/starlight/user-components/Aside.astro

@@ -12,7 +12,7 @@ interface Props {
 	title?: string;
 }
 
-let { type = 'note', title } = Astro.props;
+let { type = 'note', title, icon } = Astro.props;
 
 if (!asideVariants.includes(type)) {
 	throw new AstroError(
@@ -30,7 +30,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>
 	<section class="starlight-aside__content">
 		<slot />