Labels in Material UI Icons

Question

I'm using the material-ui and material-ui icons for my react project. I'm in new in react.

Can someone please guide me how to make icons with label? I want to place the label just below the icon. For example, text "Home" written under "Home Icons". I'm trying to implement something similar to what Microsoft Team has implemented in sidebar navigation (web version)

I read the API, and I found there's a prop Component. I try to experiment, however, whenever I'm using it icons disappear.

Please visit this link https://codesandbox.io/s/material-demo-forked-nohsm?file=/demo.js I'm getting this result:

Here's my code

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>
  );
}

I want to similar to this one:

Please help. Thank you.

Answer 1

sometimes it's not MUI at all but pure CSS. MUI already provides icon and label, you just have to work CSS a bit, this one may work just customizing ListItemIcon styles with flex properties (see listItemIcon class rules):

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex"
  },
  listItemIcon: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column'
  },
  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 className={classes.listItemIcon}>
              <NotificationsIcon color="primary" fontSize="large" />
              Activity
            </ListItemIcon>
          </ListItem>
        </List>
      </Drawer>
    </div>
  );
}

When MUI does not provide default styles for it, you can always use flex-box

Answer 2

I tried this way, and it worked. Need to wrap the Icons in a div and it will work.

<List>
          <ListItem style={{ textAlign: "center" }}>
            <div>
              <NotificationsIcon color="primary" fontSize="large" />
              Activity
            </div>
          </ListItem>
          <ListItem style={{ textAlign: "center" }}>
            <div>
              <NotificationsIcon color="primary" fontSize="large" />
              Activity
            </div>
          </ListItem>
        </List>

https://codesandbox.io/s/material-demo-forked-b73ds?file=/demo.js