MudBlazor

Community Support

Discord

GitHub Discussions

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

GitHub Discussions

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 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.

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

The MudIcon component will display any icon font that supports ligatures.
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 🗙