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="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 JavaScript Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.