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.

[aleclarson]

Some guidance on customizing the built-in icons (adding new ones or overriding existing ones) would be very much appreciated!

[aleclarson]

For now, we are patching @astrojs/starlight with pnpm 😅

[delucis]

Ah yeah, we don’t really have any guidance at the moment — the system is basically hardcoded. Looking into maybe using https://github.com/natemoo-re/astro-icon to support this.

[HiDeoo]

Sharing a small note I wrote some time ago on how to use Iconify icons in Starlight by using unplugin-icons.

[andrii-bodnar]

It would also be great to have a way to customize the icon for the Card component.

For example, by passing an Icon component itself, as in the Nextra's Card component.

[Sidnioulz]

Hey folks,

I think there should be a feature to add icons to the built-in set regardless of options to add external icons to our own pages. Starlight tabs, for instance, are only able to load icons through this mechanism.

It shouldn't be too hard to take monolayer SVGs and pass them through a loader pipeline that transforms them to the format currently used by built-in icons. Is this a contribution the maintainers would be keen to receive?

Or would the maintainers prefer to receive a contribution to automatically inject src/icons/* content into the built-in set through astro-icon?

Or is there a rationale why the built-in set should remain unchanged?

Thanks,