How to use mui icon with button in react js?
November 19, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To use mui icon with button, set <Button variant="outlined" startIcon={<GppGoodIcon />} >
. It will use mui icon with button.
Today, I am going to show you, how to use mui icon with button in react js.
Installation
Install the following packages to use mui icon with button in react js.
npm
npm install @mui/material @emotion/react @emotion/styled
yarn
yarn add @mui/material @emotion/react @emotion/styled
MUI material icon with button example.
The code below is an example of using an icon with a button.
App.js
import * as React from 'react';
import Button from '@mui/material/Button';
import GppGoodIcon from '@mui/icons-material/GppGood';
import SendIcon from '@mui/icons-material/Send';
import Stack from '@mui/material/Stack';
export default function IconLabelButtons() {
return (
<Stack direction="row" spacing={2}>
<Button variant="outlined" startIcon={<GppGoodIcon />} >
</Button>
<Button variant="outlined" endIcon={<SendIcon />}>
</Button>
</Stack>
);
}
In the above code example, I have used the @mui/material
component and used mui icon with button.
Check the output of the above code example.
All the best 👍