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

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" aria-label="delete"></MudIconButton>
<MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Primary" aria-label="github"></MudIconButton>
<MudIconButton Icon="@Icons.Material.Filled.Favorite" Color="Color.Secondary" aria-label="add to favorite"></MudIconButton>
<MudIconButton Icon="@Icons.Material.Filled.Share" Disabled="true" aria-label="share"></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>

Button style

If preferred, it's possible to apply the same style of a text button using the Variant parameter.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudContainer>
    <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Small" Class="ma-2" />
    <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Medium" Class="ma-2" />
    <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Large" Class="ma-2" />
</MudContainer>
<MudContainer>
    <MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Outlined" Color="Color.Primary" Size="Size.Small" Class="ma-2" />
    <MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Outlined" Color="Color.Primary" Size="Size.Medium" Class="ma-2" />
    <MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Outlined" Color="Color.Primary" Size="Size.Large" Class="ma-2" />
</MudContainer>
<MudContainer>
    <MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Filled" Color="Color.Primary" Size="Size.Small" Class="ma-2" />
    <MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Filled" Color="Color.Primary" Size="Size.Medium" Class="ma-2" />
    <MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Filled" Color="Color.Primary" Size="Size.Large" Class="ma-2" />
</MudContainer>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