Regression - alignment on icons in Discount Badges

[iphipps]

Summary

In web admin at the discounts creation modal, the icons are misaligned

link to the react component

Expected behavior

Aligned icons

Actual behavior

misaligned icons

Steps to reproduce

Link to sandbox

1. spin url or go to https://admin.shopify.com/store/{your store}/discounts
2. click the create discount button to see the icons

Are you using React components?

Yes

Polaris version number

"@shopify/polaris-icons": "9.3.0",     "@shopify/polaris-internal": "13.21.1",     "@shopify/polaris-tokens": "9.3.0",     "@shopify/polaris-viz": "14.2.0",     "@shopify/polaris-viz-core": "14.2.0",

Browser

chrome

Device

mac os

[sgilroy85]

This is also affecting the Shipping Label bulk purchase page. The order cells with the globe icon and the shipping service cells with the info icon are now showing a scroll bar. If we delete the icon from the dom the scrollbar disappears.

[willnguyen1312]

Hi guys, I think this is the culprit causing our layout in ShippingLabels section to be broken related to Icon's styling

https://github.com/Shopify/polaris-internal/commit/b0812db3e5f256cd47645053385673d6c697e8a3#diff-ca33e9d43e366c169d1bcc09b4fb1053f1aa766f958aacf7578bc9ed90bf262dL94

Previously, Icon's svg was using display: block instead of its default inline. The latest style doesn't work nicely 😅

Weird.CSS.mov