How to change css of asterick generated by required in angular material form field?

Question

I am using angular material in angular6 app.

        <mat-form-field fxFlex>
            <mat-label [class.form-label]="fg.get('email').valid && fg.get('email').touched">{{attributesLabels.email}}</mat-label>
            <input matInput formControlName="email" required [autofocus]="true">
            <mat-error *ngIf="fg.get('email').hasError('required')">Email is required</mat-error>
            <mat-error *ngIf="fg.get('email').hasError('email') && !fg.get('email').hasError('required') ">Invalid email</mat-error>
        </mat-form-field>

This is required field and in the placeholder of this input field, "*" is append after placeholder like below:

I want to change the color of "*" in the placeholder to red. How can i change the color?

Html Generated by the above mat-form-field:

Answer 1

This super simple thing for me was at the root of the project in styles.scss just put

.mat-form-field-required-marker { color: red }