Как установить значок рядом с полем mat-form-field?

В настоящее время я работаю над панелью действий, которая содержит пару кнопок, которые отображают некоторые параметры для фильтрации/сортировки текущих данных, но у меня возникли проблемы с настройкой отображения элемента, как и других, для хорошего отображения.

Вот моя панель действий, и, как вы можете ожидать, глядя на нее, я хочу, чтобы значок последнего элемента имел ту же высоту, что и другие значки, а форма выбора имела ту же высоту, что и остальные. элементы.

Небольшое уточнение: каждая кнопка открывает шаблон другого компонента, например, на следующем скриншоте я нажал на кнопку фильтра, и это открыло шаблон компонента фильтра.

Вот мой код:

Шаблон панели действий:

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

Я уже пытаюсь поместить значок в поле mat-form-field, но это сработало не очень хорошо. Я также пытался работать с начальной загрузкой, но то же самое, это не сработало (возможно, я сделал что-то не так, поэтому любые предложения приветствуются).

Обновление: я пытался использовать mat-icon, потому что нашел что-то под названием «matPrefix/matSuffix», но похоже, что это не работает...