在Mudblazor

Question

在那里有一种方法，在泥blazor图标中添加新图标。我正在从事一个关于纺织品的项目，我需要在Mudblazor中使用不同的图标。我找到了图标，但不知道如何将它们添加到Mudblazor中。预先感谢！

Answer 1

您可以将自己的SVG分配给Mudicon。这是一个示例，它将在内部图标和自定义图标之间从https：//materialialdesignicons.com/进行自定义图标之间进行切换。 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

I使用

IComoon.io

I在“生成字体”步骤上添加了连字代码。 Mudblazor文档指出：“ Mudicon组件将显示任何支持连接的图标字体。” （4月2日，2022年）下载字体并将其添加到“ wwwroot”文件夹中。在“ wwwroot/index.html”（用于PWA）中添加了对CSS文件的引用，例如像这样。确保您适应了满足需求的道路。
<link href="css/fe/fe.css" rel="stylesheet">

@Icons.Material.Sharp.FrontHand

。 “ iComoon-liga”似乎可以实现连字。 “ fe-backhand”标识了您可以在字体设置中定义的类前缀“ fe-”的图标，而“反手”是您给出的名称/代码。

示例：

"icomoon-liga fe-backhand"

可以从其他来源添加图标和您自己的图标（作为SVG路径定义）。您会找到其他信息

https：//mudblazor.com/components/icons#custom-icons

您可以以泥blazor

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

类样式添加自己的图标。  然后，您可以在使用

Icons

Answer 3

Icon

或StartIcon参数的任何组件中使用它。

您必须将您的图标源链接在主剃须刀文件的标签中（app.razor，host.razor ...）

Answer 4

EndIcon

Myicon班级：

<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" ...
</head>

将您的班级用在剃须刀代码中的某个地方：

 public static class MyIcons
 {
     public static string User => "fas fa-user";
     public static string Edit => "fas fa-edit";
 }

对我有用，我在一个地方定义了我的图标集。 Mudbutton配置了MyiconClass

在Mudblazor

问题描述投票：0回答：4

4个回答

最新问题

在Mudblazor

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4