[Bug]: the icon inside IconButton with kind prop danger--ghost is not aligned to center

[Gururajj77]

Package

@carbon/react

Browser

No response

Package version

v11.60.1

React version

v18

Description

The icon inside the IconButton is not center aligned when the danger--ghost is used with kind prop

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-button--icon-button&args=kind:danger--ghost;tooltipAlignment:center;tooltipPosition:bottom

Steps to reproduce

Go to the above storybook link and hover on the IconButton.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

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

[Gururajj77]

the user has managed to fix it using below css, this might help:

.cds--btn--danger--ghost {
  -webkit-padding-end: unset;
  padding-inline-end: unset;
}

[alisonjoseph]

This isn't a supported variant combination per design docs.
https://carbondesignsystem.com/components/button/usage/#danger-button-variations
https://ibm-studios.slack.com/archives/C0M053VPT/p1692220573334289

[tay1orjones]

Related #14300