Adding New Icon in MudBlazor

Question

Are there a way adding new icons in MudBlazor Icons. I am working a project that about textile and I need different Icons in MudBlazor. I found the Icons but dont know how to add them in MudBlazor. Thanks in advance !

Answer 1

You can assign your own SVG as a string to MudIcon. Here is an example that will switch between an internal icon and a custom icon from https://materialdesignicons.com/ which you'll find when you search for virus.

Fiddle: https://try.mudblazor.com/snippet/QawlPlcwzUWsYLCo

<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;
        }
    }
}

Answer 2

Here is how I did it:

1. I created my own icon font with icomoon.io. You can upload your SVG images on the "Selection" step.
2. I added ligature codes on the "Generate Font" step. The MudBlazor documentation states "The MudIcon component will display any icon font that supports ligatures." (April, 2nd, 2022).
3. Downloaded the font and added it to the 'wwwroot' folder.
4. Added a reference to the css file in "wwwroot/index.html" (for PWA), e.g. like this <link href="css/fe/fe.css" rel="stylesheet">. Make sure you adapt the path to your needs.
5. Now you can finally use your icons.

When you reference an icon instead of using @Icons.Material.Sharp.FrontHand use a string like this: "icomoon-liga fe-backhand". "icomoon-liga" seems to enable ligatures. "fe-backhand" identifies the icon with "fe-" being the class prefix you can define in the font settings, and "backhand" being the name/code you gave the icon.

Example:

<MudIconButton Icon="icomoon-liga fe-backhand" Color=Color.Dark 
               OnClick=@(() => HitTheBall(false)) />