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

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

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

• html
• css
• angular
• angular-material

Share Follow asked Mar 6 at 20:56 AshwoodAshwood 2344 bronze badges 4

• issue not reproducible stackblitz – Naren Murali Commented Mar 7 at 4:06
• @Ashwood, Naren's stackblitz example was helpful in reproducing your issue, a temporary fix would be mat-option {flex-direction: row-reverse} in your global scss file – Mukilan Commented Mar 7 at 6:00
• @Mukilan and Naren, thank you both! Applying that change in my global CSS managed to resolve it. – Ashwood Commented Mar 7 at 15:14
• @Mukilan please post that as answer so that future visitors will benefit from it. Most tend to overlook comments – codeandcloud Commented Mar 8 at 3:04

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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