Material UI — Dividers and Icons

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add dividers and icons with Material UI.

Subheader Dividers

We can have dividers with text immediately below it.

To do that, we add some styles of our own to shift the text to be flush with the dividers.

For example, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemText from "@material-ui/core/ListItemText";
import Avatar from "@material-ui/core/Avatar";
import BeachAccessIcon from "@material-ui/icons/BeachAccess";
import Divider from "@material-ui/core/Divider";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper
  },
  dividerFullWidth: {
    margin: `5px 0 0 ${theme.spacing(2)}px`
  },
  dividerInset: {
    margin: `5px 0 0 ${theme.spacing(9)}px`
  }
}));

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

  return (
    <List className={classes.root}>
      <ListItem>
        <ListItemText primary="eat" />
      </ListItem>
      <Divider component="li" />
      <li>
        <Typography
          className={classes.dividerFullWidth}
          color="textSecondary"
          display="block"
          variant="caption"
        >
          drink
        </Typography>
      </li>
      <ListItem>
        <ListItemText primary="drink" />
      </ListItem>
      <Divider component="li" variant="inset" />
      <li>
        <Typography
          className={classes.dividerInset}
          color="textSecondary"
          display="block"
          variant="caption"
        >
          Leisure
        </Typography>
      </li>
      <ListItem>
        <ListItemAvatar>
          <Avatar>
            <BeachAccessIcon />
          </Avatar>
        </ListItemAvatar>
        <ListItemText primary="walk" />
      </ListItem>
    </List>
  );
}

to add some list items with a divider below them.

And then we add text with the Typography component.

This way, we see the text with the margins.

Middle Dividers

We can add dividers that display in the middle of a container.

To add the middle divider, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import Divider from "@material-ui/core/Divider";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    maxWidth: 360
  },
  section1: {
    margin: theme.spacing(4, 2)
  },
  section2: {
    margin: theme.spacing(2)
  }
}));

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

  return (
    <div className={classes.root}>
      <div className={classes.section1}>
        <Grid container alignItems="center">
          <Grid item xs>
            <Typography gutterBottom variant="h4">
              Message
            </Typography>
          </Grid>
        </Grid>
      </div>
      <Divider variant="middle" />
      <div className={classes.section2}>
        <Typography gutterBottom variant="body1">
          hello world
        </Typography>
      </div>
      <div>
        <Button color="primary">ok</Button>
      </div>
    </div>
  );
}

We have the Divider component with the variant prop set to middle to make it display in the middle.

Then we have the styles in the makeStyles callback to move the text so that it’s flush with the divider.

Vertical Dividers

To add vertical dividers, we can use the orientation prop.

We can write:

import React from "react";
import FormatAlignLeftIcon from "@material-ui/icons/FormatAlignLeft";
import FormatBoldIcon from "@material-ui/icons/FormatBold";
import Grid from "@material-ui/core/Grid";
import Divider from "@material-ui/core/Divider";

export default function App() {
  return (
    <div>
      <Grid container alignItems="center">
        <FormatAlignLeftIcon />
        <Divider orientation="vertical" flexItem />
        <FormatBoldIcon />
      </Grid>
    </div>
  );
}

to add a vertical divider.

The orientation is set to vertical so that we can see the divider.

Icons

Material UI comes with many icons we can use.

We’ve to install the @material-ui/icons to use the icons.

To do that, we can run:

npm install @material-ui/icons

or:

yarn add @material-ui/icons

to add them to our code.

Then we can use it by importing them as follows:

import React from "react";
import DeleteIcon from "@material-ui/icons/Delete";

export default function App() {
  return (
    <div>
      <DeleteIcon />
    </div>
  );
}

We just import them by their name and we’ll see them displayed.

SvgIcon

We can add our own SVG icon if we need to embed one that isn’t found in the package.

For example, we can write:

import React from "react";
import SvgIcon from "@material-ui/core/SvgIcon";

export default function App() {
  return (
    <div>
      <SvgIcon>
        <path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1" />
        <polygon points="12 15 17 21 7 21 12 15" />
      </SvgIcon>
    </div>
  );
}

to add a computed monitor icon available from https://feathericons.com/.

Conclusion

We can customize dividers to out liking so it’s flush with our text.

Icons can be added from the @material-ui/icons package or we can use the SvgIcon package to add them ourselves.