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

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

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

Fixes #20949

* fix(material/button): fix height is increased in firefox

Fixes #20949

Co-authored-by: Takuma Kira <[email protected]>
(cherry picked from commit 54d6b3e)

Author: 2 people

src/material/button/button.scss

@@ -143,7 +143,9 @@
   .mat-form-field-prefix,
   .mat-form-field-suffix {
     .mat-icon-button {
-      display: block;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
       font-size: inherit;
       width: 2.5em;
       height: 2.5em;