在 MudBlazor 中添加新图标

Posted 2023-03-27

【中文标题】在 MudBlazor 中添加新图标

【英文标题】：Adding New Icon in MudBlazor

【发布时间】：2021-07-21 15:22:14

【问题描述】：

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

【问题讨论】：

要做到这一点，您需要将您的图标添加到 MudBlazor 的 css 文件中，因为该文件嵌入在 nuget 包中，所以您不能只添加没有 mudblazor 的图标吗？

@yasseros 非常感谢你

【参考方案1】：

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

【讨论】：

你知道有什么工具可以将svg转换成路径吗？

【参考方案2】：

您可以将自己的 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;