How to use mui icon button as a link in react js?
January 10, 2024Hi Friends 👋,
Welcome To aGuideHub!
To use mui icon button as a link in react js, you have to use href="https://aguidehub.com/" target="_blank"
attribute in IconButton component. It will use mui icon button as a link in React JS.
Today, I am going to show you, How to use mui icon button as a link in react js
Installation
Install the following packages to use mui icon button in react js.
npm
npm install @mui/material @emotion/react @emotion/styled
yarn
yarn add @mui/material @emotion/react @emotion/styled
Table 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 start
Step 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 ArrowDropDownCircleIcon from "@mui/icons-material/ArrowDropDownCircle";
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.
<IconButton href="https://aguidehub.com/" target="_blank">
<ArrowDropDownCircleIcon />
</IconButton>
MUI material use mui icon button as a link example.
The below code is an example, you need to import icon button
Component. Then, you have to use href="https://aguidehub.com/" target="_blank"
attribute in IconButton component. Then it will use mui icon button as a link in react js.
App.js
import * as React from "react";
import IconButton from "@mui/material/IconButton";
import ArrowDropDownCircleIcon from "@mui/icons-material/ArrowDropDownCircle";
export default function IconButtons() {
return (
<div>
<IconButton href="https://aguidehub.com/" target="_blank">
<ArrowDropDownCircleIcon />
</IconButton>
</div>
);
}
In the above code example, I have used the @mui/material
component and use mui icon button as a link in react js.
Here, we are provided code sandbox links for the above program use mui icon button as a link in react js. Then you can use whenever you want and do the changes as per your requirements.
All the best