Avatar

The component is typically used to display circular user profile pictures, icons or text.

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>

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.8

An error has occurred. This application may no longer respond until reloaded. Reload 🗙