Icons that are loaded by default
MudBlazor comes loaded with Material Design icons as SVGs.
You can search the full list of icons under MudBlazor Icons in the menu.
Usage
The 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
The MudIcon component will display any icon font that supports ligatures.
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" />