CODEWITHSUNDEEP
reactjsmaterial-ui
Sa Lesanan
Sa Lesanan

Reputation: 57

How do we reduce the distance between StartIcon and Text in Button

I'm working on React + Material UI. I would like to reduce the distance between StartIcon and Text-Login in Button (Attached Picture as below). Can anyone share how to do that? I tried to change the size to small but nothing changes. My code as below. Thank you,

enter image description here

        <Button
          variant="contained"
          size="small"
          startIcon={<PersonIcon color="buttonwordcolor" />}
        >
          <Typography variant="h6" color="buttonwordcolor.main">
            Log In
          </Typography>
        </Button>

Upvotes: 3

Views: 1716

Answers (3)

Ken
Ken

Reputation: 663

I experienced the same issue, I wanted to find a way to globally adjust the startIcon's right margin. Here's what worked for me in React V18, following the official documentation: https://mui.com/material-ui/customization/theme-components/

import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
    components: {
        MuiButton: {
            styleOverrides: {
                startIcon: {
                    marginRight: "4px",
                },
            },
        },
    },
});

function App() {
    return (
        <div className="App">
            <ThemeProvider theme={theme}>
                // your routes or components here
            </ThemeProvider>
        </div>
    );
}

Upvotes: 0

Akis
Akis

Reputation: 2272

An easy and fast way would be to give the spacing directly in your icon

    <Button
      variant="contained"
      size="small"
      startIcon={<PersonIcon sx={{marginRight: '20px'}} color="buttonwordcolor" />}
    >
      <Typography variant="h6" color="buttonwordcolor.main">
        Log In
      </Typography>
    </Button>

Or if you are looking for a more consistent solution so you don't need to do it on every button you can make the change in your theme in your components object, like below. In the example I also inluded changes for the text color, hover font size in case they help more.

export const theme = createTheme({
  palette: {
    primary: {
      main: '#133676',
      dark: '#2e85d4',
    },    
    ...
  },
  components: {
    MuiButton: {
      styleOverrides: {
        text: {
          color: '#000',
          '&:hover': {
            background: 'transparent',
            color: '#2e85d4',
          },
        },
        startIcon: {
          marginRight: '4px',
          '& > :nth-of-type(1)': {
            fontSize: '22px',
          },
        },
      },
    },
    
  },
});

Upvotes: 2

Deahesi
Deahesi

Reputation: 1

You can write important or inline style on Typography component to change margin. If margin actually now is 0, then you can make it negative number.

But be aware, this is not such a good practice

Upvotes: 0

Related Questions