How to Add MUI React Button Icon in React-Bootstrap ?

In this article, we will learn how to add the mui react button icon in react-bootstrap. Icons can be added in the react-bootstrap by importing the MUI icon component and using it within your React-Bootstrap button. React-Bootstrap is a front-end framework that was designed keeping React in mind.

Steps to Create React Application And Installing Modules:

• Create a React application using the following command:

npx create-react-app gfgproject

• After creating your project folder i.e. folder name, move to it using the following command:

cd gfgproject

• After creating the ReactJS application, Install the required module using the following command:

npm install react-bootstrap bootstrap

• Install MUI react

npm install @mui/icons-material

Step to Run Application:

Run the application using the following command from the root directory of the project:

npm start

Project Structure:

Example 1: In this example, we will add mui react button icon to a react-bootstrap app.

Javascript

import "bootstrap/dist/css/bootstrap.css";
import Button from "react-bootstrap/Button";
import { FileUpload } from "@mui/icons-material";

export default function App() {
    return (
        <div style=
                {{ display: "block", width: 700, padding: 30 }}>
            <h2>
                How to add MUI react icons in react-bootstrap
            </h2>
            <Button variant="success">
                <FileUpload /> Upload file
            </Button>
        </div>
    );
}

Output:

Example 2:

Javascript

import "bootstrap/dist/css/bootstrap.css";
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import {
    FormatAlignCenter,
    FormatAlignLeft,
    FormatAlignRight,
} from "@mui/icons-material";

export default function App() {
    return (
        <div style=
            {{ display: "block", width: 700, padding: 30 }}>
            <h2>
                How to add MUI react icons in react-bootstrap
            </h2>
            <ButtonGroup aria-label="Basic example">
                <Button variant="primary">
                    <FormatAlignLeft />
                </Button>
                <Button variant="success">
                    <FormatAlignCenter />
                </Button>
                <Button variant="warning">
                    <FormatAlignRight />
                </Button>
            </ButtonGroup>
        </div>
    );
}

Output: