SlideShare a Scribd company logo
How to Use Material UI (MUI)
Icons in React
Whether it’s about a simple landing page, an e-commerce app platform or
your company’s internal dashboard, using a library of pre-made icons and
components is highly beneficial. There are many other icon libraries out there
which can ease your work but one of the largest and the most popular one is the
Material UI (or recently named MUI) icon library.
If you are new to Material UI library, it provides you with a robust,
customizable, accessible, and advanced components, enabling you to build your
own design system and develop React applications faster. That includes a huge
list of Material icons.
Material UI icons or MUI currently have over 1900 icons based on Material
Design guidelines set by Google. So, let’s see how to use them in a React
application. Let’s begin!
Getting started with Material Icons in a
React app
Let’s get our hands dirty with some actual coding where our React app uses
the Material Icons (MUI) package.
What we will be making?
Our demo will be a very basic one. Basically, a component where we display
three of the common items found in a typical webpage.
As you can see, we have three items:
1. The “More” dropdown item.
2. The “Menu” hamburger item.
3. The “Cart” icon.
Here we are using the Material Icons alongside the texts.
Step 1: Start a New React Project
Make sure you have Node.js installed on your system and then run the following
commands:
npx create-react-app mui-demo
cd mui-demo
npm start
This will bootstrap a new React application and run the default app
on http://localhost:3000/ in your default browser thanks to the Create React
App tool.
Step 2: Install Material UI(MUI) package
Before we start adding these icons, we need the core MUI package because all
these icons uses the MUI SvgIcon component to render the SVG path for each
icon. For each SVG icon, we export the respective React component from
the @mui/icons-material package.
Run the following command from your terminal:
npm install @mui/material @emotion/react @emotion/styled
Or if you are using Yarn:
yarn add @mui/material @emotion/react @emotion/styled
Step 3: Install Material Icons Package
Now we can install the icon package with the following command
// with npm
npm install @mui/icons-material
// with yarn
yarn add @mui/icons-material
Step 4: Start Using MUI Icons!
Simply head over to the app.js file and delete all the existing code. We will be
writing everything from scratch.
Let’s start with the responsive Grid layout component which will contain all our
elements inside. This is useful for different screen sizes and orientations which
uses CSS Flexbox under-the-hood.
So under the return() method, we should have <Grid> component. This can have
its props or custom styles attached to it:
<Grid container></Grid>
Now we need six new child <Grid> components to hold our icons with the text
labels (one for each of the three). Make sure you pass in the item prop to each of
them.
<Grid item xs={1}></Grid>
Within each of these, we have a <Typography> component holding the text label
<Typography>More</Typography>
As for the actual MUI icon component we will create a duplicate
child <Grid> item but the only thing changed here will be the actual icon
component name. By now we should have the following code:
import * as React from "react";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
export default function App() {
return (
<Grid container sx={{ color: "text.primary" }} >
<Grid item xs={1}>
<Typography>More</Typography>
</Grid>
</Grid>
);
}
Let’s see how to find icons we need from the MUI website:
1. Head over to the Material Icons webpage.
2. Here you will see a list of icons:
As you can see it has 5 types of icons: Filled, Outlined, Rounded, two tone, and
Sharp. For this demo we only want to use the Outlined one.
3. Now let’s search for the four icons by name let’s say the menu icon:
4. If you click on the selected icon, you will be greeted with the following
popup:
Here you get the icon component’s name along with some variants.
5. Finally, let’s copy the import statement you see in the modal above so that
we can use it on our React application.
Inside the second child <Grid> component we can now safely add the selected
icon component as:
import MenuIcon from "@mui/icons-material/Menu";
<Grid item xs={1}>
<MenuIcon />
</Grid>
Other icon components used for the above demo
are: ExpandMoreOutlinedIcon and ShoppingCartIcon.
If you implemented the above steps successfully, you should have the following
code:
import * as React from "react";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import ExpandMoreOutlinedIcon from "@mui/icons-material/ExpandMoreOutlined";
import MenuIcon from "@mui/icons-material/Menu";
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
export default function SvgMaterialIcons() {
return (
<Grid container sx={{ color: "text.primary" }} style={{ margin: "10rem" }}>
<Grid item xs={1}>
<Typography>More</Typography>
</Grid>
<Grid item xs={1}>
<ExpandMoreOutlinedIcon />
</Grid>
<Grid item xs={1}>
<Typography>Menu</Typography>
</Grid>
<Grid item xs={1}>
<MenuIcon />
</Grid>
<Grid item xs={1}>
<Typography>Cart</Typography>
</Grid>
<Grid item xs={1}>
<ShoppingCartIcon />
</Grid>
</Grid>
);
}
And that should do it! If you followed the above steps carefully, you could see in
your browser that React is rendering the corresponding MUI icons as needed.
One of the benefits of using Material UI icons other than the fact that it’s huge
with multiple variants is that it is supported by all major platforms, as well as
browsers and if you ever get stuck you can definitely check out their GitHub
repo. If that’s not enough, they have an entire page dedicated to support.
So go ahead and try to use some other icons available in your project. Hope this
short guide helped.
Or you can also browse some of our pre-built react templates that are fully-
responsive, interactive, and are loaded with all the important Material UI Icons.
Source: https://blog.wrappixel.com/how-to-use-mui-icons-in-react/
**********

