How to use Material UI icons in React Material UI

#react #material-ui

Last updated on Jun 14, 2021 by Suraj Sharma

In this tutorial, you will learn how you can import and use material-ui icons in React material UI

Getting Started

First, To use the material-ui icons in React we have to import the material icons font in the index.html file

<link rel="stylesheet" href="" />

Then, install the @material-ui/icons via npm or yarn

 npm install --save @material-ui/icons


yarn add @material-ui/icons

Import Icons in React components

Now, we are going to import few material-ui icons in our react component <App /> just like any other react components.

// App.jsx

import React from 'react';

import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';

const App = () => {
  return (
      <AddIcon />
      <RemoveIcon />

export default App;

To find the complete list of material-ui icons, you can visit Material UI Icons

Related Solutions

Rate this post

Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.