Material UI — Icons and Lists

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 icons and lists with Material UI.

Icon Color

We can change the color of icons.

To do that, we add the color prop to the icon.

For example, we can write:

import React from "react";
import red from "@material-ui/core/colors/red";
import MailIcon from "@material-ui/icons/Mail";

export default function App() {
  return (
    <div>
      <MailIcon />
      <MailIcon color="primary" />
      <MailIcon color="secondary" />
      <MailIcon color="action" />
      <MailIcon color="disabled" />
      <MailIcon style={{ color: red[500] }} />
    </div>
  );
}

to add icons with different colors.

The color prop lets us change the color style of the icon.

We can also change it with the style prop.

We set the color by import the color from Material UI.

Size

To change the size of an icon, we can change the fontSize prop.

For example, we can write:

import React from "react";
import MailIcon from "@material-ui/icons/Mail";

export default function App() {
  return (
    <div>
      <MailIcon fontSize="small" />
      <MailIcon />
      <MailIcon fontSize="large" />
      <MailIcon style={{ fontSize: 50 }} />
    </div>
  );
}

The fontSize can be set to small or large .

To set a custom size, we can also set the style prop with the fontSize of our choice.

Font icons

To add our own icons from the Material Icons CDN, we can add a link tag to index.html :

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Once we did that, we can use the Icon component:

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

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

We can also change the color with this component.

For example, we can write:

import React from "react";
import green from "@material-ui/core/colors/green";
import Icon from "@material-ui/core/Icon";

export default function App() {
  return (
    <div>
      <Icon>star</Icon>
      <Icon color="primary">star</Icon>
      <Icon color="secondary">star</Icon>
      <Icon style={{ color: green[500] }}>star</Icon>
      <Icon fontSize="small">star</Icon>
    </div>
  );
}

We have the name of the icon in between the tags.

And we set the color prop to change the color.

Font Awesome

In addition to Material Icons, we can add Font Awesome icons.

We can use version 5 without signing up.

We just have to add:

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"
/>
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.13.1/css/v4-shims.css"
/>

Then we can write:

import React from "react";
import green from "@material-ui/core/colors/green";
import Icon from "@material-ui/core/Icon";

export default function App() {
  return (
    <div>
      <Icon className="fa fa-close" />
      <Icon className="fa fa-close" color="primary" />
      <Icon className="fa fa-close" color="secondary" />
      <Icon className="fa fa-close" style={{ color: green[500] }} />
      <Icon className="fa fa-close" fontSize="small" />
    </div>
  );
}

to add our Font Awesome icons.

The props work with Font Awesome icons.

Lists

Lists are continuous containers of text and images.

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Divider from "@material-ui/core/Divider";
import InboxIcon from "@material-ui/icons/Inbox";
import DraftsIcon from "@material-ui/icons/Drafts";

export default function App() {
  return (
    <div>
      <List component="nav">
        <ListItem button>
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="home" />
        </ListItem>
        <ListItem button>
          <ListItemIcon>
            <DraftsIcon />
          </ListItemIcon>
          <ListItemText primary="mail" />
        </ListItem>
      </List>
      <Divider />
      <List component="nav">
        <ListItem button>
          <ListItemText primary="logout" />
        </ListItem>
      </List>
    </div>
  );
}

to add a list with the List component.

To add items inside the list, we can add one or moreListItem components inside it.

The button prop will make them render as buttons.

List items can have icons beside it.

Also, we can add Dividers to add dividers.

Nested List

Lists can be nested.

To do that, we add a Collapse component within our List .

For instance, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Collapse from "@material-ui/core/Collapse";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import DraftsIcon from "@material-ui/icons/Drafts";

export default function App() {
  const [open, setOpen] = React.useState(true);

  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <div>
      <List component="nav">
        <ListItem button>
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="home" />
        </ListItem>
        <ListItem button onClick={handleClick}>
          <ListItemIcon>
            <DraftsIcon />
          </ListItemIcon>
          <ListItemText primary="mail" />
        </ListItem>
        <Collapse in={open} timeout="auto" unmountOnExit>
          <List component="div" disablePadding>
            <ListItem button>
              <ListItemText primary="important mail" />
            </ListItem>
          </List>
        </Collapse>
      </List>
    </div>
  );
}

to add a Collapse component into our List .

The in prop controls when the nested list is expanded.

unmountOnExit will remove the nested list from the DOM.

We control whether it’s opened or not with the 2nd ListItem .

The handleClick component toggles the open state.

Conclusion

We can add icons from various sources with Material UI.

Also, we can add lists to display items vertically.