Skip to content

Commit ab16b1f

Browse files
crisbetocrisbeto
authored
fix(multiple): include material symbols in selectors (#33754)
Updates the various selectors where we look for `.material-icons` to also include the classes for Material Symbols. Related to #24845.
1 parent 5d64e39 commit ab16b1f

8 files changed

Lines changed: 44 additions & 16 deletions

File tree

‎goldens/material/button/index.api.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export class MatButton extends MatButtonBase {
3333
set appearance(value: MatButtonAppearance | '');
3434
setAppearance(appearance: MatButtonAppearance): void;
3535
// (undocumented)
36-
static ɵcmp: i0.ɵɵComponentDeclaration<MatButton, " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", ["matButton", "matAnchor"], { "appearance": { "alias": "matButton"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]", "[progressIndicator]"], true, never>;
36+
static ɵcmp: i0.ɵɵComponentDeclaration<MatButton, " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", ["matButton", "matAnchor"], { "appearance": { "alias": "matButton"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd]), .material-symbols-outlined:not([iconPositionEnd]), .material-symbols-rounded:not([iconPositionEnd]), .material-symbols-sharp:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd], .material-symbols-outlined[iconPositionEnd], .material-symbols-rounded[iconPositionEnd], .material-symbols-sharp[iconPositionEnd]", "[progressIndicator]"], true, never>;
3737
// (undocumented)
3838
static ɵfac: i0.ɵɵFactoryDeclaration<MatButton, never>;
3939
}
@@ -74,7 +74,7 @@ export class MatFabButton extends MatButtonBase {
7474
// (undocumented)
7575
static ngAcceptInputType_extended: unknown;
7676
// (undocumented)
77-
static ɵcmp: i0.ɵɵComponentDeclaration<MatFabButton, "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", ["matButton", "matAnchor"], { "extended": { "alias": "extended"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]", "[progressIndicator]"], true, never>;
77+
static ɵcmp: i0.ɵɵComponentDeclaration<MatFabButton, "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", ["matButton", "matAnchor"], { "extended": { "alias": "extended"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd]), .material-symbols-outlined:not([iconPositionEnd]), .material-symbols-rounded:not([iconPositionEnd]), .material-symbols-sharp:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd], .material-symbols-outlined[iconPositionEnd], .material-symbols-rounded[iconPositionEnd], .material-symbols-sharp[iconPositionEnd]", "[progressIndicator]"], true, never>;
7878
// (undocumented)
7979
static ɵfac: i0.ɵɵFactoryDeclaration<MatFabButton, never>;
8080
}
@@ -111,7 +111,7 @@ export class MatMiniFabButton extends MatButtonBase {
111111
// (undocumented)
112112
_isFab: boolean;
113113
// (undocumented)
114-
static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabButton, "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", ["matButton", "matAnchor"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]", "[progressIndicator]"], true, never>;
114+
static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabButton, "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", ["matButton", "matAnchor"], {}, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd]), .material-symbols-outlined:not([iconPositionEnd]), .material-symbols-rounded:not([iconPositionEnd]), .material-symbols-sharp:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd], .material-symbols-outlined[iconPositionEnd], .material-symbols-rounded[iconPositionEnd], .material-symbols-sharp[iconPositionEnd]", "[progressIndicator]"], true, never>;
115115
// (undocumented)
116116
static ɵfac: i0.ɵɵFactoryDeclaration<MatMiniFabButton, never>;
117117
}

‎src/dev-app/list/list-demo.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ <h2>Dense lists</h2>
100100
<mat-list-item>
101101
<span matListItemTitle>{{ link.name }}</span>
102102
<button matListItemMeta matIconButton (click)="infoClicked=!infoClicked">
103-
<mat-icon class="material-icons">info</mat-icon>
103+
<mat-icon>info</mat-icon>
104104
</button>
105105
</mat-list-item>
106106
}

‎src/material-experimental/menubar/menubar-item.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,12 @@ import {CdkMenuItem} from '@angular/cdk/menu';
1111

