Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates


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

Icon Button

Similar to MudButton but with icons. For guidance and suggestions go to Icons.

See Icon Button API for parameter documentation.

Simple Icon Buttons

With the librarys preloaded icons. Check out our icon page to find out what you can use.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudIconButton Icon="@Icons.Material.Filled.Delete"></MudIconButton>
<MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Primary"></MudIconButton>
<MudIconButton Icon="@Icons.Material.Filled.Favorite" Color="Color.Secondary"></MudIconButton>
<MudIconButton Icon="@Icons.Material.Filled.Share" Disabled="true"></MudIconButton>

Using font icons

In this example we are passing down Font Awesome icon classes instead.

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

<MudIconButton Icon="fas fa-atom" Color="Color.Error"></MudIconButton>
<MudIconButton Icon="fas fa-fighter-jet" Color="Color.Dark"></MudIconButton>
<MudIconButton Icon="fas fa-globe-europe" Color="Color.Tertiary"></MudIconButton>
<MudIconButton Icon="fas fa-bug" Disabled="true"></MudIconButton>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