More Related Content

Similar to How to Use Material UI (MUI) Icons in React

04 objective-c session 4
04  objective-c session 404  objective-c session 4
04 objective-c session 4
Amr Elghadban (AmrAngry)
 
A Guide to Creating a Great Custom Tailwind Sidebar
A Guide to Creating a Great Custom Tailwind SidebarA Guide to Creating a Great Custom Tailwind Sidebar
A Guide to Creating a Great Custom Tailwind Sidebar
RonDosh
 
Building Extensible RIAs with MEF
Building Extensible RIAs with MEFBuilding Extensible RIAs with MEF
Building Extensible RIAs with MEF
Glenn Block
 
MPointInc_AndroidSDK_Documentation
MPointInc_AndroidSDK_DocumentationMPointInc_AndroidSDK_Documentation
MPointInc_AndroidSDK_Documentation
Xin Shao
 
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Ontico
 
Introduction to Bitreactive
Introduction to BitreactiveIntroduction to Bitreactive
Introduction to Bitreactive
Ghassen Chaieb
 
Software engineering modeling lab lectures
Software engineering modeling lab lecturesSoftware engineering modeling lab lectures
Software engineering modeling lab lectures
marwaeng
 
Appear IQ - Tutorials Backbone.js
Appear IQ - Tutorials Backbone.jsAppear IQ - Tutorials Backbone.js
Appear IQ - Tutorials Backbone.js
Appear
 
Web works hol
Web works holWeb works hol
Web works hol
momoahmedabad
 
Cis 247 all i labs
Cis 247 all i labsCis 247 all i labs
Cis 247 all i labs
ccis224477
 
Model View Presenter (MVP) In Aspnet
Model View Presenter (MVP) In AspnetModel View Presenter (MVP) In Aspnet
Model View Presenter (MVP) In Aspnet
rainynovember12
 
Introduction of Xcode
Introduction of XcodeIntroduction of Xcode
Introduction of Xcode
Dhaval Kaneria
 
Angular2 with type script
Angular2 with type scriptAngular2 with type script
Angular2 with type script
Ravi Mone
 
Introduction to React for Frontend Developers
Introduction to React for Frontend DevelopersIntroduction to React for Frontend Developers
Introduction to React for Frontend Developers
Sergio Nakamura
 
Cognitive agent system to retrieve relevant code components from a repository
Cognitive agent system to retrieve relevant code components from a repositoryCognitive agent system to retrieve relevant code components from a repository
Cognitive agent system to retrieve relevant code components from a repository
Venkat Projects
 
ReactJS.pptx
ReactJS.pptxReactJS.pptx
ReactJS.pptx
SamyakShetty2
 
CI & CD- mobile application
CI & CD- mobile applicationCI & CD- mobile application
CI & CD- mobile application
CI & CD- mobile applicationCI & CD- mobile application
Implementation of Push Notification in React Native Android app using Firebas...
Implementation of Push Notification in React Native Android app using Firebas...Implementation of Push Notification in React Native Android app using Firebas...
Implementation of Push Notification in React Native Android app using Firebas...
naseeb20
 
React native app with type script tutorial
React native app with type script tutorialReact native app with type script tutorial
React native app with type script tutorial
Katy Slemon
 

Similar to How to Use Material UI (MUI) Icons in React (20)

04 objective-c session 4
04  objective-c session 404  objective-c session 4
04 objective-c session 4
 
A Guide to Creating a Great Custom Tailwind Sidebar
A Guide to Creating a Great Custom Tailwind SidebarA Guide to Creating a Great Custom Tailwind Sidebar
A Guide to Creating a Great Custom Tailwind Sidebar
 
Building Extensible RIAs with MEF
Building Extensible RIAs with MEFBuilding Extensible RIAs with MEF
Building Extensible RIAs with MEF
 
MPointInc_AndroidSDK_Documentation
MPointInc_AndroidSDK_DocumentationMPointInc_AndroidSDK_Documentation
MPointInc_AndroidSDK_Documentation
 
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
 
Introduction to Bitreactive
Introduction to BitreactiveIntroduction to Bitreactive
Introduction to Bitreactive
 
