Support external icons since built-in icons are too limited

[dhruvkb]

What version of starlight are you using?

0.5.1

What is your idea?

Since the built-in icons in Starlight are too limited, it would be great if the Card component could work with a different icon set like Font Awesome, Heroicons or Bootstrap.

Why is this feature necessary?

Starlight's built in icon set is extremely limited (~38). The option to integrate with a different icon set would expand the available number of glyphs considerably.

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this issue.

[delucis]

Thanks for the issue! We’ve adding a few manually so far, but may be worth expanding or supporting customisation. The non-logo icons Starlight currently uses are from the Unicons set: https://github.com/Iconscout/unicons

[lorenzolewis]

Could we look at integrating with https://github.com/natemoo-re/astro-icon/tree/next somehow for this? @natemoo-re is using Iconify to back it and that has the Unicons set in it.

I'm not sure how an "integration within an integration" to have starlight handle this all internally or if this would have to be another layer.

An additional option could be pointing people to that package once component replacement is a think.

[delucis]

I could chat with @natemoo-re‚ it’s definitely an idea! Not sure when natemoo-re/astro-icon#111 might be released.

[lschierer]

with iconify's webcomponent support, this would just be adding the import statement import 'iconify-icon'; to the base layout page, you can then use

<iconify-icon icon="mdi:caret-down-outline"></iconify-icon>

or any other icon where ever you like in the mdx pages.