如何为mat-form-field设置旁侧图标并实现元素样式对齐？

我正在开发一个包含过滤/排序数据选项按钮的action bar，调整最后一个元素的样式时遇到了问题：如图所示，我需要让最后一个元素的图标高度和其他图标保持一致，同时让它的select表单高度和其他元素相同。

补充说明：每个按钮点击后会展开对应组件的模板，截图里就是点击筛选按钮后展开的filter组件内容。

代码示例 #

Action Bar 模板 #

<div class="container d-flex flex-wrap align-items-center justify-content-md-center">
  <app-export
  (outExport)="handleExport($event)"
  class="me-5">
  </app-export>

  <div *ngIf="showStats" class="me-5">
    <button type="button" class="btn btn-outline-secondary d-flex align-items-center" (click)="openStatsDialog()" data-bs-toggle="modal-dialog"><i class="bi bi-graph-up mx-1"></i> {{ "component.filter.filter.stats.title" | translate }}
    </button>
  </div>

  <app-display
  (outDisplayChange)="handleDisplayChange($event)"
  class="me-5">
  </app-display>

  <button class="btn btn-outline-secondary me-5" type="button" data-bs-toggle="collapse" data-bs-target="#filters" aria-expanded="false" aria-controls="filters"
  [ngClass]="{'active': filterOpened}" (click)="filterOpened = !filterOpened">
    <i class="bi bi-funnel"></i> {{ "component.filter.input.name" | translate }}
  </button>
  
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#sorts" aria-expanded="false" aria-controls="sorts"
  [ngClass]="{'active': sortOpened}" (click)="sortOpened = !sortOpened">
    <i class="bi bi-sort-alpha-down"></i> {{ "component.filter.filter.sorting.title" | translate }}
  </button>
</div>

<app-filter
    (outFilter)="handleFilter($event)"
    (outFilterAuthor)="handleFilterAuthor($event)"
    (outFilterTitle)="handleFilterTitle($event)"
    [docs]= "docs"
    class="me-5">
</app-filter>
    
<app-sort
    (outFilterOrder)="handleOrderFilter($event)"
    class="me-5">
</app-sort>

Filter 组件模板 #

<div class="row collapse multi-collapse mt-4" id="filters">
    <div class="d-flex flex-wrap align-items-center">
        <div class="input-group me-3 col">
          <div class="input-group-prepend">
            <span class="input-group-text h-100"><i class="bi bi-pencil-square"></i></span>
          </div>
          <input #title type="text" class="form-control text-center" (input)="filtreTitre()" [placeholder]="'component.filter.input.title' | translate">
        </div>
      
          <div class="input-group me-3 col">
            <div class="input-group-prepend">
              <span class="input-group-text h-100"><i class="bi bi-person"></i></span>
            </div>
            <input #auth type="text" class="form-control text-center" (input)="filtreAuteur()" [placeholder]="'component.filter.input.author' | translate">
          </div>
      
          <div class="input-group col">
            <span class="input-group-prepend input-group-text h-100" style="align-self:flex-start;"><i class="bi bi-file-earmark"></i></span>
            <mat-form-field [formGroup]="filterGroup" appearance="fill">
              <mat-label>{{ "component.filter.input.doctype" | translate }}</mat-label>
              <mat-select multiple formGroupName="docType" (selectionChange)="onSelectionChange($event, 'docType', true)" [(value)]="selectedDocTypes">
                <ng-container *ngFor="let doc of docTypes">
                  <mat-option [value]="doc.code" *ngIf="doc.code !== 'POSTER'">{{ 'global.doctypes.' + doc.code | translate }}</mat-option>
                </ng-container>
              </mat-select> 
            </mat-form-field>
          </div>
    </div>
</div>

已尝试的解决方案 #

• 将图标放入mat-form-field，效果不佳
• 尝试使用Bootstrap样式调整，未解决（可能操作有误）
• 更新尝试：使用mat-icon配合matPrefix/matSuffix，仍然无效

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