How to add mui react button icon in a clean way?

Question

I am making an app using react mui - bootstrap.

I have a form people need to write in, and a submit button icon from mui.

This is what it looks like, and how I want it to stay

This is what it looks like when I hover with the mouse on the check icon

I do not understand why the button has a different size when I hover and when I click the shadow has an outline. (picture below)

shadow and outline when clicked on button

I tried to remove border or outline, but it doesn't change anything.

Button element on my browser is completely different than my code in vscode:

<button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium icon css-78trlr-MuiButtonBase-root-MuiIconButton-root" tabindex="0" type="button" aria-label="check"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium checkIcon css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CheckCircleIcon"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg><span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span></button>

Here is my App.jsx

import React from "react";
import Form from 'react-bootstrap/Form';
import Card from 'react-bootstrap/Card';
import IconButton from '@mui/material/IconButton';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';

function App() {
    return (

      <div className="center">
          <Card className="card">
            <Form>
              <Form.Group className="mb-3" controlId="">
                <Form.Label>Prénom - First Name</Form.Label>
                <Form.Control className="control" type="text" placeholder="Prénom - First Name" />
              </Form.Group>

              <Form.Group className="mb-3" controlId="">
                <Form.Label>Nom - Last Name</Form.Label>
                <Form.Control className="control" type="text" placeholder="Nom - Last Name" />
              </Form.Group>
              <IconButton aria-label="check" className="icon">
                <CheckCircleIcon className="checkIcon"/>
              </IconButton>
            </Form>
          </Card>
      </div>
        
    )
        
}

export default App;

Here is my css:

.center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; 
    height: 100vh; 
    margin: auto;
    background-color: #fbf8f3;
}

.card {
    width: 300px;
    border: 10px solid #731833;
    background-color: #fbf8f3;
    padding: 20px;
}

.control {
    border: 1px solid #734825;
}
.icon {
    padding: 0;
    border: none;
    outline: none;
}

.checkIcon {
    color: #731833;
    margin-left: 100px;
    transform: scale(1.8);
}

Any help appreciated thanks a lot

ravindranag · Accepted Answer · 2023-07-22T20:23:43.907

0

I see you have applied margin-left on .checkIcon class. That's causing the IconButton to expand horizontally. MUI's IconButton component has border-radius: 100% by default. So if the width increases, it looks like this.

In order to centralize the IconButton, you can do this:

<Form className="d-flex flex-column">
  { ... }
  <IconButton
    sx={{
      alignSelf: 'center'
    }}
  >
    <CheckCircleIcon />
  </IconButton>
</Form>

Form is a flex container now, and IconButton will align itself centrally

Visit this codesandbox to see my solution

edited Jul 22 '23 at 20:23

answered Jul 22 '23 at 14:33

ravindranag

41
1
4

Thanks ! that works. Is there anyway to apply these style changes in the CSS rather than inline? I am trying to change the color of the text of the Form.Label and I'm not getting much luck – Choufleur235 Jul 22 '23 at 16:31
Glad that helped! I have created a sandbox with your given code. It has two ways of modifying the label text color, and I've also included the css class approach to your IconButton issue. Find it [here](https://codesandbox.io/s/pensive-cherry-gn8d5q?file=/src/App.js) Just refresh if it gives a ModuleNotFoundError. I don't know why it's doing that – ravindranag Jul 22 '23 at 20:19

score 0 · Answer 2 · answered Jul 22 '23 at 14:40

You've applied the layout-related style to the button's content instead of the button itself. To achieve the desired styling, you should modify your CSS as follows:

/* IconButton */
.button {
  padding: 0;
  border: none;
  outline: none;

  /* Layout-related styles are generally applied to the container */
  margin-left: 100px;
  transform: scale(1.8);
}

/* CheckCircleIcon */
.checkIcon {
  color: #731833;
}

To see the solution with the corrected styling for the shadow, you can check out this link: https://codesandbox.io/s/stack-oveflow-how-to-add-mui-react-button-icon-in-a-clean-way-f8l6w6?file=/src/styles.css:303-551.

Thanks, what seems to work on codesandbox doesn't quite replicate on my code, I still have the shadow and black border appearing after clicking on the button, and the button is stuck on the left side, — Choufleur235, Jul 22 '23 at 15:58

How to add mui react button icon in a clean way?

2 Answers2