Skip to content

Commit

Permalink
fix(material/icon): changes overflow to visible for button icon
Browse files Browse the repository at this point in the history
Updates styles for Angular Material Icon so when the icon is
within a button it sets the overflow to visible to avoid the
icon from being cutoff. Also updates the line-height to 1 set

Fixes b/250063405
  • Loading branch information
essjay05 committed Sep 4, 2024
1 parent 43ac1f7 commit 2030bac
Showing 1 changed file with 9 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/material/icon/icon.scss
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,14 @@ mat-icon {
transform: scale(-1, 1);
}

// Makes button icon overflow visible to fix b/250063405
.mat-mdc-icon-button .mat-icon,
.mdc-button .mat-icon,
.mat-mdc-fab-base .mat-icon {
overflow: visible;
line-height: 1 !important;
}

.mat-form-field:not(.mat-form-field-appearance-legacy) {
.mat-form-field-prefix,
.mat-form-field-suffix {
Expand All @@ -60,6 +68,7 @@ mat-icon {

.mat-icon-button .mat-icon {
margin: auto;
overflow: visible;
}
}
}

0 comments on commit 2030bac

Please sign in to comment.