From b43f100b87272d481016fbf27890ab6c693f5038 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Tue, 3 Sep 2024 21:28:23 +0000 Subject: [PATCH 01/14] fix(material/icon): mat-icon misaligned when text-spacing is applied 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 --- src/material/icon/icon.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/material/icon/icon.scss b/src/material/icon/icon.scss index 10cf58d39fa3..6e6fbc282eb0 100644 --- a/src/material/icon/icon.scss +++ b/src/material/icon/icon.scss @@ -28,6 +28,7 @@ mat-icon { fill: currentColor; height: $size; width: $size; + vertical-align: middle; // In some cases the icon elements may extend beyond the container. Clip these cases // in order to avoid weird overflows and click areas. See #11826. From 3d66d8772285c0088d50f9ac049dca1d0150c61b Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Tue, 3 Sep 2024 22:23:27 +0000 Subject: [PATCH 02/14] fix(material/icon): changes overflow to visible for button icon 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 --- src/material/icon/icon.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/material/icon/icon.scss b/src/material/icon/icon.scss index 6e6fbc282eb0..8b94d63c3cdf 100644 --- a/src/material/icon/icon.scss +++ b/src/material/icon/icon.scss @@ -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 { @@ -60,6 +68,7 @@ mat-icon { .mat-icon-button .mat-icon { margin: auto; + overflow: visible; } } } From d6b9b9182d5fd1e11d86a20012f6c7484641fe3c Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Wed, 4 Sep 2024 18:13:40 +0000 Subject: [PATCH 03/14] refactor(material/icon): moves styles to bottom of scss file Updates previous fix to move added styles to bottom of scss file for overriding. Fixes b/250063405 --- src/material/icon/icon.scss | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/material/icon/icon.scss b/src/material/icon/icon.scss index 8b94d63c3cdf..837e9942c657 100644 --- a/src/material/icon/icon.scss +++ b/src/material/icon/icon.scss @@ -51,14 +51,6 @@ 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 { @@ -72,3 +64,10 @@ mat-icon { } } } + +// 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; +} From 38a4cfb2a30fd2165c3ac8493265e3375877de0d Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 13 Sep 2024 21:19:41 +0000 Subject: [PATCH 04/14] fix(material/icon): updates to include .mat-icon variants 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 --- src/material/icon/icon.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/material/icon/icon.scss b/src/material/icon/icon.scss index 837e9942c657..678c150bfa95 100644 --- a/src/material/icon/icon.scss +++ b/src/material/icon/icon.scss @@ -28,7 +28,6 @@ mat-icon { fill: currentColor; height: $size; width: $size; - vertical-align: middle; // In some cases the icon elements may extend beyond the container. Clip these cases // in order to avoid weird overflows and click areas. See #11826. @@ -68,6 +67,13 @@ mat-icon { // 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 { +.mat-mdc-fab-base .mat-icon, +.mat-toolbar .mat-icon, +.mat-mdc-tooltip-trigger .mat-icon, +.mat-mdc-tab .mat-icon, +.mat-mdc-form-field .mat-icon, +.mat-grid-tile .mat-icon, +.mat-mdc-list-item .mat-icon, +.mat-mdc-list-option .mat-icon { overflow: visible; } From 270673d27f89c4b7fa05f4a88faf558b4cab7393 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 23 Sep 2024 20:34:29 +0000 Subject: [PATCH 05/14] fix(material/icon): added styling for icon to ignore text-spacing 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 --- src/material/icon/icon.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/material/icon/icon.scss b/src/material/icon/icon.scss index 678c150bfa95..84e6aa835fda 100644 --- a/src/material/icon/icon.scss +++ b/src/material/icon/icon.scss @@ -45,6 +45,13 @@ mat-icon { } } +.mat-icon:has(div[style*="letter-spacing:"]):has(div[style*="word-spacing:"]) { + /* Apply styles to avoid text spacing */ + letter-spacing: 0 !important; + word-spacing: 0 !important; + line-height: 1 !important; +} + // Icons that will be mirrored in RTL. [dir='rtl'] .mat-icon-rtl-mirror { transform: scale(-1, 1); From ceb884650be80248b89761475b6badb02f08fed1 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Tue, 1 Oct 2024 21:57:45 +0000 Subject: [PATCH 06/14] refactor(material/icon): fixed lint errors Updates previous fix to Angular Material Icon component to abide by the lint formatting. Fixes b/250063405 --- src/material/icon/icon.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/material/icon/icon.scss b/src/material/icon/icon.scss index 84e6aa835fda..52e4e80cb8e4 100644 --- a/src/material/icon/icon.scss +++ b/src/material/icon/icon.scss @@ -45,8 +45,8 @@ mat-icon { } } -.mat-icon:has(div[style*="letter-spacing:"]):has(div[style*="word-spacing:"]) { - /* Apply styles to avoid text spacing */ +.mat-icon:has(div[style*='letter-spacing:']):has(div[style*='word-spacing:']) { + // Apply styles to avoid text spacing letter-spacing: 0 !important; word-spacing: 0 !important; line-height: 1 !important; From 7f70957bb2d01156a9affbe91863b559226a2e40 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Thu, 3 Oct 2024 17:16:18 +0000 Subject: [PATCH 07/14] refactor(material/icon): consolidate styles to ignore text-spacing 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 --- src/material/icon/icon.scss | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/material/icon/icon.scss b/src/material/icon/icon.scss index 52e4e80cb8e4..73c1d23b66d6 100644 --- a/src/material/icon/icon.scss +++ b/src/material/icon/icon.scss @@ -45,13 +45,6 @@ mat-icon { } } -.mat-icon:has(div[style*='letter-spacing:']):has(div[style*='word-spacing:']) { - // Apply styles to avoid text spacing - letter-spacing: 0 !important; - word-spacing: 0 !important; - line-height: 1 !important; -} - // Icons that will be mirrored in RTL. [dir='rtl'] .mat-icon-rtl-mirror { transform: scale(-1, 1); @@ -81,6 +74,11 @@ mat-icon { .mat-mdc-form-field .mat-icon, .mat-grid-tile .mat-icon, .mat-mdc-list-item .mat-icon, -.mat-mdc-list-option .mat-icon { +.mat-mdc-list-option .mat-icon, +.mat-icon:has(div[style*='letter-spacing:']):has(div[style*='word-spacing:']) { overflow: visible; + // Apply styles to avoid text spacing + letter-spacing: 0 !important; + word-spacing: 0 !important; + line-height: 1 !important; } From 3201ce5bd4f444f89810d3a5d60c51b067683bfa Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 7 Oct 2024 22:10:17 +0000 Subject: [PATCH 08/14] refactor(material/icon): removes important and inline styles 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. --- src/material/icon/icon.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/material/icon/icon.scss b/src/material/icon/icon.scss index 73c1d23b66d6..224c001cacc3 100644 --- a/src/material/icon/icon.scss +++ b/src/material/icon/icon.scss @@ -74,11 +74,10 @@ mat-icon { .mat-mdc-form-field .mat-icon, .mat-grid-tile .mat-icon, .mat-mdc-list-item .mat-icon, -.mat-mdc-list-option .mat-icon, -.mat-icon:has(div[style*='letter-spacing:']):has(div[style*='word-spacing:']) { +.mat-mdc-list-option .mat-icon { overflow: visible; // Apply styles to avoid text spacing - letter-spacing: 0 !important; - word-spacing: 0 !important; - line-height: 1 !important; + letter-spacing: 0; + word-spacing: 0; + line-height: 1; } From 6af4588fcba0dd20d9cabcd82b737210450aba3d Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 7 Oct 2024 22:47:20 +0000 Subject: [PATCH 09/14] fix(material/icon): hides .mdc-button .mat-icon on mobile screens 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 --- src/material/icon/icon.md | 9 +++++++++ src/material/icon/icon.scss | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/src/material/icon/icon.md b/src/material/icon/icon.md index 4063a860a10f..9a151c0b0304 100644 --- a/src/material/icon/icon.md +++ b/src/material/icon/icon.md @@ -117,6 +117,15 @@ information as the icon. 2. Add the `cdk-visually-hidden` class to the ``. This will make the message invisible on-screen but still available to screen-reader users. +##### Interactive / Indicator icons within a button +* *Note that when the presence of an icon in a button is supposed to communicate some +information to the user or by being inlined into a block of text, as mentioned by +Interactive icons above, an appropriate element should "own" the icon with interaction: +* The `` element should be a child of a `