Material-UI Avatar Examples with Styled-components

In the following examples you will see how to use Material-UI's Avatar component, along with its close friend AvatarGroup.

These examples are a bit different than the official documentation because we are implementing the styling overrides with styled-components rather than the standard Material-UI styling approaches.

Why styled-components? Well, Material-UI happens to be converting everything to a styled-components approach. This means that soon, withStyles and makeStyles will be a thing of the past (as mentioned on this issue).

Now, onto Avatar examples.

Avatar Image

The standard Material-UI Avatar component takes a src prop which plugs into the Avatar's image src prop. If an image fails to load, it falls back to the children of the component. The alt prop plugs into the image alt prop.

Avatar Letter

To render a letter inside the Avatar component, simply add the letters as children of the component. You can also pass anything else as children, for example icons, numbers, etc. The children will only be used if an image is not loaded with the src attribute.

Avatar With Text

To render an Avatar alongside text, simply create a Flexbox component with align-items: center, and add some margin-right onto the Avatar. Inside of your Flexbox, add a Typography component alongside the Avatar to create a label. See the above example for how we accomplish this.

Avatar Color

To change the color of the Avatar component, you will need to override the styles of the component and set the background-color. See above examples for how we accomplish this with styled-components.

Avatar Sizes

To set the size of the Avatar component, you will need to override the root styles of the component and set the standard CSS width and height to whatever you'd like the size of the Avatar to be. In our above example, we create a dynamic component to accept a size prop and then use the Material-UI's spacing function to generate the pixel values. This is optional, you can just use standard pixel values here if you'd like.

Avatar Border

To style the Avatar's border, simply set the standard CSS border attribute on the root Avatar element. In the above example, we do this by wrapping the Avatar with a styled-component.

Avatar Fallback

If an image cannot be loaded, the Avatar will fall back to the children contents. If no children are provided, it will fallback to the first letter of the alt attribute.

Avatar Group

The AvatarGroup component can be used to wrap multiple Avatars and provide a condensed view of a max number of Avatars. Using the max prop, you can specify how many Avatars you want to show. See the above example for more information.

Avatar Button

You can wrap an Avatar component in an IconButton to get Button functionality. See the above example.

Official Docs for Material-UI Avatar

Avatar API