MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Avatar

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

See Avatar API for parameter documentation.

Letter avatars

By default, the variant has the value Variant.Filled with a background of the defined color. To have a border with this same color and a white background, the variant takes the value Variant.Outlined.

A
B
AB
A
B
AB
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudAvatar Variant="Variant.Filled">A</MudAvatar>
<MudAvatar Color="Color.Primary">B</MudAvatar>
<MudAvatar Color="Color.Secondary">AB</MudAvatar>
<MudAvatar Variant="Variant.Outlined">A</MudAvatar>
<MudAvatar Variant="Variant.Outlined" Color="Color.Primary">B</MudAvatar>
<MudAvatar Variant="Variant.Outlined" Color="Color.Secondary">AB</MudAvatar>

Icon avatars

To create an icon avatar, just add an icon as child.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudAvatar Variant="Variant.Filled">
    <MudIcon Icon="@Icons.Material.Filled.AccessAlarm" />
</MudAvatar>
<MudAvatar Color="Color.Primary" Variant="Variant.Filled">
    <MudIcon Icon="@Icons.Material.Filled.Folder" />
</MudAvatar>
<MudAvatar Color="Color.Secondary" Variant="Variant.Filled">
    <MudIcon Icon="@Icons.Material.Filled.FormatListNumbered" />
</MudAvatar>
<MudAvatar Variant="Variant.Outlined">
    <MudIcon Icon="@Icons.Material.Filled.AccessAlarm" />
</MudAvatar>
<MudAvatar Color="Color.Primary" Variant="Variant.Outlined">
    <MudIcon Icon="@Icons.Material.Filled.Folder" />
</MudAvatar>
<MudAvatar Color="Color.Secondary" Variant="Variant.Outlined">
    <MudIcon Icon="@Icons.Material.Filled.FormatListNumbered" />
</MudAvatar>

Image avatars

Specify a link to image with the Image prop to show it in the avatar.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudAvatar Image="_content/MudBlazor.Docs/images/mony.png" />
<MudAvatar Image="_content/MudBlazor.Docs/images/toiletvisit.png" />

Sizes

You can change the size with the pre-defined Size prop or change the Width and Height in CSS.

A
A
A
A
A
A
A
A
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudContainer>
    <MudAvatar Image="_content/MudBlazor.Docs/images/mony.png" Size="Size.Small" Class="ma-2" />
    <MudAvatar Image="_content/MudBlazor.Docs/images/mony.png" Size="Size.Medium" Class="ma-2" />
    <MudAvatar Image="_content/MudBlazor.Docs/images/mony.png" Size="Size.Large" Class="ma-2" />
    <MudAvatar Image="_content/MudBlazor.Docs/images/mony.png" Style="height:70px; width:70px;" Class="ma-2" />
</MudContainer>
<MudContainer>
    <MudAvatar Size="Size.Small" Color="Color.Primary" Class="ma-2">A</MudAvatar>
    <MudAvatar Size="Size.Medium" Color="Color.Primary" Class="ma-2">A</MudAvatar>
    <MudAvatar Size="Size.Large" Color="Color.Primary" Class="ma-2">A</MudAvatar>
    <MudAvatar Style="height:70px; width:70px; font-size:2rem;" Color="Color.Primary" Class="ma-2">A</MudAvatar>
</MudContainer>
<MudContainer>
    <MudAvatar Size="Size.Small" Color="Color.Primary" Class="ma-2" Variant="Variant.Outlined">A</MudAvatar>
    <MudAvatar Size="Size.Medium" Color="Color.Primary" Class="ma-2" Variant="Variant.Outlined">A</MudAvatar>
    <MudAvatar Size="Size.Large" Color="Color.Primary" Class="ma-2" Variant="Variant.Outlined">A</MudAvatar>
    <MudAvatar Style="height:70px; width:70px; font-size:2rem;" Color="Color.Primary" Class="ma-2" Variant="Variant.Outlined">A</MudAvatar>
</MudContainer>

Variants

With the Rounded and Square props, you can change the border radius.

N
N
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudAvatar Square="true">
    N
</MudAvatar>
<MudAvatar Rounded="true" Color="Color.Secondary">
    <MudIcon Icon="@Icons.Material.Filled.FormatListNumbered" />
</MudAvatar>
<MudAvatar Color="Color.Primary">
    <MudIcon Icon="@Icons.Material.Filled.Comment" />
</MudAvatar>
<MudAvatar Square="true" Variant="Variant.Outlined">
    N
</MudAvatar>
<MudAvatar Rounded="true" Color="Color.Secondary"  Variant="Variant.Outlined">
    <MudIcon Icon="@Icons.Material.Filled.FormatListNumbered" />
</MudAvatar>
<MudAvatar Color="Color.Primary" Variant="Variant.Outlined">
    <MudIcon Icon="@Icons.Material.Filled.Comment" />
</MudAvatar>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