How to use mui icon as a button in react js?
January 08, 2024Hi Friends 👋,
Welcome To aGuideHub!
To use mui icon as a button in react js, you have to use <ArrowDropDownCircleIcon /> component in icon Button. It will use mui icon as a button in React JS.
Today, I am going to show you, How to use mui icon as a button in react js
Installation
Install the following packages to use mui icon button in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledTable of contents
- Install MUI and create a new React app.
- Import Material-UI icon button.
- Use the icon button Component.
Step 1: Install MUI and create a new React app.
First you have to install the React project. You should use create-react-app command to create a new React project.
npx create-react-app my-app
cd my-app
npm startStep 2: Import Material-UI icon button.
After installing MUI, you have to import your React component. To do this, add the following line to the top of your component file.
import * as React from "react";
import IconButton from "@mui/material/IconButton";
import Stack from "@mui/material/Stack";
import ArrowDropDownCircleIcon from "@mui/icons-material/ArrowDropDownCircle";
import ArrowCircleUpIcon from "@mui/icons-material/ArrowCircleUp";
import AssistantDirectionIcon from "@mui/icons-material/AssistantDirection";Step 3: Use the icon button Component.
Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.
<Stack direction="row" spacing={1}>
<IconButton aria-label="delete">
<ArrowDropDownCircleIcon />
</IconButton>
<IconButton aria-label="delete" disabled color="primary">
<ArrowDropDownCircleIcon />
</IconButton>
<IconButton color="secondary" aria-label="add an alarm">
<ArrowCircleUpIcon />
</IconButton>
<IconButton color="primary" aria-label="add to shopping cart">
<AssistantDirectionIcon />
</IconButton>
</Stack> MUI material use mui icon as a button example.
The below code is an example, you need to import icon button Component. Then, you have to use <ArrowDropDownCircleIcon /> component in icon Button. Then it will use mui icon as a button in react js.
App.js
import * as React from "react";
import IconButton from "@mui/material/IconButton";
import Stack from "@mui/material/Stack";
import ArrowDropDownCircleIcon from "@mui/icons-material/ArrowDropDownCircle";
import ArrowCircleUpIcon from "@mui/icons-material/ArrowCircleUp";
import AssistantDirectionIcon from "@mui/icons-material/AssistantDirection";
export default function IconButtons() {
return (
<Stack direction="row" spacing={1}>
<IconButton aria-label="delete">
<ArrowDropDownCircleIcon />
</IconButton>
<IconButton aria-label="delete" disabled color="primary">
<ArrowDropDownCircleIcon />
</IconButton>
<IconButton color="secondary" aria-label="add an alarm">
<ArrowCircleUpIcon />
</IconButton>
<IconButton color="primary" aria-label="add to shopping cart">
<AssistantDirectionIcon />
</IconButton>
</Stack>
);
}In the above code example, I have used the @mui/material component and use mui icon as a button in react js.
Here, we are provided code sandbox links for the above program use mui icon as a button in react js. Then you can use whenever you want and do the changes as per your requirements.
All the best 👍
