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 🗙