fix(material/icon): mat-icon misaligned when text-spacing is applied #29686

Fixes an issue with Angular Components Material Icon component where when text-spacing is applied the icon gets misaligned and if inside of an input or container with an outline, the icon gets cut off. This fix adds css styling to keep the icon middle-aligned when text-spacing is applied. Fixes b/250063405

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

Updates previous fix to move added styles to bottom of scss file for overriding. Fixes b/250063405

Updates classes to target .mat-icon usage in other Angular Material Components (ie. list-item, list-option, grid-tile, form-field, tab, toolbar, and tooltip). Fixes b/250063405

Updates previous fix to target instances where its parent element has or applied to it and to override any , , or changes to the so it should stay the same. Fixes b/250063405

Updates previous fix to Angular Material Icon component to abide by the lint formatting. Fixes b/250063405

Updates previous change to consolidate the important styles that were added to ignore any externally placed text-spacing styles be added to be targeted by all .mat-icon situations. Fixes b/250063405

Updates previous fix to remove the inline targets and the usage of forced usage of styles as it is on the app to remove any overriding styles. Fixes b/250063405 BREAKING CHANGE: removes use of forced styles Updates the previous fix which uses "important" and removes it as any overrides should be fixed by the app mat-icon is used in instead.

Updates previous fix by updating documentation on the usage of mat-icon within mdc-button to notify developers that mat-icon is set to be hidden on mobile/xsmall screens to improve accessibility and recommends the usage of aria-label or aria-labelledby to notify screenreaders of the information that mat-icon is supposed to convey. Fixes b/250063405

Updates previous changes to icon.scss to remove unnecessary specificity targeting and just moves classes to be generalized under .mat-icon. Adds min-height and min-width to .mdc-button so that when buttons (with icons especially) do not allow its content to overflow outside of the button and maintaining its accessibility by not allowing overlapping of text/content. Fixes b/250063405

Updates notation to style change in icon.scss which undoes a previous bug fix for GH issue angular#11826. As this change is now deemed as an accessibility issue due to it being cut off/hidden. Fixes b/250063405 BREAKING CHANGE: undoes hiding icon overflow Reverts icon having its overflow visible to be more accessible.

…ext-spacing Updates previous fix to revert removal of overflow: hidden to remove the breaking change and updates the method of ensuring .mat-icon remains visible by applying flex-shrink to it so the icon does not get cut off and improves accessibility. Fixes b/250063405

Updates previous change to fix formatting for lint errors.

Updates previous fix to change .mat-mdc-button-base .mat-icon from height: min-content to min-height: min-content to avoid overriding the default .mat-icon height: 24px. This way it defaults to min-content if the height becomes smaller than the 24px. Fixes b/250063405

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(material/icon): mat-icon misaligned when text-spacing is applied #29686

fix(material/icon): mat-icon misaligned when text-spacing is applied #29686

Commits on Nov 20, 2024

fix(material/icon): mat-icon misaligned when text-spacing is applied #29686

Are you sure you want to change the base?

fix(material/icon): mat-icon misaligned when text-spacing is applied #29686

Commits on Nov 20, 2024