Change icon font default to Material symbols from Material icons

angular · Nov 18, 2024 · a0cde04 · a0cde04
1 parent 9939029
commit a0cde04
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
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.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> {