Repository: material-ui
Issue: [material-ui][Button] Negative margin causes start icon and end icon to be outside parent container
Labels: component: button,package: material-ui

### Steps to reproduce

Steps:
1. Visit the [sandbox reproduction](https://codesandbox.io/p/sandbox/negative-button-icon-margin-83wnpg?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clsma4ind00062v6hkxn3v1xe%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clsma4inc00022v6hzzt1j4hl%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clsma4inc00032v6hhuy3ujvj%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clsma4ind00052v6h1m03swfb%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clsma4inc00022v6hzzt1j4hl%2522%253A%257B%2522id%2522%253A%2522clsma4inc00022v6hzzt1j4hl%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clsmcwbcm00022v6nok9fhfnl%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A6%252C%2522startColumn%2522%253A26%252C%2522endLineNumber%2522%253A6%252C%2522endColumn%2522%253A26%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fstyles.css%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clsmcwbcm00022v6nok9fhfnl%2522%257D%252C%2522clsma4ind00052v6h1m03swfb%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clsma4inc00042v6hrix4kcov%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clsma4ind00052v6h1m03swfb%2522%252C%2522activeTabId%2522%253A%2522clsma4inc00042v6hrix4kcov%2522%257D%252C%2522clsma4inc00032v6hhuy3ujvj%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clsma4inc00032v6hhuy3ujvj%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)
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

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  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 
```
</details>


**Search keywords**: button negative margin start end icon