Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Icons

Guidance and suggestions for using icons with MudBlazor.

See Icons API for parameter documentation.

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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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" />
An error has occurred. This application may no longer respond until reloaded. Reload 🗙