help(MatInput): Appearence outline with prefix and suffix

[ropoko]

trafficstars

What are you trying to do?

I am trying to use the input with outline appearence, also with prefix and suffix text, but for some reason the input text does not align with the suffix and prefix

example:

What troubleshooting steps have you tried?

I tried inspecting html on browser and adding some custom css, but is doesn't work

Reproduction

Steps to reproduce:

1. In mat-form-field component (appearence - outline) add the <input matInput type="text">
2. add the prefix and suffix:

<p matPrefix>R$</p>
<p matSuffix>,00</p>

4. My code:

<mat-form-field appearance="outline">
    <input
      matInput
      formControlName="valorVoucher"
      class="input-voucher"
    />
    <p matPrefix>R$</p>
    <p matSuffix>,00</p>
    <mat-hint color="contrast">Valor mínimo RS500,00</mat-hint>
</mat-form-field>

Environment

• Angular: 14.0
• CDK/Material: 14.0.4
• Browser(s): edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10