From 088ba1a414407d4ce8c4c40621ef47891a5ea582 Mon Sep 17 00:00:00 2001 From: Amy Sorto <8575252+amysorto@users.noreply.github.com> Date: Mon, 18 Nov 2024 16:35:01 +0000 Subject: [PATCH] feat(material/icon): Change icon font default to Material symbols from Material icons --- guides/getting-started.md | 4 ++-- guides/schematics.md | 11 +++++++---- integration/yarn-pnp-compat/src/index.html | 2 +- src/e2e-app/index.html | 2 +- src/material/icon/icon-registry.ts | 6 +++--- src/material/icon/icon.md | 11 +++++------ src/material/icon/icon.spec.ts | 12 ++++++------ src/material/icon/testing/fake-icon-registry.ts | 2 +- .../schematics/ng-add/fonts/material-fonts.ts | 2 +- src/material/schematics/ng-add/index.spec.ts | 2 +- src/universal-app/index-source.html | 2 +- 11 files changed, 29 insertions(+), 27 deletions(-) diff --git a/guides/getting-started.md b/guides/getting-started.md index 059ff4351e31..45389bf6326c 100644 --- a/guides/getting-started.md +++ b/guides/getting-started.md @@ -35,7 +35,7 @@ The `ng add` command will additionally perform the following actions: * Add project dependencies to `package.json` * Add the Roboto font to your `index.html` -* Add the Material Design icon font to your `index.html` +* Add the Material Symbols icon font to your `index.html` * Add a few global CSS styles to: * Remove margins from `body` * Set `height: 100%` on `html` and `body` @@ -48,7 +48,7 @@ You're done! Angular Material is now configured to be used in your application. Let's display a slide toggle component in your app and verify that everything works. You need to import the `MatSlideToggleModule` that you want to display by adding the following lines to -your standalone component's imports, or otherwise your component's `NgModule`. +your standalone component's imports, or otherwise your component's `NgModule`. ```ts import { MatSlideToggleModule } from '@angular/material/slide-toggle'; diff --git a/guides/schematics.md b/guides/schematics.md index 25d14101e6d9..c5d232075aad 100644 --- a/guides/schematics.md +++ b/guides/schematics.md @@ -22,13 +22,16 @@ In case you just want to install the `@angular/cdk`, there are also schematics f ng add @angular/cdk ``` -The Angular Material `ng add` schematic helps you set up an Angular CLI project that uses Material. Running `ng add` will: +The Angular Material `ng add` schematic helps you set up an Angular CLI project that uses Material. +See the [`getting started guide](./getting-started#install-angular-material) for more information. -- Ensure [project dependencies](./getting-started#step-1-install-angular-material-angular-cdk-and-angular-animations) are placed in `package.json` -- Enable the [BrowserAnimationsModule](./getting-started#step-2-configure-animations) in your app module +Running `ng add` will: + +- Ensure project dependencies are placed in `package.json` +- Enable the BrowserAnimationsModule in your app module - Add either a prebuilt theme or a custom theme - Add Roboto fonts to your `index.html` -- Add the [Material Icon font](./getting-started#step-6-optional-add-material-icons) to your `index.html` +- Add the Material Symbols font to your `index.html` - Add global styles to - Remove margins from `body` - Set `height: 100%` on `html` and `body` diff --git a/integration/yarn-pnp-compat/src/index.html b/integration/yarn-pnp-compat/src/index.html index dc58be14fdd7..65fc76e825e9 100644 --- a/integration/yarn-pnp-compat/src/index.html +++ b/integration/yarn-pnp-compat/src/index.html @@ -8,7 +8,7 @@ - + diff --git a/src/e2e-app/index.html b/src/e2e-app/index.html index 32b525b4f1c0..35e390350bc4 100644 --- a/src/e2e-app/index.html +++ b/src/e2e-app/index.html @@ -7,7 +7,7 @@ - + diff --git a/src/material/icon/icon-registry.ts b/src/material/icon/icon-registry.ts index 004a74060d93..f4f0cc37df94 100644 --- a/src/material/icon/icon-registry.ts +++ b/src/material/icon/icon-registry.ts @@ -145,10 +145,10 @@ export class MatIconRegistry implements OnDestroy { /** * The CSS classes to apply when an `` component has no icon name, url, or font - * specified. The default 'material-icons' value assumes that the material icon font has been - * loaded as described at https://google.github.io/material-design-icons/#icon-font-for-the-web + * specified. The default 'material-symbols-outlined' value assumes that the material icon font + * has been loaded as described at https://google.github.io/material-design-icons/#icon-font-for-the-web */ - private _defaultFontSetClass = ['material-icons', 'mat-ligature-font']; + private _defaultFontSetClass = ['material-symbols-outlined', 'mat-ligature-font']; constructor( @Optional() private _httpClient: HttpClient, diff --git a/src/material/icon/icon.md b/src/material/icon/icon.md index 4063a860a10f..37761136d2a2 100644 --- a/src/material/icon/icon.md +++ b/src/material/icon/icon.md @@ -17,14 +17,13 @@ Some fonts are designed to show icons by using component. By default, `` expects the -[Material icons font](https://google.github.io/material-design-icons/#icon-font-for-the-web). +[Material Symbols](https://developers.google.com/fonts/docs/material_symbols#use_in_web). (You will still need to include the HTML to load the font and its CSS, as described in the link). -You can specify a different font, such as Material's latest icons, -[Material Symbols](https://fonts.google.com/icons), by setting the `fontSet` input to either the -CSS class to apply to use the desired font, or to an alias previously registered with -`MatIconRegistry.registerFontClassAlias`. Alternatively you can set the default for all -your application's icons using `MatIconRegistry.setDefaultFontSetClass`. +You can specify a different font, set the `fontSet` input to either the CSS class to apply to the +desired font, or to an alias previously registered with `MatIconRegistry.registerFontClassAlias`. +Alternatively you can set the default for all your application's icons using +`MatIconRegistry.setDefaultFontSetClass`. ### Font icons with CSS diff --git a/src/material/icon/icon.spec.ts b/src/material/icon/icon.spec.ts index 84f9971285b9..206cd4f232ec 100644 --- a/src/material/icon/icon.spec.ts +++ b/src/material/icon/icon.spec.ts @@ -122,7 +122,7 @@ describe('MatIcon', () => { 'mat-icon', 'mat-ligature-font', 'mat-primary', - 'material-icons', + 'material-symbols-outlined', 'notranslate', ]); }); @@ -141,7 +141,7 @@ describe('MatIcon', () => { 'mat-icon', 'mat-icon-no-color', 'mat-ligature-font', - 'material-icons', + 'material-symbols-outlined', 'notranslate', ]); }); @@ -178,7 +178,7 @@ describe('MatIcon', () => { }); describe('Ligature icons', () => { - it('should add material-icons and mat-ligature-font class by default', () => { + it('should add material-symbols-outlined and mat-ligature-font class by default', () => { const fixture = TestBed.createComponent(IconWithLigature); const testComponent = fixture.componentInstance; @@ -190,7 +190,7 @@ describe('MatIcon', () => { 'mat-icon', 'mat-icon-no-color', 'mat-ligature-font', - 'material-icons', + 'material-symbols-outlined', 'notranslate', ]); }); @@ -265,7 +265,7 @@ describe('MatIcon', () => { expect(icon.getAttribute('fontIcon')).toBe('house'); }); - it('should add material-icons and mat-ligature-font class by default', () => { + it('should add material-symbols-outlined and mat-ligature-font class by default', () => { const fixture = TestBed.createComponent(IconWithLigatureByAttribute); const testComponent = fixture.componentInstance; @@ -277,7 +277,7 @@ describe('MatIcon', () => { 'mat-icon', 'mat-icon-no-color', 'mat-ligature-font', - 'material-icons', + 'material-symbols-outlined', 'notranslate', ]); }); diff --git a/src/material/icon/testing/fake-icon-registry.ts b/src/material/icon/testing/fake-icon-registry.ts index 0045b58c3284..75e7c70c0788 100644 --- a/src/material/icon/testing/fake-icon-registry.ts +++ b/src/material/icon/testing/fake-icon-registry.ts @@ -61,7 +61,7 @@ export class FakeMatIconRegistry implements PublicApi, OnDestro } getDefaultFontSetClass() { - return ['material-icons']; + return ['material-symbols-outlined']; } getSvgIconFromUrl(): Observable { diff --git a/src/material/schematics/ng-add/fonts/material-fonts.ts b/src/material/schematics/ng-add/fonts/material-fonts.ts index 2470c768521e..56c7c988a849 100644 --- a/src/material/schematics/ng-add/fonts/material-fonts.ts +++ b/src/material/schematics/ng-add/fonts/material-fonts.ts @@ -28,7 +28,7 @@ export function addFontsToIndex(options: Schema): Rule { const fonts = [ 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap', - 'https://fonts.googleapis.com/icon?family=Material+Icons', + 'https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined', ]; projectIndexFiles.forEach(indexFilePath => { diff --git a/src/material/schematics/ng-add/index.spec.ts b/src/material/schematics/ng-add/index.spec.ts index 803a9d243604..c1d560a4fca7 100644 --- a/src/material/schematics/ng-add/index.spec.ts +++ b/src/material/schematics/ng-add/index.spec.ts @@ -162,7 +162,7 @@ describe('ng-add schematic', () => { // the created links properly align with the existing HTML. Default CLI projects use an // indentation of two columns. expect(htmlContent).toContain( - ' - +