[Bug]: Vertical alignment of icons in buttons with both icon and text

[marcin-bartos-viacomcbs]

Package

@carbon/react, @carbon/styles

Browser

Chrome, Firefox

Package version

v1.47.0

React version

v18.2.0

Description

When we use a Button component with both text and an icon, the vertical alignment of the icon seems to change depending on Button size variation.

For sizes "sm" and "md" the icon is vertically aligned to the bottom of the text. For sizes "lg" up, the icon is vertically centered with the text. I've prepared a screenshot where I've added a background and zoomed in to showcase the difference:

I don't know if this is a bug or a design choice. The only guideline I've found on a website is related to icon alignment with text
https://carbondesignsystem.com/guidelines/icons/usage#alignment
For me, it makes sense to apply the same rule to buttons. The icon aligned to the bottom of the text visually seems slightly off. However, if this is intentional please let me know :)

Reproduction/example

https://stackblitz.com/edit/github-3qj9uz?file=src%2FApp.jsx

Steps to reproduce

1. zoom in on the preview pane
2. check how the icon is vertically aligned with dotted lines

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tw15egan]

Question for @carbon-design-system/design, let us know what needs to be modified 👍🏻

[laurenmrice]

The icon should always be vertically aligned with the text in the button. So the sm and md size buttons have bugs.