feat(material/icon): Change icon font default to Material symbols fro…

…m Material icons
angular · Nov 20, 2024 · 088ba1a · 088ba1a
1 parent 9939029
commit 088ba1a
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 27 deletions.
diff --git 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
@@ -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
@@ -8,7 +8,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
 </head>
 <body class="mat-typography">
   <app-root></app-root>

diff --git a/src/e2e-app/index.html b/src/e2e-app/index.html
@@ -7,7 +7,7 @@
   <base href="/">
 
   <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="theme.css" rel="stylesheet">
 </head>

diff --git 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 `<mat-icon>` 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
@@ -17,14 +17,13 @@ Some fonts are designed to show icons by using
 component.
 
 By default, `<mat-icon>` 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
@@ -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
@@ -61,7 +61,7 @@ export class FakeMatIconRegistry implements PublicApi<MatIconRegistry>, OnDestro
   }
 
   getDefaultFontSetClass() {
-    return ['material-icons'];
+    return ['material-symbols-outlined'];
   }
 
   getSvgIconFromUrl(): Observable<SVGElement> {

diff --git 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
@@ -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(
-        '  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"',
+        '  <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined"',
       );
       expect(htmlContent).toContain(
         '  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@' +

diff --git a/src/universal-app/index-source.html b/src/universal-app/index-source.html
@@ -6,7 +6,7 @@
   <title>Angular Material Universal Kitchen Sink Test</title>
   <link href="styles.css" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <base href="/">
 </head>