fix(material/icon): mat-icon misaligned when text-spacing is applied

Fixes an issue with Angular Components Material Icon component where
when text-spacing is applied the icon gets misaligned and if inside
of an input or container with an outline, the icon gets cut off.
This fix adds css styling  to keep the icon
middle-aligned when text-spacing is applied.

Fixes b/250063405

Author: essjay05

src/material/icon/icon.scss

@@ -28,6 +28,7 @@ mat-icon {
   fill: currentColor;
   height: $size;
   width: $size;
+  vertical-align: middle;
 
   // In some cases the icon elements may extend beyond the container. Clip these cases
   // in order to avoid weird overflows and click areas. See #11826.