Angular 如何在垫子表格字段旁边设置图标

我目前正在开发一个操作栏，其中包含几个按钮，这些按钮显示一些对当前数据进行过滤/排序的选项，但我在像其他元素一样调整元素的显示以获得良好的显示时遇到了困难.

enter image description here

这是我的动作栏，正如您在查看它时所预料的那样，我希望最后一个元素的图标与其他图标的高度相同，并且 Select 表单与其他元素的高度相同.

小澄清一下，每个按钮都会打开另一个组件的模板，例如，在下面的屏幕截图上，我点击了过滤器按钮，这就打开了过滤器组件模板.

这是我的代码:

动作栏模板:

<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>

过滤器组件模板:

<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>

我已经try 将图标放入垫子形式字段中，但它效果不佳，我也try 使用 bootstrap 程序，但同样，它效果不佳(也许我做错了什么，所以欢迎任何建议).

更新:我try 使用mat-icon，因为我发现了名为"matPreFix/matSuffix"的东西，但似乎它不起作用.