bug(input - suffix): matSuffix directive not aling correctly fontawesome icons (v6 - lastest) and other elements

[AlonsoK28]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

matSuffix directive is not aligning correctly Fontawesome icons and other elements like material components and html native elements

matSuffix is only aligning correctly material icons

Reproduction

Steps to reproduce:

1. add matSuffix directive to mat-input
2. use fontawesome icon together suffix directive

I provide a reproduce example of this issue, using fontawesome icons and other material elements

example: https://stackblitz.com/edit/angular-ivy-cshdvu

Expected Behavior

Fontawesome icons and other elements are correctly alingment using matSuffix directive

Material icons are correctly alingment using matSuffix directive

Actual Behavior

Fontawesome icons are aligment incorrectly using matSuffix directive

Material Checkbox are alignment incorrectly using matSuffix directive

Material Radio button are alignment incorrectly using matSuffix directive

Html select are alignment incorrectly using matSuffix directive

Material Spinner are alignment incorrectly using matSuffix directive

Environment

• Angular: 14.2.4
• CDK/Material: 14.2.3
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): All