Within .mdx and .astro you are able to use icons. To allow for this we use "astro-icon" which is able to take icons from various icon sets. Currently most icons are from Material Design Icons (MDI), but others can be used.
The following example shows how to use the Icon component in MDX. First you need to import the Icon component from astro-icon and then place it like a regular HTML element. Then specify the specific icon set it needs to take the icons from with the pack attribute. Now get specify an icon-name with the name attribute. If you wanted to add some extra styling to the icon (which will be passed through directly to the SVG element) you can do this with the class attribute.
import { Icon } from "astro-icon";
<Icon pack="mdi" name="house" class="h-7 w-7" />