How to insert an icon in mat-select and have it be on the rightmost side after Angular v15...

In the process of upgrading my project to Angular 15 and applying the MDC migration, mat-select introduced a checkmark for actively selected components and it seems it has caused the icons I kept inside the mat-select to shift out of place. Want to know if there's any flexible way to get the icons to the rightmost side without resorting to manually shifting the icons by a certain number of pixels.

HTML

<mat-form-field matTooltipPosition="right" matTooltipClass="custom-tooltip" aria-autocomplete="none" appearance="outline">
<mat-select (selectionChange)="promoTypeChanged($event)" hideSingleSelectionIndicator="true" placeholder="{{'select' | translate}}" [formControl]="promoType" required [disabled]="promoQuestStoreService.disableEdit">
<mat-select-trigger>
{{promoTypeDisplay(promoType.value)}}
</mat-select-trigger>
<mat-option value="Standard">{{'standard' | translate}}
<mat-icon class="select-icon" matSuffix matTooltipPosition="right" matTooltipClass="custom-tooltip" matTooltip="{{'standardTooltip' | translate}}">info_outline</mat-icon>
</mat-option>
<mat-option value="Usage Activity">{{'dailyUsageActivity' | translate}}
<mat-icon class="select-icon" matSuffix matTooltipPosition="right" matTooltipClass="custom-tooltip" matTooltip="{{'usageActivityTooltip' | translate}}">info_outline</mat-icon>
</mat-option>
<mat-option value="First Use">{{'firstUse' | translate}}
<mat-icon class="select-icon" matSuffix matTooltipPosition="right" matTooltipClass="custom-tooltip" matTooltip="{{'firstUseTooltip' | translate}}">info_outline</mat-icon>
</mat-option>
<mat-option value="Account Open Date Anniversary">{{'accOpenDate' | translate}}
<mat-icon class="select-icon" matSuffix matTooltipPosition="right" matTooltipClass="custom-tooltip" matTooltip="{{'accOpenDateTooltip' | translate}}">info_outline</mat-icon>
</mat-option>
<mat-option value="ScoreCard Account Open Date Anniversary">{{'scAccOpenDate' | translate}}
<mat-icon class="select-icon" matSuffix matTooltipPosition="right" matTooltipClass="custom-tooltip" matTooltip="{{'scAccOpenDateTooltip' | translate}}">info_outline</mat-icon>
</mat-option>
<mat-option value="Birthday">{{'birthday' | translate}}
<mat-icon class="select-icon" matSuffix matTooltipPosition="right" matTooltipClass="custom-tooltip" matTooltip="{{'birthdayTooltip' | translate}}">info_outline</mat-icon>
</mat-option>
</mat-select>
<mat-error *ngIf="this.promoForm.get('promoType').errors?.required">{{'promoTypeRequired' | translate}}</mat-error>
</mat-form-field>


CSS

.select-icon{
float: right;
margin-right: 0px !important;
margin-top: 10px;
}


Have added hideSingleSelectionIndicator="true" to hide the checkmark, but it seems the space is now reserved for the checkmark.

Before MDC migration

After MDC migration

Continue reading...