Icons that are loaded by default
Mudblazor comes loaded with Material Design icons as SVG's.
You can search the full list of the icons under MudBlazor Icons in the menu.
Usage
MudIcon component shows the specified icon with the chosen style. You can use the Title attribute to improve accessibility with screen readers and show a tooltip on mouse over.
<MudIcon Icon="@Icons.Material.Filled.Favorite" Title="Favorite" /> <MudIcon Icon="@Icons.Material.Filled.Api" Title="API" /> <MudIcon Icon="@Icons.Material.Filled.AddCircle" Title="Add" /> <MudIcon Icon="@Icons.Custom.Brands.GitHub" Title="GitHub" /> <MudIcon Icon="@Icons.Custom.Brands.Google" Title="Google" /> <MudIcon Icon="@Icons.Custom.Brands.Reddit" Title="Reddit" />
Color
<MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Default" /> <MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Primary" /> <MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Secondary" /> <MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Success" /> <MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Info" /> <MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Warning" /> <MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Error" /> <MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Dark" />
Size
<MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Size="Size.Small" /> <MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" /> <MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Size="Size.Large" />
Font Icons
MudIcon component will display any icon font that support ligatures.
This are not loaded by default, for example you can use Font Awesome
<link href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" rel="stylesheet"> <MudIcon Icon="fab fa-internet-explorer" Color="Color.Primary" /> <MudIcon Icon="fab fa-angellist" Color="Color.Secondary" /> <MudIcon Icon="fas fa-dragon" Color="Color.Success" /> <MudIcon Icon="fas fa-toilet-paper-slash" /> <MudIcon Icon="fas fa-toilet-paper-slash" Size="Size.Small" /> <MudIcon Icon="fas fa-toilet-paper-slash" Size="Size.Large" />