Angular Material图标按钮与输入框对齐及尺寸适配问题

问题背景 #

开发自定义Angular CDK Material下拉菜单时遇到以下问题：

• 编辑模式下，mat-icon-button的图标本身尺寸极小，但被固定40px的内部span包裹，导致整行布局被撑开
• 按钮显示时高度过高，破坏了和输入框的行内对齐效果
• 此前尝试调整样式，但内部自动生成的span始终保持40px尺寸，无法和输入框、图标对齐，除非强制将整行高度设为40px以上

相关HTML结构：

<div style="border: 1px solid black">
  {{label}}:
  <input
    matInput
    class="inputFieldText"
    [value]="description"
    [disabled]="isDisabled"
    [readonly]="isReadOnly"
  />
  <button
    mat-icon-button
    class="custom-icon-btn"
    style="border: 1px solid red"
    [disabled]="isDisabled"
    [hidden]="isReadOnly"
    [dropdownTriggerFor]="dropdown"
  >
    <mat-icon>arrow_drop_down</mat-icon>
  </button>
</div>

<dropdown-panel #dropdown>
  @for (item of data; track item.value) {
  <div (click)="select(item.value,item.description)" class="dropdown-item">
    {{item.description}}
  </div>
  }
</dropdown-panel>

解决方案 #

通过自定义CSS覆盖Material默认样式，同时调整图标和按钮尺寸，实现对齐：

1. 重置按钮默认内边距和高度 #

mat-icon-button默认有固定内边距和最小高度，先重置这些属性：

.custom-icon-btn {
  /* 去除默认内边距 */
  padding: 0;
  /* 取消最小高度限制，让按钮高度由内容决定 */
  min-height: unset;
  /* 让按钮和输入框基线对齐 */
  vertical-align: middle;
}

2. 调整内部span尺寸 #

mat-icon-button内部自动生成的.mat-mdc-icon-button-touch-target是导致40px高度的核心元素，修改其尺寸：

.custom-icon-btn .mat-mdc-icon-button-touch-target {
  /* 覆盖默认40px尺寸，让它和图标大小匹配 */
  width: 24px;
  height: 24px;
}

3. 放大图标并对齐 #

调整mat-icon尺寸，保证和输入框垂直对齐：

.custom-icon-btn mat-icon {
  /* 按需设置图标大小，这里设为20px匹配输入框高度 */
  font-size: 20px;
  height: 20px;
  width: 20px;
  /* 垂直居中 */
  vertical-align: middle;
}

4. 优化输入框对齐（可选） #

如果输入框基线仍有偏差，添加垂直对齐调整：

.inputFieldText {
  vertical-align: middle;
}

效果说明 #

应用以上样式后：

• 按钮高度会和图标、输入框高度匹配，不再撑高整行
• 图标放大后与输入框对齐整齐
• 内部span不再占用多余空间，布局恢复正常

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