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

[essjay05]

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.

BEFORE screenshot AFTER screenshot AFTER screencast

Fixes b/250063405

[github-actions[bot]]

Deployed dev-app for e9989199ea4a6d0df4e8f45d70329acd3ae22a92 to: https://ng-dev-previews-comp--pr-angular-components-29686-dev-o9u7tpft.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

[crisbeto]

It seems like this causes the icons to bleed out from the button:

Is there a way that we can undo the text spacing just on icons instead?

[essjay05]

It seems like this causes the icons to bleed out from the button:

Is there a way that we can undo the text spacing just on icons instead?

I've made updates to the CSS to target icon to not be affected by text-spacing and it looks like it does somewhat help, but when really shrinking the window at certain points even the text spills out (as does the icons):

Open to any ideas/suggestions you may have @crisbeto.

[adolgachev]

Closing in favor of https://github.com/angular/components/pull/30867

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}