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 !

Vexation

To do that you need to add your icons to the css file of MudBlazor with is "not possible" because This file is embedded in the nuget package , can't you just add your icons without mudblazor ? – Adenoidal

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

Anschluss

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)) />

Nowise

Answer 3

It's possible to add icons from other sources and your own icon (as SVG path definition). You will find additional information https://mudblazor.com/components/icons#custom-icons.

Exo

Do you know any tool to convert svg into path? – Arabian

The link only shows a list of icons (April 2nd, 2022) – Nowise

this link is useless and provides no information regarding the question. Its just a list of all their icons that you have access to use. It provides nothing regarding the actual question posted. – Distribution

There are two icon pages on the MudBlazor docs, I substituted the correct one which in fact shows an example how to use your own SVG as an icon: mudblazor.com/components/icons#custom-icons – Anschluss

@AntonioRodríguez converting into path is not necessary, you can assign the entire SVG as string to the Icon property of MudIcon. – Anschluss

I don't want to pollute my code with const string cube = @"<svg style=""width:24px;height:24px"" viewBox=""0 0 24 24""> <path fill=""currentColor"" d=""M21,16.5C21,1 ... How can we load the data from a resource file, which is the most correct way to do it (separation of code and resources). – Beamy

@Beamy have you looked at the source generated by MudBlazor when it inserts a Material Design icon? The entire svg is embedded as a string. – Nakada

@Nakada true but at least I don't see it in my code, so my mind is at peace – Beamy