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