How to remove asterisk in required field and replace a custom asterisk in before place holder in angular 2+ and angular material2

Question

I am using angular5 and angular material2. I want to remove asterisk or star sign for the required field. I also want to add a custom asterisk or star sign before the place holder.

<mat-form-field>
      <input matInput placeholder="Applicant Name" name="inputApplicantName" 
      [(ngModel)]="inputApplicantName" required>
 </mat-form-field>

Answer 1

To remove the asterisk, you can use hideRequiredMarker attribute.

<mat-form-field hideRequiredMarker>
    <input matInput placeholder="Applicant Name" name="inputApplicantName" 
      [(ngModel)]="inputApplicantName" required>
</mat-form-field>

Answer 2

remove "required" attribute from input; replace placeholder attribute with tag inside of mat-form-field, and try to play with styles of it;

A placeholder is a text label displayed in the input area when the input does not contain text. When text is present, the placeholder will float above the input area. The placeholder can be specified either via a placeholder attribute on the input or a < mat-placeholder > element in the same form field as the matInput