在 MudBlazor 中添加新图标

Question

有没有办法在 MudBlazor 图标中添加新图标。我正在做一个关于纺织的项目，我需要 MudBlazor 中的不同图标。我找到了图标，但不知道如何将它们添加到 MudBlazor 中。提前致谢 ！

Answer 1

您可以将自己的 SVG 作为字符串分配给 MudIcon。下面是一个在内部图标和来自https://materialdesignicons.com/的自定义图标之间切换的示例，您在搜索病毒时会找到该图标。

小提琴：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

我是这样做的：

1. 我使用icomoon.io创建了自己的图标字体。您可以在“选择”步骤中上传 SVG 图像。
2. 我在“生成字体”步骤中添加了连字代码。MudBlazor 文档指出“MudIcon 组件将显示支持连字的任何图标字体。” （2022 年 4 月 2 日）。
3. 下载字体并将其添加到“wwwroot”文件夹中。
4. 在“wwwroot/index.html”（针对 PWA）中添加了对 css 文件的引用，例如这样<link href="css/fe/fe.css" rel="stylesheet">。确保您根据需要调整路径。
5. 现在您终于可以使用您的图标了。

当您引用图标而不是使用时，@Icons.Material.Sharp.FrontHand请使用如下字符串："icomoon-liga fe-backhand"。“icomoon-liga”似乎可以启用连字。“fe-backhand”标识图标，“fe-”是您可以在字体设置中定义的类前缀，“backhand”是您为图标指定的名称/代码。

例子：

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

Answer 3

可以添加来自其他来源的图标和您自己的图标（作为 SVG 路径定义）。您将找到更多信息https://mudblazor.com/components/icons#custom-icons。