Avatar - MudBlazor

Letter avatars

A

B

AB

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

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

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

Variants

With the Rounded and Square prop 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>