Components: bug(mat-form-field): anchor mat-icon-button as matSuffix focus misaligned

[Totati]

Reproduction

Demo

Steps to reproduce:

1. focus the suffix of the Link input

Expected Behavior

Have the same alignment as the Button input's suffix.

Actual Behavior

It's misaligned

Environment

• Angular: 10.2.1
• CDK/Material: 10.2.6
• Browser(s): Chrome latest
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[abu-sufyan1]

You can solve this, this way -

<mat-form-field appearance="fill"> <mat-label>Link</mat-label> <input matInput placeholder="Placeholder" /> <button onclick="window.open('www.google.com', '_blank');" mat-icon-button matSuffix> <mat-icon>open_in_new</mat-icon> </button> </mat-form-field>

[TakumaKira]

Hi @Totati!

I created the PR for this.

Temporarily, you can apply the identical fix by adding below on styles.scss.

.mat-icon-button {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

[angular-automatic-lock-bot[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._}