Icon Button - MudBlazor

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>