如何调整Angular Material mat-select组件的下拉箭头尺寸？

嘿，我刚好碰到过类似的问题！你已经用mat.select-overrides mixin搞定了箭头颜色，但确实Angular Material 19的官方token里暂时没有专门用来调整下拉箭头尺寸的选项，不过有两个实用的方法可以解决这个问题：

• 方法一：通过Sass/CSS直接覆盖样式
  既然你已经在使用Sass来定制组件样式，可以直接针对箭头元素添加尺寸调整的规则。根据Angular Material 19的组件结构，你可以试试这两种选择器：

  @use '@angular/material' as mat;
  
  // 先保留你已有的颜色覆盖
  @include mat.select-overrides((
    enabled-arrow-color: #0047a6
  ));
  
  // 针对旧版非MDC结构的箭头（如果你的项目还没完全迁移到MDC）
  .mat-select-arrow {
    width: 16px; // 自定义宽度
    height: 16px; // 自定义高度
    svg {
      transform: scale(1.2); // 可选：整体放大箭头
      width: 100%;
      height: 100%;
    }
  }
  
  // 针对MDC结构的箭头（Angular Material 15+默认使用）
  .mdc-select__dropdown-icon {
    width: 18px;
    height: 18px;
    svg {
      transform: scale(1.1);
    }
  }
  

  你可以根据自己项目的实际组件结构选择对应的选择器，调整width/height或者transform的scale值就能得到想要的尺寸。

• 方法二：完全自定义箭头图标
  如果自带箭头的样式调整起来太麻烦，你可以直接替换成自己的自定义图标，用mat-select的toggleIcon输入属性就能实现：

  <mat-select [toggleIcon]="customDropdownArrow">
    <!-- 你的下拉选项内容 -->
    <mat-option value="option1">选项1</mat-option>
    <mat-option value="option2">选项2</mat-option>
  </mat-select>
  
  <!-- 自定义箭头的模板 -->
  <ng-template #customDropdownArrow>
    <svg width="20" height="20" viewBox="0 0 24 24" fill="#0047a6">
      <path d="M7 10l5 5 5-5z"/>
    </svg>
  </ng-template>
  

  这种方式你可以完全控制图标的大小、颜色甚至形状，自由度拉满，而且和你已经设置的箭头颜色也能完美匹配。

简单说下为什么找不到对应的token：Angular Material的token系统主要聚焦在颜色、间距、字体这类通用的设计系统属性上，像下拉箭头这种组件内的细微元素尺寸，暂时没有单独抽成可配置的token，所以用上面两种方法是最直接有效的。

内容来源于stack exchange