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" />
Custom Icons
The icon parameter of <MudIcon>
, <MudButton>
and other components are just SVG strings.
So changing an icon programmatically is as easy as assigning a new string.
Also, if the icon you need is not available in MudBlazor's icon library you can just assign your own SVG.
The cube icon in this example is cube-outline
from Material Design Icons.
<MudIcon Icon="@icons[index]" Color="Color.Primary" /> <MudButton Variant="Variant.Filled" OnClick="CycleIcons" DisableElevation="true" Size="Size.Small">Cycle Icon</MudButton>
@code{ private int index = 0; private string[] icons = { Icons.Custom.Brands.MudBlazor, cube, Icons.Custom.Brands.GitHub }; private void CycleIcons() { index = (index + 1) % 3; } const string cube = @"<svg style=""width:24px;height:24px"" viewBox=""0 0 24 24""> <path fill=""currentColor"" d=""M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L6.04,7.5L12,10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z"" /> </svg>"; }