How to use Material UI icons in React Material UI

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

• How to add a custom font in React Material UI

• How to add multiple class names in React Material UI

• How to change font family of typography in React Material UI

• How to detect dark mode theme in React Material UI