Add Custom Icons to built in resources

[afscrome]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

9.5 added the WithIconName API, but so far nothing in the core aspire repo actually uses this api. We should make use of this API

Describe the solution you'd like

Resource types in the aspire repo should add custom icon to the built in custom resources.

There may also be value in a KnownResourceIconNames class to allow similar app types to share the same icon.

• Management UIs (redis commander etc.)
• Database / Database Servers
• Queue (kafka & rabbitmq)

If introducign KnownResourceIconNames, a bit of refactoring may also be needed to avoid deviation from ResourceIconHelpers in the dashboard..

Additional context

No response

[MihuBot]

I'm a bot. Here is a possible related and/or duplicate issue (I may be wrong):

• Allow resources to specify custom icons to use when displayed in the dashboard #8684

[DamianEdwards]

Would love this. Was thinking perhaps a smaller next-step is to add support for icons from Nerd Fonts, which has icons for lots of dev/tech products built-in, then maybe we could something like:

builder.AddContainer("foo", "something")
    .WithIconSource(IconSource.FluentUI)
    .WithIconName("VirtualNetwork");

builder.AddContainer("bar", "something/else")
    .WithIconSource(IconSource.NerdFonts)
    .WithIconName("nf-dev-postgresql");

In the future, to support fully custom icons, we could extend this to something like:

builder.AddContainer("so-custom", "somewhere")
    .WithIconSource(IconSource.CustomUrl)
    .WithIconName("https://some.url.to.dev/custom/icon.svg");

builder.AddContainer("more-custom", "somewhere")
    .WithIconSource(IconSource.CustomResource, typeof(MyCustomResource).Assembly)
    .WithIconName("IconEmbeddedResourceName");

[afscrome]

Some of those feel a bit messy, but you could perhaps encode that via a helper extension method. i.e. instead of

.WithIconSource(IconSource.NerdFonts)
.WithIconName("nf-dev-postgresql");

have

.WithNerdFontIcon("nf-dev-postgresql");

[DamianEdwards]

Yeah this is about layering. WithIconName sounds generic but is hard-tied to the Fluent UI icon set today, so I'm trying to ensure layering allows us to build experiences that lead ppl to success. No problem with having higher-level methods like WithNerdFontIcon and WithFluentUiIcon. We could also consider obsoleting WithIconName and just going with concrete methods like WithFluentUiIcon and WithNerdFontIcon and don't bother with any kind of layering based on the existing idiom.

[JamesNK]

Would love this. Was thinking perhaps a smaller next-step is to add support for icons from Nerd Fonts, which has icons for lots of dev/tech products built-in, then maybe we could something like:

A problem with this (I think) is nerdfonts is icons displayed via a custom font. The UI is currently designed to show SVG icons. The resources grid and the graph view would need some large updates to support something else. I'm not sure how easy it would be to display a font based icon at the right size so it looks consistent with existing SVG icons.

[DamianEdwards]

There's this utility to convert nerd fonts to SVG: https://github.com/icalvin102/nerdconvert

The icons I think are most interesting from NerdFonts are actually from devicon and it does have SVG, e.g. https://github.com/devicons/devicon/blob/master/icons/redis/redis-plain.svg