Icon stroke color not being applied

[coderdnewbie]

I am trying to make a custom svg icon and it is working great apart from the stroke color of the icon not being applied (currently it is always black). Does anyone know what I should change stroke=""currentColor"" for it to work?

Here is my icon code:

using Microsoft.FluentUI.AspNetCore.Components;

namespace RazorComponents;

public class MyIcon : Icon
{    
    private const string SVG_CONTENT = @"<svg xmlns=""http://www.w3.org/2000/svg"" fill=""none"" viewBox=""0 0 24 24"" stroke-width=""1.5"" stroke=""currentColor"" class=""w-6 h-6"">
      <path stroke-linecap=""round"" stroke-linejoin=""round"" d=""M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z"" />
      <path stroke-linecap=""round"" stroke-linejoin=""round"" d=""M4.867 19.125h.008v.008h-.008v-.008Z"" />
    </svg>";


    public MyIcon() : base("MyIcon", IconVariant.Regular, IconSize.Custom, SVG_CONTENT)
    {
        // Default Color
        WithColor("#F97316");

[dvoituron]

You need to remove the fill=""none"" attribute because the WithColor method will replace this fill attribute with the specified color.
So for your icon, you can define the filled color with WithColor, but you will not be able to customize the stroke color (which needs to be fixed or customizable by CSS).

Example:

public class MyIcon : Microsoft.FluentUI.AspNetCore.Components.Icon
{
    private const string SVG_CONTENT = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 24 24"" class=""w-6 h-6"">
      <path stroke-linecap=""round"" stroke-linejoin=""round"" d=""M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z"" />
      <path stroke-linecap=""round"" stroke-linejoin=""round"" d=""M4.867 19.125h.008v.008h-.008v-.008Z"" />
    </svg>";


    public MyIcon() : base("MyIcon", IconVariant.Regular, IconSize.Custom, SVG_CONTENT)
    {
        // Default Color
        WithColor("#F97316");
    }
}

[coderdnewbie]

Thanks for the information

[AJ1000]

For anybody else with this issue, I ended up doing this to get the stroke color to change and keep the fill="none" in my main code:

<FluentNavLink Icon="@(new MyIcon())" Style="color: #036ac4" Tooltip="Item 3.2 tooltip">
    <span Style="color: #000000">Item 3.2</span>
</FluentNavLink>

Of course this does not work with themes, but means I can use custom icons that my company use as we try to transition from MVC to Blazor. The fill="none" was important as the current icons are like this.