1212
/** Removes all icons from within the given element. */
1313
function removeIcons(element: Element) {
14-
for (const icon of Array.from(element.querySelectorAll('mat-icon, .material-icons'))) {
14+
const icons = element.querySelectorAll(
15+
'mat-icon, .material-icons, .material-symbols-outlined, ' +
16+
'.material-symbols-rounded, .material-symbols-sharp',
17+
);
18+
19+
for (const icon of Array.from(icons)) {
1520
icon.remove();
1621
}
1722
}

‎src/material/button/_button-base.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -148,15 +148,17 @@
148148
$icon-offset: token-utils.slot($icon-offset-token, $fallbacks, true);
149149

150150
@if ($with-icon-horizontal-padding-token) {
151-
// stylelint-disable-next-line selector-class-pattern
152-
&:has(.material-icons, mat-icon, [matButtonIcon]) {
151+
// stylelint-disable selector-class-pattern
152+
&:has(.material-icons, .material-symbols-outlined, .material-symbols-rounded,
153+
.material-symbols-sharp, mat-icon, [matButtonIcon]) {
153154
padding: 0 token-utils.slot($with-icon-horizontal-padding-token, $fallbacks, true);
154155
}
156+
// stylelint-enable selector-class-pattern
155157
}
156158

157159
// MDC expects button icons to contain this HTML content:
158160
// ```html
159-
// <span class="mdc-button__icon material-icons">favorite</span>
161+
// <span class="mdc-button__icon material-symbols-outlined">favorite</span>
160162
// ```
161163
// However, Angular Material expects a `mat-icon` instead. The following
162164
// styles will lay out the icons appropriately.

‎src/material/button/button.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
></span>
66

77
<ng-content
8-
select=".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])"
8+
select=".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd]), .material-symbols-outlined:not([iconPositionEnd]), .material-symbols-rounded:not([iconPositionEnd]), .material-symbols-sharp:not([iconPositionEnd])"
99
>
1010
</ng-content>
1111

1212
<span class="mdc-button__label"><ng-content></ng-content></span>
1313

1414
<ng-content
15-
select=".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"
15+
select=".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd], .material-symbols-outlined[iconPositionEnd], .material-symbols-rounded[iconPositionEnd], .material-symbols-sharp[iconPositionEnd]"
1616
>
1717
</ng-content>
1818

‎src/material/button/fab.scss‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,17 @@ $indicator-offset: calc(#{$border-width} + 2px);
7676
// ```
7777
// However, Angular Material expects a `mat-icon` instead. The following
7878
// mixin will style the icons appropriately.
79-
// stylelint-disable-next-line selector-class-pattern
80-
.mat-icon, .material-icons {
79+
// stylelint-disable selector-class-pattern
80+
.mat-icon,
81+
.material-icons,
82+
.material-symbols-outlined,
83+
.material-symbols-rounded,
84+
.material-symbols-sharp {
8185
transition: transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);
8286
fill: currentColor;
8387
will-change: transform;
8488
}
89+
// stylelint-enable selector-class-pattern
8590

8691
.mat-focus-indicator::before {
8792
margin: calc(#{$indicator-offset} * -1);
@@ -214,16 +219,28 @@ $indicator-offset: calc(#{$border-width} + 2px);
214219
// uses the same template as button.
215220
[dir='rtl'] & .mdc-button__label + .mat-icon,
216221
[dir='rtl'] & .mdc-button__label + .material-icons,
222+
[dir='rtl'] & .mdc-button__label + .material-symbols-outlined,
223+
[dir='rtl'] & .mdc-button__label + .material-symbols-rounded,
224+
[dir='rtl'] & .mdc-button__label + .material-symbols-sharp,
217225
> .mat-icon,
218-
> .material-icons {
226+
> .material-icons,
227+
> .material-symbols-outlined,
228+
> .material-symbols-rounded,
229+
> .material-symbols-sharp {
219230
margin-left: -8px;
220231
margin-right: 12px;
221232
}
222233

223234
.mdc-button__label + .mat-icon,
224235
.mdc-button__label + .material-icons,
236+
.mdc-button__label + .material-symbols-outlined,
237+
.mdc-button__label + .material-symbols-rounded,
238+
.mdc-button__label + .material-symbols-sharp,
225239
[dir='rtl'] & > .mat-icon,
226-
[dir='rtl'] & > .material-icons {
240+
[dir='rtl'] & > .material-icons,
241+
[dir='rtl'] & > .material-symbols-outlined,
242+
[dir='rtl'] & > .material-symbols-rounded,
243+
[dir='rtl'] & > .material-symbols-sharp {
227244
margin-left: 12px;
228245
margin-right: -8px;
229246
}

‎src/material/menu/menu-item.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,10 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
163163
/** Gets the label to be used when determining whether the option should be focused. */
164164
getLabel(): string {
165165
const clone = this._elementRef.nativeElement.cloneNode(true) as HTMLElement;
166-
const icons = clone.querySelectorAll('mat-icon, .material-icons');
166+
const icons = clone.querySelectorAll(
167+
'mat-icon, .material-icons, .material-symbols-outlined, ' +
168+
'.material-symbols-rounded, .material-symbols-sharp',
169+
);
167170

168171
// Strip away icons, so they don't show up in the text.
169172
for (let i = 0; i < icons.length; i++) {

‎src/material/menu/menu.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,8 @@ mat-menu {
132132

133133
@include button-common.reset;
134134

135-
$icons-selector: '.material-icons, mat-icon, [matButtonIcon]';
135+
$icons-selector: '.material-icons, .material-symbols-outlined, .material-symbols-rounded, ' +
136+
'.material-symbols-sharp, mat-icon, [matButtonIcon]';
136137

137138
[dir='rtl'] & {
138139
padding-left: token-utils.slot(menu-item-trailing-spacing, $fallbacks);

0 commit comments

Comments
 (0)