bug(BUTTON): Icon button is not centered within ripple, causes input height change

[karmasakshi]

trafficstars

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

2 issues: When putting the clear option in an input, it's seen that the icon is not centered within its ripple. Additionally, when using a custom font, it is seen that the line-height causes the input to increase in height as soon as the icon appears. The issue seems to be:

.mat-form-field-suffix .mat-icon-button .mat-icon { line-height: 1.125 }. This can be solved by setting line-height: 1. Attaching screenshot, video and link from Docs for reference.

https://stackblitz.com/run?file=src/app/input-clearable-example.ts

https://user-images.githubusercontent.com/4698762/181879134-b2a17374-cdbd-4100-8d90-13bbfb7aad11.mov

Reproduction

Steps to reproduce:

1. Use a clearable input, input text

Alternatively, also use a custom font to see the height issue:

@use '@angular/material' as am;

@font-face {
  font-display: swap;
  font-family: 'Nova';
  font-style: normal;
  font-weight: 300;
  src: url('assets/fonts/Nova-300.woff2') format('woff2');
}

$my-typography: am.define-typography-config(
  $font-family: "'Nova', sans-serif",
);

@include am.core($my-typography);

Expected Behavior

1. Icon should be centered
2. Height should remain consistent irrespective of the font

Actual Behavior

1. Icon is not centered
2. Height is not consistent

Environment

• Angular: 14.1.0
• CDK/Material: 14.1.0
• Browser(s): Chrome and Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): macOS