[IconButton] edge="start/end" not setting correct negative margins

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

Current Behavior 😯

<IconButton edge="start" size="small" /> Sets a left margin of -3 even though padding is 5
<IconButton edge="start" size="medium" /> Sets a left margin of -12 even though padding is 8
<IconButton edge="start" size="large" /> Sets a left margin of -12 even though padding is 12

Expected Behavior 🤔

<IconButton edge="start" size="small" /> Should set a left margin of -5 with a padding of 5
<IconButton edge="start" size="medium" /> Should set a left margin of -8 with a padding of 8
<IconButton edge="start" size="large" /> Should set a left margin of -12 with a padding of 12

Steps to Reproduce 🕹

No specific steps to reproduce besides rendering the component with the given props above.

Other observations

Also, don't think it is currently possible to override the styles via theme overrides for edge/negative margins for each respective size when looking at the overridesResolver here: https://github.com/mui-org/material-ui/blob/afcf3ee18e7a9c526348b3bce74b69781b4ad071/packages/mui-material/src/IconButton/IconButton.js#L32-L41

Start in packages/mui-material/src/IconButton/IconButton.js, especially the edge and size styling and the overridesResolver around lines 32–41. Compare the rendered negative margins with each size's documented padding for edge="start" and edge="end"; done means the margins match the padding values and the styles can be overridden through the theme.