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: #40956 (review)

Link to PR: #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