How to use Material UI's Avatar component

Key takeaways:

• An Avatar is a visual representation of a user or entity, typically used for profile images or icons in web applications.

• The Avatar component in Material UI can display images, letters, or icons. Each type is customizable with attributes like src, bgcolor, and icon.

• The size of an Avatar can be controlled using the sx property, with attributes like height and width to define custom dimensions.

• Avatars can have different shapes, such as square and rounded, defined using the variant property.

• The AvatarGroup component allows displaying a group of avatars, with a maximum limit and the ability to show a count for the remaining avatars.

• A green badge can be added to an Avatar to indicate status, using a custom StyledBadge component with positioning and overlap settings.

The Avatar component

Avatar is a React component provided by Material UI that displays user avatars. It can display images, letters, and icons for user entities within an application. In this Answer, we will look into Material UI's Avatar component, its types, and customization in a React application.

Note: Please makes sure to install Material UI version 5 in your systems as we will be using it in the Answer.

Avatar types

There are three different types of avatars, namely, letter, image, and icon. Below we can see each avatar type along with its code:

On clicking the "Run" button, we can see the three types of avatars that we can create using the Avatar component. The explanation of the above code is given below:

• Line 2: We import the Avatar component from the @mui/material/Avatar.

• Line 9: We define the Avatar component with an image in it using theThis is the text that appears if the image is not displayed on the screen. src attribute. We can pass the image URL or the image path in the src attribute. The alt text is displayed when the image cannot render on the screen.

• Line 10: We define the Avatar component with a letter H in it. To give color to the Avatar component, we can use the style attribute sx and give a background color using the bgcolor attribute.

• Lines 11–13: We define the Avatar component with an icon. We have used the Material UI's icon AssignmentIcon.

How to change MUI avatar size

Avatar components are customizable. We can change the size of the image by defining its height and width. In the code below, we can see the Avatar component with three different sizes.

Code explanation

• Line 9: We define the Avatar component and set their size using the height and width attribute provided in the sx property.

• Line 10: We define the Avatar component and set its height and width to 50 pixels.

• Line 11: We define the Avatar component and set the height and width to 70 pixels.

Avatar variants

We can change the shape of the Avatar component to square and rounded. The code example is given below.

Code explanation

• Line 9: We define the Avatar component and set its variant property to square. This avatar is a letter avatar, as we have passed H inside the component.

• Line 12: We define the Avatar component and set its variant property to rounded. This avatar is an icon avatar, as we have defined an Icon component inside the Avatar component.

Grouped avatars

We can group multiple avatars and set the maximum number of avatars to be displayed on the screen. The rest of the avatars are not shown. Rather, the total count of the avatars that are not displayed is shown. A code example to show grouped avatars is shown below:

Code explanation

• Line 3: We import AvatarGroup from @mui/material/AvatarGroup.

• Line 9: We define the AvatarGroup component and set its max property to 3. The max property will show 3 avatars, but one will contain the count of the avatars that are not displayed.

• Lines 9–15: We wrap the Avatar components in the AvatarGroup component that applies the AvatarGroup properties to the Avatar components.

Total avatars

Material UI allows us to define the total number of avatars using the AvatarGroup. Below, we can see an example that shows how we can use the AvatarGroup component's total property:

Code explanation

• Line 9: We define the AvatarGroup component and set the total property to 24. Five avatars in total will be shown, out of which one will contain the remaining count of the avatars that are not displayed. In our case, the remaining count will be 20.

• Lines 9–14: We wrap the Avatar components in the AvatarGroup component to apply its effect.

Note: At maximum, we can display five avatars at a time, out of which one is used to show the total number of avatars.

Green badge

The green badge is a small and filled green circle that we can show on the avatar. Let's see how we can add it to the Avatar component.

On clicking the "Run" button, we can see the green badge on the Avatar component. The code explanation is given below:

Code explanation

• Lines 7–34: We create the StyledBadge styling component that contains the styling to create a green badge on the Avatar component.

• Lines 39–45: We define the StyledBadge component and pass in the Avatar component on which the green badge will be displayed. We can use the anchorOrigin to set the placement of the vertical and horizontal attributes to "top"/"bottom" and "left"/"right" respectively. We have to pass the overlap attribute with a circular value to align the badge on top of the avatar.

Conclusion

The Avatar component is versatile and user-friendly for creating visually appealing and personalized avatars. With the ability to display images, icons, or letters, it allows user identification and adds a touch of modernization to various applications.