How to use Material UI icons in 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="https://fonts.googleapis.com/icon?family=Material+Icons" />

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


 npm install --save @material-ui/icons

or

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.