We have a mat-select element and a mat-icon element contained within a flexbox and we want to align the mat-icon to the visible vertical center of the mat-select.

Approach

To mat-icon inline style property add position: relative; bottom: 20px;

<div style="display: flex; align-items: center;">
  <mat-form-field appearance="fill">
    <mat-label>Favorite food</mat-label>
    <mat-select [formControl]="control">
      <mat-option *ngFor="let food of foods" [value]="food.value">
        {{food.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <mat-icon
    style="color: green; font-size: 44px; margin-left: 1rem; position: relative; bottom: 20px;"
    >check_circle</mat-icon
  >
</div>

Relative Positioning of Elements Contained in a Flexbox | Task

Scenario

Approach

Demo