MudBlazor

Icon Button

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

Simple Icon Buttons

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

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

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

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