Unable to Apply CSS Styles to Angular Material mat-icon in Nested Components

I am trying to apply custom styles to a mat-icon element inside an Angular Material component, but no matter what I do, the styles won't take effect. Here's a simplified version of my code:

Html:

<mat-form-field appearance="fill" class="example-field">
<mat-label>Select an Option</mat-label>
<mat-select [formControl]="exampleControl" (selectionChange)="onOptionSelected($event.value)">
<mat-option *ngFor="let option of availableOptions" [value]="option">
<mat-icon [inline]="true">settings</mat-icon>
{{ "example.option." + option | lowercase | translate }}
</mat-option>
</mat-select>
</mat-form-field>


CSS:

:host {
::ng-deep {
mat-form-field {
mat-select {
mat-option {
mat-icon {
margin-right: 0;
}
}
}
}
}
}

Continue reading...