This is not really important, just a thought but would it make sense to make AvatarData take Avatar props and pass them along rather than accept avatar? My reasoning is that it seems unfortunate that there are two ways of doing things like:

<AvatarData src={src} />

and

<AvatarData avatar={<Avatar src={src} />} />

Or alternatively we could always make it so we always have to pass an avatar, either way works so there is one way of doing things.

AvatarData is a bad name for what it does and not a good abstraction. Wondering if Heading or DataHeading would be better with the following interface:

<Heading
  title="Bruno"
  subtitle="bruno@hotmail.com"
  leftElement={<UserAvatar user="{user}" />}
/>

Definitely agree!

Just to check I follow: the difference between <Avatar src={src} /> and <Avatar><img src={src} /></Avatar> is that the former shows the icon only and the former shows the icon wrapped in a circle, is that right?

The difference is: when you pass the image as a child, it does not add the MuiAvatar-img class to it so it is just an image inside of a rounded div without any style. My idea for the AvatarIcon is to make the image behaves like a MuiIcon.

Thinking better, I have no idea why I decided to use a child instead of using the AvatarIcon directly like:

// Instead of
<AvatarIcon>
   <img src={avatarSrc} alt="" />
</AvatarIcon>

// it should be
<AvatarIcon src={avatarSrc} />

Ahhh ok yeah that makes sense!

It looks like before the avatars on the group page would overlap a little but now they touch but do not look like they are overlapping. Was that intentional? I think the overlap looks kinda nice.

Good catch! I'm fixing this.