How to add custom icons in MudBlazor

MudIcon.Icon is a 'string' but there is no information on how to use an image file (png, jpg) as a custom icon.

These projects show how to use your own images as custom icons.

How to use an image as a custom icon

@page "/"

<PageTitle>MudBlazor Custom Icons</PageTitle>

<h1>MudBlazor Custom Icons!</h1>

<MudIcon Icon=@IconStr Title="Favorite" />

<div>
  @IconStr
</div>

@code
{
  private const string IconStr =
    "<image width=\"32\" height=\"32\" xlink:href=\"icons/lightning.png\" />";
}

• path to icon should be relative to wwwroot
• this will embed an image inside the MudBlazor svg
• nolte that xlink namespace is not explicitly set by MudIcon

How to use an SVG image as a custom icon

<MudIcon Class="ma-4" Icon="@selectedIcon" Color="Color.Primary" />
<MudButton Class="ma-4" Variant="Variant.Filled" Color="Color.Primary" OnClick="ChangeIcon">Switch Icon</MudButton>

@code{

    //Virus from Material Design Icons
    string virus = "<svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\">"+
        "<path fill=\"currentColor\" d=\"M19.82 14C20.13 14.45 20.66 14.75 21.25 14.75C22.22 14.75 23 13.97 23 13S22.22 11.25 21.25 11.25C20.66 11.25 20.13 11.55 19.82 12H19C19 10.43 18.5 9 17.6 7.81L18.94 6.47C19.5 6.57 20.07 6.41 20.5 6C21.17 5.31 21.17 4.2 20.5 3.5C19.81 2.83 18.7 2.83 18 3.5C17.59 3.93 17.43 4.5 17.53 5.06L16.19 6.4C15.27 5.71 14.19 5.25 13 5.08V3.68C13.45 3.37 13.75 2.84 13.75 2.25C13.75 1.28 12.97 .5 12 .5S10.25 1.28 10.25 2.25C10.25 2.84 10.55 3.37 11 3.68V5.08C10.1 5.21 9.26 5.5 8.5 5.94L7.39 4.35C7.58 3.83 7.53 3.23 7.19 2.75C6.63 1.96 5.54 1.76 4.75 2.32C3.96 2.87 3.76 3.96 4.32 4.75C4.66 5.24 5.2 5.5 5.75 5.5L6.93 7.18C6.5 7.61 6.16 8.09 5.87 8.62C5.25 8.38 4.5 8.5 4 9C3.33 9.7 3.33 10.8 4 11.5C4.29 11.77 4.64 11.93 5 12L5 12C5 12.54 5.07 13.06 5.18 13.56L3.87 13.91C3.45 13.56 2.87 13.41 2.29 13.56C1.36 13.81 .808 14.77 1.06 15.71C1.31 16.64 2.28 17.19 3.21 16.94C3.78 16.78 4.21 16.36 4.39 15.84L5.9 15.43C6.35 16.22 6.95 16.92 7.65 17.5L6.55 19.5C6 19.58 5.5 19.89 5.21 20.42C4.75 21.27 5.07 22.33 5.92 22.79C6.77 23.25 7.83 22.93 8.29 22.08C8.57 21.56 8.56 20.96 8.31 20.47L9.38 18.5C10.19 18.82 11.07 19 12 19C12.06 19 12.12 19 12.18 19C12.05 19.26 12 19.56 12 19.88C12.08 20.85 12.92 21.57 13.88 21.5S15.57 20.58 15.5 19.62C15.46 19.12 15.21 18.68 14.85 18.39C15.32 18.18 15.77 17.91 16.19 17.6L18.53 19.94C18.43 20.5 18.59 21.07 19 21.5C19.7 22.17 20.8 22.17 21.5 21.5S22.17 19.7 21.5 19C21.07 18.59 20.5 18.43 19.94 18.53L17.6 16.19C18.09 15.54 18.47 14.8 18.71 14H19.82M10.5 12C9.67 12 9 11.33 9 10.5S9.67 9 10.5 9 12 9.67 12 10.5 11.33 12 10.5 12M14 15C13.45 15 13 14.55 13 14C13 13.45 13.45 13 14 13S15 13.45 15 14C15 14.55 14.55 15 14 15Z\" />"+
        "</svg>";

    private string selectedIcon = Icons.Custom.Brands.MudBlazor;

    private void ChangeIcon()
    {
        if (selectedIcon == Icons.Custom.Brands.MudBlazor)
        {
            selectedIcon = virus;
        }
        else
        {
            selectedIcon = Icons.Custom.Brands.MudBlazor;
        }
    }
}