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

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

As @codeandcloud suggested Mark this as checked so others may find it useful.

mat-mdc-option {flex-direction: row-reverse} in your global scss file.

Note: that this is a temporary solution