align matSuffix content with a text inside mat-form-field input
I have a mat-form-field with <span>💡</span> as a matSuffix
<mat-form-field appearance="outline">
<input matInput
placeholder="Details"
name="details"
required />
<span matSuffix>💡</span>
</mat-form-field>
The problem that emigi does not align with a text
Any ideas how to fix?
Solution 1:
Use a DIV and try adjusting the position of the icon to compensate for the discrepancy between the default font size 16px and the size of a standard mat-icon suffix 24px:
<div matSuffix style="position: relative; bottom: 8px;">💡</div>