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

Steps to reproduce

Steps:

1. Visit the sandbox reproduction
2. Open dev tools (Inspect Element) and notice that when you hover over the button that the startIcon is outside the button container
3. Also notice how when there is no padding on the button the Icon will get cutoff due to the negative margin

Current behavior

Current behaviour: Button Icons fall outside of the parent container due to negative margin.

Expected behavior

Expected behavior: Button Icons stay inside their parent container.

Context

I want to be able to have no padding on my button and still have the content stay inside the components container.

Issue created for: https://github.com/mui/material-ui/pull/40956#pullrequestreview-1869925897

Link to PR: https://github.com/mui/material-ui/pull/40956

Your environment

Using Chrome

  System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    npm: 9.8.1 - /usr/local/bin/npm
    pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-dom: 16.8.6 => 16.8.6 
    typescript: 3.3.3 => 3.3.3 

Search keywords: button negative margin start end icon

Start with the linked CodeSandbox reproduction and inspect its /src/styles.css while reproducing the hover and no-padding cases. Confirm that both start and end icons remain inside the Button container without clipping; the issue also references PR #40956 for prior context.