Software engineering modeling lab lectures
Software engineering modeling lab lecturesSoftware engineering modeling lab lectures
Software engineering modeling lab lectures
 
Appear IQ - Tutorials Backbone.js
Appear IQ - Tutorials Backbone.jsAppear IQ - Tutorials Backbone.js
Appear IQ - Tutorials Backbone.js
 
Web works hol
Web works holWeb works hol
Web works hol
 
Cis 247 all i labs
Cis 247 all i labsCis 247 all i labs
Cis 247 all i labs
 
Model View Presenter (MVP) In Aspnet
Model View Presenter (MVP) In AspnetModel View Presenter (MVP) In Aspnet
Model View Presenter (MVP) In Aspnet
 
Introduction of Xcode
Introduction of XcodeIntroduction of Xcode
Introduction of Xcode
 
Angular2 with type script
Angular2 with type scriptAngular2 with type script
Angular2 with type script
 
Introduction to React for Frontend Developers
Introduction to React for Frontend DevelopersIntroduction to React for Frontend Developers
Introduction to React for Frontend Developers
 
Cognitive agent system to retrieve relevant code components from a repository
Cognitive agent system to retrieve relevant code components from a repositoryCognitive agent system to retrieve relevant code components from a repository
Cognitive agent system to retrieve relevant code components from a repository
 
ReactJS.pptx
ReactJS.pptxReactJS.pptx
ReactJS.pptx
 
CI & CD- mobile application
CI & CD- mobile applicationCI & CD- mobile application
CI & CD- mobile application
 
CI & CD- mobile application
CI & CD- mobile applicationCI & CD- mobile application
CI & CD- mobile application
 
Implementation of Push Notification in React Native Android app using Firebas...
Implementation of Push Notification in React Native Android app using Firebas...Implementation of Push Notification in React Native Android app using Firebas...
Implementation of Push Notification in React Native Android app using Firebas...
 
React native app with type script tutorial
React native app with type script tutorialReact native app with type script tutorial
React native app with type script tutorial
 

Recently uploaded

How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
ToXSL Technologies
 
Project Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdfProject Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdf
Karya Keeper
 
Preparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging  a  Tech AgencyPreparing Non - Technical Founders for Engaging  a  Tech Agency
Preparing Non - Technical Founders for Engaging a Tech Agency
ISH Technologies
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
kalichargn70th171
 
UI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design SystemUI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design System
Peter Muessig
 
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
Bert Jan Schrijver
 
WWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders AustinWWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders Austin
Patrick Weigel
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
Reetu63
 
The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024
Yara Milbes
 
Microservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we workMicroservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we work
Sven Peters
 
E-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet DynamicsE-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet Dynamics
Hornet Dynamics
 
Energy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina JonuziEnergy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina Jonuzi
Green Software Development
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
safelyiotech
 
Modelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - AmsterdamModelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - Amsterdam
Alberto Brandolini
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
ervikas4
 
Kubernetes at Scale: Going Multi-Cluster with Istio
Kubernetes at Scale:  Going Multi-Cluster  with IstioKubernetes at Scale:  Going Multi-Cluster  with Istio
Kubernetes at Scale: Going Multi-Cluster with Istio
Severalnines
 
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian CompaniesE-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
Quickdice ERP
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
Maitrey Patel
 
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
kalichargn70th171
 

Recently uploaded (20)

How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
 
Project Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdfProject Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdf
 
Preparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging  a  Tech AgencyPreparing Non - Technical Founders for Engaging  a  Tech Agency
Preparing Non - Technical Founders for Engaging a Tech Agency
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
 
UI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design SystemUI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design System
 
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
 
WWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders AustinWWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders Austin
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
 
The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024
 
Microservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we workMicroservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we work
 
E-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet DynamicsE-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet Dynamics
 
Energy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina JonuziEnergy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina Jonuzi
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
 
Modelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - AmsterdamModelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - Amsterdam
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
 
Kubernetes at Scale: Going Multi-Cluster with Istio
Kubernetes at Scale:  Going Multi-Cluster  with IstioKubernetes at Scale:  Going Multi-Cluster  with Istio
Kubernetes at Scale: Going Multi-Cluster with Istio
 
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian CompaniesE-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
 
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
 

