startIcon, endIcon button position

See original GitHub issue

The startIcon, endIcons option in buttons is a necessary addition. But I must say, I’m not crazy with the way it was implemented “after” “before” the children.

I realize that the Material Design specification puts the icon next to the text. In my opinion, one of the fails of this spec. Most designers would position the icon on the edge of the button. Because it just looks better.

This is not intuitively achievable with the implementation material-ui chose. The icon is positioned inside the label which means that any padding you apply to the button forces the icon inward. Leaving you with absolute position override or negative margin.

An absolute override is difficult, bc you are forced to apply the extract space you lose positioning absolutely manually and since the icon and the text are directly next to eachother, is only possible by manually adding a span to the button text. Which sucks.

Negative margin does work, but since it affects the rest of the space as well requires you to specify the margins depending on the type of button.

[x ] The issue is present in the latest release.
[ x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

As described above

Expected Behavior 🤔

There are a few options to make the behavior more easily customizable. Absolute positioning seems to me the best option for this, and it should be easy to apply

place the icon outside the label. This way, you can use absolute positioning and select the sibling label element to compensate for lost space. You can still do this “before / after”
place a span around the text inside the label. Same as above. However, prob not desirable since it changes the dom structure either for all or for just this case

Steps to Reproduce 🕹

Tech	Version
Material-UI	v4.5.0
React	16.9
Browser	chrome
TypeScript	no

Issue Analytics

State:
Created 4 years ago
Reactions:8
Comments:14 (6 by maintainers)

Top GitHub Comments

14reactions

Jorundurcommented, Sep 22, 2020

Regarding absolute positioning, it actually didn’t take too much code to align this nicely:

...
import { Button, makeStyles } from '@material-ui/core';
...

const useStyles = makeStyles({
  endIcon: {
    position: 'absolute',
    right: '1rem'
  },
});

const CustomButton: FunctionComponent<Props> = () => {
  const classes = useStyles();

  return (
    <Button
      ...
      classes={{
        endIcon: classes.endIcon,
      }}
      onClick={onClick}
      ...
    >
      {title}
    </Button>
  );
};

export default CustomButton;

6reactions

Jorundurcommented, Sep 22, 2020

Not sure if this was ever revived in another issue but I’m a bit surprised this isn’t something that’s being considered.

Take for example this custom “checkbox” button group I have using buttons with an endIcon:

To me it’s crystal clear it would be good to be able to align the icon to the edge of each button, it would make for a much nicer UI.

Top Results From Across the Web

Change size of startIcon / endIcon Material-UI - Stack Overflow

I'm creating a theme in Material-UI and have to use our own set of icons (SVG). However, the icons gets too small when...

Button API - Material UI - MUI

Rule name Global class Description root.MuiButton‑root Styles applied to the root element. fullWidth.MuiButton‑fullWidth Styles applied to the root element if fullWidth= . endIcon.MuiButton‑endIcon Styles applied to...

MUI Icon Button: How to Add a Material UI Icon Button with Text

Learn how to create a React icon button with text using Material UI ... a standard button component along with a startIcon or...

Can't use "startIcon" & "endIcon" from <Button/> API of Material ...

score:-1. The startIcon and endIcon properties await the entry of a element of type React. · score:2. <Button variant="contained" color="primary" > Send < ......

Button - MudBlazor - Blazor Component Library

Icons and labels ; Delete · EndIcon · Icons.Material.Filled.Send ; Send · StartIcon · Icons.Custom.Uncategorized.Radioactive ; Talk · StartIcon · Icons.Material.Filled.