MudBlazor - Blazor Component Library

Icons

See the full list of all icons that comes preloaded here: MudBlazor Icons

Usage

The MudIcon component shows the specified icon with the chosen style. You can use the Title attribute to improve accessibility with screen readers and show a tooltip on mouse over.

<MudIcon Icon="@Icons.Material.Filled.Favorite" Title="Favorite" />
<MudIcon Icon="@Icons.Material.Filled.Api" Title="API" />
<MudIcon Icon="@Icons.Material.Filled.AddCircle" Title="Add" />
<MudIcon Icon="@Icons.Custom.Brands.GitHub" Title="GitHub" />
<MudIcon Icon="@Icons.Custom.Brands.Google" Title="Google" />
<MudIcon Icon="@Icons.Custom.Brands.Reddit" Title="Reddit" />

Color

<MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Default" />
<MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Primary" />
<MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Secondary" />
<MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Success" />
<MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Info" />
<MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Warning" />
<MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Error" />
<MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Color="Color.Dark" />

Size

<MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Size="Size.Small" />
<MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" />
<MudIcon Icon="@Icons.Custom.Uncategorized.Radioactive" Size="Size.Large" />

Material Variants

Material icons that comes loaded with MudBlazor by default is available in Filled, Outlined, Rounded, Sharp and TwoToned.

<MudIcon Icon="@Icons.Material.Filled.ThumbUp" Style="font-size: 4rem;" />
<MudIcon Icon="@Icons.Material.Outlined.ThumbUp"  Style="font-size: 4rem;" />
<MudIcon Icon="@Icons.Material.Rounded.ThumbUp"  Style="font-size: 4rem;" />
<MudIcon Icon="@Icons.Material.Sharp.ThumbUp"  Style="font-size: 4rem;" />
<MudIcon Icon="@Icons.Material.TwoTone.ThumbUp"  Style="font-size: 4rem;" />

Font Icons

The MudIcon component will display any icon font that supports ligatures.
For example, you can use Font Awesome.

<link href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" rel="stylesheet">

<MudIcon Icon="fab fa-internet-explorer" Color="Color.Primary" />
<MudIcon Icon="fab fa-angellist" Color="Color.Secondary" />
<MudIcon Icon="fas fa-dragon" Color="Color.Success" />
<MudIcon Icon="fas fa-toilet-paper-slash" />
<MudIcon Icon="fas fa-toilet-paper-slash" Size="Size.Small" />
<MudIcon Icon="fas fa-toilet-paper-slash" Size="Size.Large" />

Change Icon By Programmatically

The icon parameter of the other components are determined as strings. So changing the icon is as easy as assigning a new string.

<MudIcon Icon="@selectedIcon" Color="Color.Primary" />
<MudButton Variant="Variant.Filled" OnClick="ChangeIcon" DisableElevation="true" Size="Size.Small">Change Icon</MudButton>

@code{

    private string selectedIcon = Icons.Custom.Brands.MudBlazor;

    private void ChangeIcon()
    {
        if (selectedIcon == Icons.Custom.Brands.MudBlazor)
        {
            selectedIcon = Icons.Custom.Brands.GitHub;
        }
        else
        {
            selectedIcon = Icons.Custom.Brands.MudBlazor;
        }
    }
}