Too much margin for placeholder when using mat-icon as matPrefix

Question

For an Angular project using Material, I would like to add an input with a leading icon. When I do so (using mat-icon and matPrefix), the placeholder, in an outline appearance, gets extra (unwanted) margin on the start side (see images below).

When implementing the same input with a matSuffix for a trailing icon, the extra margin is no longer there.

Any idea how to get rid of it?

Below an example of the used code:

<mat-form-field fxFlex appearance="outline">
    <mat-label>Quota</mat-label>
    <mat-icon matPrefix>pin</mat-icon>
    <input matInput formControlName="quota" required fxFlex type="number">
</mat-form-field>

Answer 1

You can try wrapping your code with a div.row and a div.col-2 as shown below.

<div class="row">
        <div class="col-2">
            enter your code here
        </div>
</div>