Avatar - MudBlazor

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

<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.

<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.

<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

<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

<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>