fix(material/button): anchor mat-icon-button as matSuffix focus misaligned

[TakumaKira]

Fixes misaligning anchor element with mat-icon-button applied. This also fixes misaligning on other elements like div.

Fixes #20949

[kryshac]

It doesn't work in firefox.

in chrome:

in firefox:

in firefox works only with display: inline-block;

.mat-icon-button {
    display: inline-block;
    font-size: inherit;
    width: 2.5em;
    height: 2.5em;
}

<mat-form-field  appearance="fill">
  <mat-label>Aggregation</mat-label>
  <mat-select [formControl]="control" name="food">
    <mat-option value="day">Day</mat-option>
    <mat-option value="week">Week</mat-option>
    <mat-option value="month">Month</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field appearance="fill">
  <mat-label>From</mat-label>
  <input matInput [matDatepicker]="picker1" [formControl]="controlFrom" />
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

<mat-form-field appearance="fill">
  <mat-label>To</mat-label>
  <input matInput [matDatepicker]="picker2" [formControl]="controlTo" />
  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

[TakumaKira]

@kryshac

Thank you for pointing it out.

in firefox works only with display: inline-block;

display: inline-flex; also fixes it. I pushed the change!

[mmalerba]

LGTM

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}