React/ReactJS: Material UI Icons

Material UI is one of the most popular ReactJS component libraries. The components make use of Google’s Material Design. Material UI is an MIT-licensed open source project.

In this tutorial, we will learn how to use Material UI Icons in a React application. We install the @material-ui/icons npm package which has 1000+ icons converted from Material Icons, listed here:

https://material-ui.com/components/material-icons/

We first install Material UI. These are React components implemented from Google's Material Design.

npm install @material-ui/core

Next install @material-ui/icons.

npm install @material-ui/icons

Material UI Icons in React

Below we illustrate how to use a Material UI Icon in React. We create a simple functional component which returns just the desired icon. Say we choose to use the below Home icon.

We import it into our code from @material-ui/icons. We then invoke it like any normal component with opening and closing tags.

import React from 'react';
import Home from '@material-ui/icons/Home';
const Icon = () => {
    return (
      <div>
      	<Home></Home>
      </div>
    );
}
export default Icon;

We see the Home icon rendered as follows:

Now if there are many icons to use, there is a better way to import them.

import React from 'react';
import { Home, LocationOn, Notifications } from '@material-ui/icons';
const Icons = () => {
    return (
      <div>
      	<Home></Home>
      	<LocationOn></LocationOn>
      	<Notifications></Notifications>
      </div>
    );
}
export default Icons;

Notes