Usage
Basic avatars, normally used to display text or numbers.MudAvatar
can be colored with the Color
property.
M
U
D
<MudAvatar Color="Color.Primary">M</MudAvatar> <MudAvatar Color="Color.Secondary">U</MudAvatar> <MudAvatar Color="Color.Tertiary">D</MudAvatar>
Outlined
By default, the avatar is filled but can be changed with the Variant
property.
M
U
D
<MudAvatar Color="Color.Info" Variant="Variant.Outlined">M</MudAvatar> <MudAvatar Color="Color.Success" Variant="Variant.Outlined">U</MudAvatar> <MudAvatar Color="Color.Warning" Variant="Variant.Outlined">D</MudAvatar>
Icons
To create an icon avatar, just add an MudIcon
inside it.
<MudAvatar Color="Color.Warning" Variant="Variant.Filled"> <MudIcon Color="Color.Dark" Icon="@Icons.Custom.Uncategorized.Radioactive" Size="Size.Large" /> </MudAvatar> <MudAvatar Color="Color.Primary" Variant="Variant.Outlined"> <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" /> </MudAvatar> <MudAvatar Color="Color.Secondary" Variant="Variant.Outlined"> <MudIcon Icon="@Icons.Material.Filled.FormatListNumbered" /> </MudAvatar>