Mudblazor

Community Support

Discord

Gitter

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

Gitter

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

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

Icon avatars

To create a Icon avatar just add an icon as childen.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudAvatar>
    <MudIcon Icon="@Icons.Material.Filled.AccessAlarm"/>
</MudAvatar>
<MudAvatar Color="Color.Primary">
    <MudIcon Icon="@Icons.Material.Filled.Folder" />
</MudAvatar>
<MudAvatar Color="Color.Secondary">
    <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
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>

Variants

With the Rounded and Square prop you can change the border radius.

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>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