List avatars and text

If your list items have primary and secondary text, using an icon on its own can be less visually appealing than with an avatar surrounding the icon. It fills the space within the list item better.

How to do it...

Let's say that you have four categories of messages that can be displayed by your app. To access a given category, the user clicks on one of the list items. To help the user understand the categories, you'll use icons. And to make the icons stand out against the primary and secondary text of the list item, you'll wrap it with an Avatar component. Here's the code:

import React, { useState } from 'react';
import clsx from 'clsx';

import Avatar from '...