SlideShare ist ein Scribd-Unternehmen 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/
**********

Weitere ähnliche Inhalte

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
dakas1
 
Top 9 Trends in Cybersecurity for 2024.pptx
Top 9 Trends in Cybersecurity for 2024.pptxTop 9 Trends in Cybersecurity for 2024.pptx
Top 9 Trends in Cybersecurity for 2024.pptx
devvsandy
 
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
 
Mobile app Development Services | Drona Infotech
Mobile app Development Services  | Drona InfotechMobile app Development Services  | Drona Infotech
Mobile app Development Services | Drona Infotech
Drona Infotech
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
Drona Infotech
 
Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)
Julian Hyde
 
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
 
zOS Mainframe JES2-JES3 JCL-JECL Differences
zOS Mainframe JES2-JES3 JCL-JECL DifferenceszOS Mainframe JES2-JES3 JCL-JECL Differences
zOS Mainframe JES2-JES3 JCL-JECL Differences
YousufSait3
 
socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
SOCRadar
 
Lecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptxLecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptx
TaghreedAltamimi
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
mz5nrf0n
 
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
dakas1
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
TheSMSPoint
 
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
mz5nrf0n
 
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
Łukasz Chruściel
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
Grant Fritchey
 
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
 
Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !
Marcin Chrost
 
Odoo ERP Vs. Traditional ERP Systems – A Comparative Analysis
Odoo ERP Vs. Traditional ERP Systems – A Comparative AnalysisOdoo ERP Vs. Traditional ERP Systems – A Comparative Analysis
Odoo ERP Vs. Traditional ERP Systems – A Comparative Analysis
Envertis Software Solutions
 
Using Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional SafetyUsing Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional Safety
Ayan Halder
 

Kürzlich hochgeladen (20)

一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
 
Top 9 Trends in Cybersecurity for 2024.pptx
Top 9 Trends in Cybersecurity for 2024.pptxTop 9 Trends in Cybersecurity for 2024.pptx
Top 9 Trends in Cybersecurity for 2024.pptx
 
E-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet DynamicsE-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet Dynamics
 
Mobile app Development Services | Drona Infotech
Mobile app Development Services  | Drona InfotechMobile app Development Services  | Drona Infotech
Mobile app Development Services | Drona Infotech
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
 
Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)
 
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 ...
 
zOS Mainframe JES2-JES3 JCL-JECL Differences
zOS Mainframe JES2-JES3 JCL-JECL DifferenceszOS Mainframe JES2-JES3 JCL-JECL Differences
zOS Mainframe JES2-JES3 JCL-JECL Differences
 
socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
 
Lecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptxLecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptx
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
 
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
 
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
 
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
 
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
 
Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !
 
Odoo ERP Vs. Traditional ERP Systems – A Comparative Analysis
Odoo ERP Vs. Traditional ERP Systems – A Comparative AnalysisOdoo ERP Vs. Traditional ERP Systems – A Comparative Analysis
Odoo ERP Vs. Traditional ERP Systems – A Comparative Analysis
 
Using Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional SafetyUsing Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional Safety
 

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/ **********