Angular 15 MDC迁移后，如何将mat-select图标置于最右侧？

问题背景 #

升级至Angular 15并完成MDC迁移后，mat-select为选中组件新增了勾选标记，导致原本嵌入mat-option内的图标位置偏移。已通过hideSingleSelectionIndicator="true"隐藏勾选标记，但该标记的占位空间仍被保留，需要无需手动设置像素偏移的方法将图标固定在最右侧。

解决方案 #

1. 移除勾选标记占位 + Flex布局对齐图标

MDC迁移后，mat-option的勾选标记占位由.mdc-list-item__meta容器保留，即使隐藏标记，该容器仍会占据宽度。通过CSS移除该占位，并利用Flex布局让图标自动靠右：

修改后的CSS

/* 移除隐藏勾选标记的mat-select中，选项内的勾选占位容器 */
mat-select[hideSingleSelectionIndicator] .mat-mdc-option .mdc-list-item__meta {
  display: none;
}

/* 用Flex布局让图标靠右，替代原float方式 */
.select-icon {
  margin-left: auto;
  align-self: center;
  margin-top: 0;
}

调整HTML结构（为每个mat-option添加Flex容器）

<mat-option value="Standard">
  <div style="display: flex; align-items: center; width: 100%;">
    {{'standard' | translate}}
    <mat-icon class="select-icon" matSuffix matTooltipPosition="right" matTooltipClass="custom-tooltip" matTooltip="{{'standardTooltip' | translate}}">info_outline</mat-icon>
  </div>
</mat-option>

2. 备选方案：直接覆盖MDC选项内边距

如果不想修改HTML结构，也可以通过调整选项内容的内边距抵消占位空间：

/* 隐藏勾选标记的伪元素 */
mat-select[hideSingleSelectionIndicator] .mat-mdc-option .mat-mdc-option-pseudo-checkbox {
  display: none;
}

/* 移除选项内容右侧的额外内边距（原用于容纳勾选标记） */
mat-select[hideSingleSelectionIndicator] .mat-mdc-option .mdc-list-item__content {
  padding-inline-end: 0;
}

/* 保持图标靠右对齐 */
.select-icon {
  float: right;
  margin-right: 0;
  margin-top: 0;
}

说明 #

• 原float: right在MDC的Flex布局结构下兼容性较差，改用margin-left: auto的Flex布局方式更适配Angular Material的MDC组件结构，且无需硬写像素值，适配不同屏幕尺寸。
• 通过mat-select[hideSingleSelectionIndicator]属性选择器，确保样式只作用于隐藏了勾选标记的下拉框，避免影响其他正常使用勾选标记的组件。

内容的提问来源于stack exchange，提问作者Ashwood