Add support for custom icons in resources beyond FluentUI icon names #11863

Copilot · 2025-10-06T18:21:03Z

Adding Custom Icon Support for Resources

Implements support for custom icons in Aspire resources, allowing hosting integrations to specify SVG content, data URIs, or file-based icons for display in the dashboard.

Implementation Complete ✅

API Surface

Two methods for setting icons:

// 1. FluentUI icon name (existing WithIconName method)
builder.AddContainer("foo", "foo")
    .WithIconName("Database", IconVariant.Filled);

// 2. Custom icon data - SVG or data URI (new WithIconName overload)
// SVG example:
var svgContent = "<svg width='24' height='24'><circle cx='12' cy='12' r='10'/></svg>";
builder.AddContainer("foo", "foo")
    .WithIconName(svgContent, "MyIcon");

// PNG from embedded resource example:
var iconBytes = Resources.MyIcon;
var dataUri = $"data:image/png;base64,{Convert.ToBase64String(iconBytes)}";
builder.AddContainer("foo", "foo")
    .WithIconName(dataUri, "MyIcon");

// 3. File-based icon (WithResourceIcon for files only)
builder.AddContainer("foo", "foo")
    .WithResourceIcon("./myicon.svg");

Changes from Feedback

✅ Changed default iconName from "CustomIcon" to empty string in ResourceIconAnnotation
✅ Updated documentation to include SVG example
✅ Removed duplicate WithResourceIcon(iconName, iconVariant) - use existing WithIconName instead
✅ Renamed WithResourceIcon(iconData, iconName) to WithIconName and moved next to existing method
✅ Created CustomResourceIcon class extending Icon base class (FluentUI's CustomIcon caused conflict)
✅ Kept WithResourceIcon(iconPath) for file-based loading

Build Status

✅ Aspire.Hosting builds successfully
✅ Aspire.Dashboard builds successfully
✅ Aspire.Hosting.Tests builds successfully

Original prompt

This section details on the original issue you should resolve

<issue_title>Allow resources to specify custom icons to use when displayed in the dashboard</issue_title>
<issue_description>In 9.2 we added resource icons to the resources table and graph views. We should go further and enable resources to specify their own custom icons to be used when displayed in the dashboard. This should be done in such a way that hosting integrations can specify custom icons for their resources, so that, e.g., the Redis resource could show up with the Redis icon in the dashboard.

The icon itself would need to be sent from the app host resource server to the dashboard process so would need to be serializable. I imagine we'd want to support SVG which has the advantage of being vector and text-based. We could support bitmap-based formats like PNG, ICO, JPG, etc., by encoding them as data-uris.

I imagine an API kinda like the following for using a file on disk:
builder.AddContainer("foo", "foo")
    .WithResourceIcon("./myicon.svg");
And perhaps something like this for something embedded, e.g. in a hosting integration:
builder.AddContainer("foo", "foo")
    .WithResourceIcon(EncodeAsDataUri(Resources.MyIcon), ImageFormat.Png);
```</issue_description>

<agent_instructions>Do not break any existing code.</agent_instructions>

## Comments on the Issue (you are @copilot in this section)

<comments>
<comment_new><author>@maddymontaquila</author><body>
@copilot can you take a look at this but start by extending it to a known list of Blazor fluent UI icons that an integration can set? 

Keep in mind that currently we are using this helper and we do _not_ want to break it. These should be the fallbacks and still the default.
https://github.com/dotnet/aspire/blob/main/src/Aspire.Dashboard/Model/ResourceIconHelpers.cs#L13

</body></comment_new>
<comment_new><author>@DamianEdwards</author><body>
Re-opening as the PR added support for specifying the name of a known icon, but not setting custom icons.</body></comment_new>
</comments>

Fixes #8684

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: adamint <[email protected]>

adamint · 2025-10-06T18:50:40Z

src/Aspire.Hosting/ApplicationModel/ResourceIconAnnotation.cs

+    {
+        ArgumentException.ThrowIfNullOrWhiteSpace(customIconData);
+        CustomIconData = customIconData;
+        IconName = iconName ?? "CustomIcon";


Make this an empty string.

Changed to empty string in commit 6ce6e93.

adamint · 2025-10-06T18:51:20Z

src/Aspire.Hosting/ApplicationModel/ResourceIconAnnotation.cs

+    /// - Raw SVG content (e.g., "&lt;svg...&gt;...&lt;/svg&gt;")
+    /// - A data URI (e.g., "data:image/png;base64,...")
+    /// </remarks>
+    public string? CustomIconData { get; }


Make sure this supports svgs, and update to include an svg example.

Updated documentation with SVG example in commit 6ce6e93.

adamint · 2025-10-06T18:53:05Z

src/Aspire.Hosting/ResourceBuilderExtensions.cs

+    /// </code>
+    /// </example>
+    /// </remarks>
+    public static IResourceBuilder<T> WithResourceIcon<T>(this IResourceBuilder<T> builder, string iconPath) where T : IResource


a function WithIconName already exists, don't duplicate

you must get rid of this

Removed the duplicate method in commit 6ce6e93.

Removed in commit 6ce6e93.

adamint · 2025-10-06T18:53:23Z

src/Aspire.Hosting/ResourceBuilderExtensions.cs

+    /// </code>
+    /// </example>
+    /// </remarks>
+    public static IResourceBuilder<T> WithResourceIcon<T>(this IResourceBuilder<T> builder, string iconData, string? iconName) where T : IResource


this should also be named WithIconName and placed next to the existing method

you must rename this and move to the correct location

Renamed to WithIconName and moved next to existing method in commit 6ce6e93.

Renamed to WithIconName and moved in commit 6ce6e93.

src/Aspire.Dashboard/Model/ResourceIconHelpers.cs

adamint · 2025-10-06T18:54:41Z

src/Aspire.Dashboard/Model/ResourceIconHelpers.cs

+/// <summary>
+/// Represents a custom icon using SVG content or data URI.
+/// </summary>
+internal sealed class CustomDataIcon : Icon


actually, you should use the CustomIcon class that already exists

you must use the existing custom icon class

Created CustomResourceIcon class extending Icon base class in commit 6ce6e93.

Created CustomResourceIcon class extending Icon base class in commit 6ce6e93. Named it CustomResourceIcon to avoid conflict with FluentUI's existing CustomIcon class.

adamint · 2025-10-06T19:03:45Z

src/Aspire.Dashboard/Model/ResourceIconHelpers.cs

+/// <summary>
+/// Represents a custom icon using SVG content or data URI.
+/// </summary>
+internal sealed class CustomDataIcon : Icon


you must use the existing custom icon class

adamint · 2025-10-06T19:04:23Z

src/Aspire.Hosting/ResourceBuilderExtensions.cs

+    /// </code>
+    /// </example>
+    /// </remarks>
+    public static IResourceBuilder<T> WithResourceIcon<T>(this IResourceBuilder<T> builder, string iconPath) where T : IResource


you must get rid of this

adamint · 2025-10-06T19:04:37Z

src/Aspire.Hosting/ResourceBuilderExtensions.cs

+    /// </code>
+    /// </example>
+    /// </remarks>
+    public static IResourceBuilder<T> WithResourceIcon<T>(this IResourceBuilder<T> builder, string iconData, string? iconName) where T : IResource


you must rename this and move to the correct location

adamint · 2025-10-06T19:17:06Z

@copilot you need to make new changes based on the comments

Co-authored-by: adamint <[email protected]>

Initial plan

b615de7

Copilot AI assigned Copilot and adamint Oct 6, 2025

Copilot started work on behalf of adamint October 6, 2025 18:21 View session

Copilot AI and others added 2 commits October 6, 2025 18:43

Add custom icon data support infrastructure

d3a73fc

Co-authored-by: adamint <[email protected]>

Add tests for custom icon functionality

47eab1a

Co-authored-by: adamint <[email protected]>

adamint requested changes Oct 6, 2025

View reviewed changes

dotnet-policy-service bot added the needs-author-action An issue or pull request that requires more info or actions from the author. label Oct 6, 2025

adamint requested changes Oct 6, 2025

View reviewed changes

adamint requested a review from JamesNK October 6, 2025 18:54

adamint added the area-dashboard label Oct 6, 2025

Copilot AI changed the title ~~[WIP] Allow resources to specify custom icons to use when displayed in the dashboard~~ Add support for custom icons in resources beyond FluentUI icon names Oct 6, 2025

Copilot AI requested a review from adamint October 6, 2025 18:58

Copilot finished work on behalf of adamint October 6, 2025 18:58

adamint requested changes Oct 6, 2025

View reviewed changes

Copilot started work on behalf of adamint October 6, 2025 19:17 View session

Address PR feedback: fix API and use existing Icon base class

f56b9ee

Co-authored-by: adamint <[email protected]>

dotnet-policy-service bot removed the needs-author-action An issue or pull request that requires more info or actions from the author. label Oct 6, 2025

Copilot AI requested a review from adamint October 6, 2025 19:29

Copilot finished work on behalf of adamint October 6, 2025 19:29

Add support for custom icons in resources beyond FluentUI icon names #11863

Are you sure you want to change the base?

Add support for custom icons in resources beyond FluentUI icon names #11863

Uh oh!

Conversation

Copilot AI commented Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Adding Custom Icon Support for Resources

Implementation Complete ✅

API Surface

Changes from Feedback

Build Status

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamint commented Oct 6, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Oct 6, 2025 •

edited

Loading