我在我的React项目中使用了material-ui和material-ui图标。我是反应新手。

有人可以指导我如何制作带有标签的图标吗？我想将标签放在图标的正下方。例如，在“主页图标”下编写的文本“主页”。我正在尝试实现类似于microsoft团队在边栏导航（网络版本）中实现的功能

我阅读了API，发现其中有一个prop组件。但是，无论何时使用，我都会尝试进行实验。

请访问此链接https://codesandbox.io/s/material-demo-forked-nohsm?file=/demo.js，我得到以下结果：

这是我的代码

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Drawer from "@material-ui/core/Drawer";
import { makeStyles,useTheme } from "@material-ui/core/styles";
import NotificationsIcon from "@material-ui/icons/Notifications";
import { ListItem,Toolbar } from "@material-ui/core";
import List from "@material-ui/core/List";
import ListItemIcon from "@material-ui/core/ListItemIcon";

const drawerWidth = 72;

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex"
  },drawer: {
    width: drawerWidth,alignItems: "center",justifyContent: "center",paddingTop: theme.spacing(5)
  },drawerPaper: {
    width: drawerWidth
  }
}));

export default function Demo() {
  const classes = useStyles();

  return (
    <div classname={classes.root}>
      <AppBar position="fixed" color="primary">
        <Toolbar></Toolbar>
      </AppBar>
      <Drawer
        classes={{
          paper: classes.drawerPaper
        }}
        variant="permanent"
        classname={classes.drawer}
      >
        {/* <NotificationsIcon size="large" /> */}

        <List>
          <ListItem>
            <ListItemIcon>
              <NotificationsIcon color="primary" fontSize="large" />
              activity
            </ListItemIcon>
          </ListItem>
        </List>
      </Drawer>
    </div>
  );
}

我想与此类似：

请帮助。谢谢。