client/src/components/ConversationAvatar.js

import React from 'react'
import { Avatar } from '@material-ui/core'
import { PersonRounded } from '@material-ui/icons'

export default function ConversationAvatar(props) {
  return <Avatar>
    {props.displayName ? props.displayName[0].toUpperCase() : <PersonRounded />}
  </Avatar>
}