fix(icon): fix uncentered icons when using WCAG text spacing overrides

If you were using `font-size`, you may need to change it to `--md-icon-size` if icons shift.

PiperOrigin-RevId: 607096212

Author: asyncLiz

icon/internal/_icon.scss

@@ -40,14 +40,24 @@
     font-family: map.get($tokens, 'font');
     display: inline-flex;
     font-style: normal;
+    place-items: center;
+    place-content: center;
     line-height: 1;
     // Avoid displaying overflowing text if font ligatures have not loaded.
     overflow: hidden;
+    // Changing the letter-spacing for WCAG text spacing compliance will shift
+    // around font ligature icons, so we revert that to normal. Note: some a11y
+    // tools use `!important` style injection and may see shifting icons. Actual
+    // text spacing override implementations in projects should not set
+    // `letter-spacing` on icons, or revert it with a `text-indent` of the same
+    // size.
     letter-spacing: normal;
     text-transform: none;
     user-select: none;
     white-space: nowrap;
     word-wrap: normal;
+    // Prevent icons from shrinking when placed in a flex container.
+    flex-shrink: 0;
 
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;