How to Use Material UI (MUI) Icons in React

  • 1. How to Use Material UI (MUI) Icons in React Whether it’s about a simple landing page, an e-commerce app platform or your company’s internal dashboard, using a library of pre-made icons and components is highly beneficial. There are many other icon libraries out there which can ease your work but one of the largest and the most popular one is the Material UI (or recently named MUI) icon library. If you are new to Material UI library, it provides you with a robust, customizable, accessible, and advanced components, enabling you to build your own design system and develop React applications faster. That includes a huge list of Material icons.
  • 2. Material UI icons or MUI currently have over 1900 icons based on Material Design guidelines set by Google. So, let’s see how to use them in a React application. Let’s begin! Getting started with Material Icons in a React app Let’s get our hands dirty with some actual coding where our React app uses the Material Icons (MUI) package. What we will be making? Our demo will be a very basic one. Basically, a component where we display three of the common items found in a typical webpage. As you can see, we have three items: 1. The “More” dropdown item. 2. The “Menu” hamburger item. 3. The “Cart” icon. Here we are using the Material Icons alongside the texts.
  • 3. Step 1: Start a New React Project Make sure you have Node.js installed on your system and then run the following commands: npx create-react-app mui-demo cd mui-demo npm start This will bootstrap a new React application and run the default app on http://localhost:3000/ in your default browser thanks to the Create React App tool. Step 2: Install Material UI(MUI) package Before we start adding these icons, we need the core MUI package because all these icons uses the MUI SvgIcon component to render the SVG path for each icon. For each SVG icon, we export the respective React component from the @mui/icons-material package. Run the following command from your terminal: npm install @mui/material @emotion/react @emotion/styled Or if you are using Yarn: yarn add @mui/material @emotion/react @emotion/styled
  • 4. Step 3: Install Material Icons Package Now we can install the icon package with the following command // with npm npm install @mui/icons-material // with yarn yarn add @mui/icons-material Step 4: Start Using MUI Icons! Simply head over to the app.js file and delete all the existing code. We will be writing everything from scratch. Let’s start with the responsive Grid layout component which will contain all our elements inside. This is useful for different screen sizes and orientations which uses CSS Flexbox under-the-hood. So under the return() method, we should have <Grid> component. This can have its props or custom styles attached to it: <Grid container></Grid> Now we need six new child <Grid> components to hold our icons with the text labels (one for each of the three). Make sure you pass in the item prop to each of them. <Grid item xs={1}></Grid>
  • 5. Within each of these, we have a <Typography> component holding the text label <Typography>More</Typography> As for the actual MUI icon component we will create a duplicate child <Grid> item but the only thing changed here will be the actual icon component name. By now we should have the following code: import * as React from "react"; import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; export default function App() { return ( <Grid container sx={{ color: "text.primary" }} > <Grid item xs={1}> <Typography>More</Typography> </Grid> </Grid> ); } Let’s see how to find icons we need from the MUI website: 1. Head over to the Material Icons webpage. 2. Here you will see a list of icons:
  • 6. As you can see it has 5 types of icons: Filled, Outlined, Rounded, two tone, and Sharp. For this demo we only want to use the Outlined one. 3. Now let’s search for the four icons by name let’s say the menu icon: 4. If you click on the selected icon, you will be greeted with the following popup:
  • 7. Here you get the icon component’s name along with some variants. 5. Finally, let’s copy the import statement you see in the modal above so that we can use it on our React application. Inside the second child <Grid> component we can now safely add the selected icon component as: import MenuIcon from "@mui/icons-material/Menu"; <Grid item xs={1}> <MenuIcon /> </Grid>
  • 8. Other icon components used for the above demo are: ExpandMoreOutlinedIcon and ShoppingCartIcon. If you implemented the above steps successfully, you should have the following code: import * as React from "react"; import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; import ExpandMoreOutlinedIcon from "@mui/icons-material/ExpandMoreOutlined"; import MenuIcon from "@mui/icons-material/Menu"; import ShoppingCartIcon from "@mui/icons-material/ShoppingCart"; export default function SvgMaterialIcons() { return ( <Grid container sx={{ color: "text.primary" }} style={{ margin: "10rem" }}> <Grid item xs={1}> <Typography>More</Typography> </Grid> <Grid item xs={1}> <ExpandMoreOutlinedIcon /> </Grid> <Grid item xs={1}> <Typography>Menu</Typography> </Grid> <Grid item xs={1}> <MenuIcon /> </Grid> <Grid item xs={1}> <Typography>Cart</Typography> </Grid> <Grid item xs={1}> <ShoppingCartIcon /> </Grid> </Grid>
  • 9. ); } And that should do it! If you followed the above steps carefully, you could see in your browser that React is rendering the corresponding MUI icons as needed. One of the benefits of using Material UI icons other than the fact that it’s huge with multiple variants is that it is supported by all major platforms, as well as browsers and if you ever get stuck you can definitely check out their GitHub repo. If that’s not enough, they have an entire page dedicated to support. So go ahead and try to use some other icons available in your project. Hope this short guide helped. Or you can also browse some of our pre-built react templates that are fully- responsive, interactive, and are loaded with all the important Material UI Icons. Source: https://blog.wrappixel.com/how-to-use-mui-icons-in-react/ **********