[material-ui][Button] Negative margin causes start icon and end icon to be outside parent container about material-ui HOT 7 OPEN

Hey @JaceInglis, thanks for opening the issue! For the sake of curiosity, do you mind elaborating more on your use case? Why do you want to remove the button's padding entirely?

from material-ui.

Hey @danilo-leal I want to be able to have a full text button that aligns with the rest of my text other wise text buttons look like they are missaligned due to there internal padding.

Without removed padding

With removed padding (issue can be seen here)

Expected (If issue of Icon falling outside of parent container is fixed)

from material-ui.

I'd generally advise against messing with spacing from inside the component — maybe a different approach would work for you, and the Card's page introduction demo seems to be pretty close to your use case. Take a look there and let me know if something similar works for you!

from material-ui.

Hey @danilo-leal the component above doesn't utilize the card component. Putting the removal of the padding aside, the icon within the button still visibly extends beyond the parent container. Could you share your perspective on why addressing this isn't preferred? If the concern is the slight spacing adjustment between the icon and text, perhaps we could consider maintaining the spacing by adding an equivalent amount on the opposite side of the icon. Your insights on this matter would be appreciated.

from material-ui.

The biggest downside that I see of affecting the inner spacing of the Button component is messing with the style of the different states, primarily the hover and focus states. The demo I linked above is just an illustration of how you can fix the problem by wrapping the content and the button in containers with different padding instead of tweaking the components' inner spacing—no need to necessarily be a Card; you can do it with a simple Box!

Check this out: I put together a quick CodeSandbox using just the Box component and padding to illustrate everything I said above! Let me know if it's helpful!

from material-ui.

@danilo-leal Your sandbox reproduction uses button size small which actually fixes the issue.

If you try using medium you will not be able to make a working example without

A. the icon falling outside the line or
B. using small pixel adjustments to fix the deeper underlying issue in the button component

For clarification this is the issue I'm trying to solve.

from material-ui.

@danilo-leal Just making sure you saw this ^

from material-ui.