MudBlazor - Blazor Component Library

API

<MudIconButton>

Simple Icon Buttons

With the library's 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>

Variant

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

<MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Outlined" Color="Color.Primary" Size="Size.Small" />
<MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Outlined" Color="Color.Primary" Size="Size.Medium"/>
<MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Outlined" Color="Color.Primary" Size="Size.Large" />
<MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Filled" Color="Color.Primary" Size="Size.Large" />
<MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Filled" Color="Color.Primary" Size="Size.Medium" />
<MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Filled" Color="Color.Primary" Size="Size.Small" />