mat-prefix to work on the input not the label

Question

So using material we have some code to ask a question, the input we would like to add a $ sign to the front of or use a place holder. inside of this mat field we also have a mat-label. If I use matprefix it puts the dollar sign infront of the label not the input field. Can anyone suggest a way to do this?

<mat-form-field floatLabel="always" class="fb-form-field fb-auto-detail-question-group">
        <!-- <mat-label class="fb-question-label">Amount of service or tow? </mat-label> -->
        <label class="sub">What was the amount of the service or tow bill?<span class="frm__label--required">*</span></label>
        <input matInput formControlName="serviceBillAmount" class="fb-form-auto-input"  />
        <span matPrefix>$&nbsp;</span>
        <mat-error *ngIf="fieldInvalid('serviceBillAmount')"> The dollar amount you entered is invalid. Please try again.</mat-error>
    </mat-form-field>

Answer 1

Take a look at this example, try comparing that with your code, matPrefix and matSuffix should not collide with any labels placed on the form field. Keep in mind since you are using Angular Material you should stick to the structures provided in the framework, in this case, you should use a mat-label tag instead of just label

https://stackblitz.com/edit/angular-j4eagb

Answer 2

This one works for me after spending so much time.

HTML

<mat-form-field appearance="outline">
    <mat-label>Amount</mat-label>
    <span matPrefix>$ &nbsp;</span>
    <input matInput placeholder="0" formControlName="amount">
</mat-form-field>

CSS

.mat-form-field.mat-form-field-should-float .mat-form-field-infix{
    position: initial;
}
.mat-form-field.mat-form-field-should-float .mat-form-field-label-wrapper{
    top: 0;
    left: 15px;
}