Open In App

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

Last Updated : 28 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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:ps

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:
icons

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:

icons22


T

tarunsinghwap7
Improve
Article Tags :

Explore

Lightbox