I’m currently working on an action-bar which contains a couple of buttons who displays some options to filter/sort current datas, but I’m having trouble tuning the display of an element like the others for a nice display.

enter image description here

Here is my action-bar, and as you can expect when you’re looking at it, I want the last element to have his icon at the same height as the others icons, and the select form to have the same height as the others elements.

Small clarification, each button opens the template of an another component, for example, on the following screenshot, I clicked on the filter button, and this opened the filter component template.

Here is my code :

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

Template of filter component :

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

I already try to put the icon inside the mat-form-field, but It didnt work well, I also tried to work with bootstrap, but same, It didnt work well (maybe I did something wrong so any suggestion is welcome).