Icons

Guidance and suggestions for using icons with MudBlazor.

See Icons API for parameter documentation.

All icons that comes 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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudIcon Icon="@Icons.Material.Filled.Favorite" />
<MudIcon Icon="@Icons.Material.Filled.Api" />
<MudIcon Icon="@Icons.Material.Filled.AddCircle" />
<MudIcon Icon="@Icons.Custom.Brands.GitHub" />
<MudIcon Icon="@Icons.Custom.Brands.Google" />
<MudIcon Icon="@Icons.Custom.Brands.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 🗙