fix: restore icon centering after MUI v9 upgrade (#12440)

MUI v5's Box converted the system prop fontSize={0} to font-size: 0,
zeroing the strut so the svg child filled the icon span. Since the v9
upgrade (52d5bce) Box only styles through sx, so the prop was passed
through as a dead font-size="0" DOM attribute and every s:true icon
(svg child path) drifted down a few px inside text-sized containers
(e.g. MaskBlue size={16} in the ProfileCard avatar badge).

Move fontSize: 0 into the sx base style (restoring v5 semantics), add
lineHeight: 0 to guard against host pages inheriting an absolute
line-height, and drop the dead prop.

Author: swkatmask

packages/icons/utils/internal.js

@@ -33,6 +33,9 @@ export function __createIcon(name, variants, intrinsicSize = [24, 24]) {
                 )
             const base = {
                 display: 'inline-block',
+                // To align icon center: zero out the strut so the svg child fills the span.
+                fontSize: 0,
+                lineHeight: 0,
                 backgroundRepeat: 'no-repeat',
                 backgroundPosition: 'center',
                 flexShrink: 0,
@@ -56,8 +59,6 @@ export function __createIcon(name, variants, intrinsicSize = [24, 24]) {
             ref,
             'data-icon': name,
             sx: Array.isArray(sx) ? [iconStyle, ...sx] : [iconStyle, sx],
-            // To align icon center.
-            fontSize: 0,
         }
         // background image can't be correctly resolved on Firefly in ShadowDOM.
         // This is a workaround.