Avatar

The Avatar component is a visual element, such as an image, letter(s) or icon, used to represent a user, label or tool.

Name	Type	Description
source	string	Defines the path to the image.
altText	string	Defines the alt text attribute for the image.
sourceSet	string	Defines the srcSet attribute for the image.

Name	Type	Default	Description
variant	circular rounded square string	circular	Specifies the shape of the avatar.

Subcomponents

The Avatar component has two subcomponents that allow the addition of either an icon or typography to the avatar component.

An icon to use on the avatar.

For further details, see the Icon component.

Name	Type	Default	Description
color	inherit primary secondary action disabled error string	inherit	Defines the color of the icon.
size	inherit small medium large	medium	Defines the size of the icon.
viewBox	0 0 25 25		Defines the size of the view box that displays the icon.
fill	hex #ffffff rgb 5,5,5		The fill color of the icon.
stroke	hex #ffffff rgb 5,5,5		The stroke color of the icon.

The typography to use on the avatar.

For further details, see the Typography component.

Name	Type	Default	Description
text	string		Defines the text to display in the text field.
variant	h1 h2 h3 h4 h5 h6 subtitle1 subtitle2 body1 body2 caption button overline inherit string	inherit	Defines the type of typography to display.
color	initial inherit primary secondary textPrimary textSecondary error string	inherit	Defines the color of the typography.
gutterBottom	bool	false	Enables a gutter at the bottom of the typography component.

For more detail on the Avatar component, see the MUI developer docs.