fix(icon): add notranslate class (#14889)

Prevents translation services (like Google Translate) from translating icon ligatures used in mat-icon.

Author: pavel-agarkov

src/lib/icon/icon.spec.ts

@@ -76,6 +76,14 @@ describe('MatIcon', () => {
       sanitizer = ds;
     }));
 
+  it('should include notranslate class by default', () => {
+    let fixture = TestBed.createComponent(IconWithColor);
+
+    const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+    expect(matIconElement.classList.contains('notranslate'))
+      .toBeTruthy('Expected the mat-icon element to include the notranslate class');
+  });
+
   it('should apply class based on color attribute', () => {
     let fixture = TestBed.createComponent(IconWithColor);
 
@@ -84,7 +92,8 @@ describe('MatIcon', () => {
     testComponent.iconName = 'home';
     testComponent.iconColor = 'primary';
     fixture.detectChanges();
-    expect(sortedClassNames(matIconElement)).toEqual(['mat-icon', 'mat-primary', 'material-icons']);
+    expect(sortedClassNames(matIconElement))
+        .toEqual(['mat-icon', 'mat-primary', 'material-icons', 'notranslate']);
   });
 
   it('should apply a class if there is no color', () => {
@@ -97,7 +106,7 @@ describe('MatIcon', () => {
     fixture.detectChanges();
 
     expect(sortedClassNames(matIconElement))
-        .toEqual(['mat-icon', 'mat-icon-no-color', 'material-icons']);
+        .toEqual(['mat-icon', 'mat-icon-no-color', 'material-icons', 'notranslate']);
   });
 
   it('should mark mat-icon as aria-hidden by default', () => {
@@ -135,7 +144,7 @@ describe('MatIcon', () => {
       testComponent.iconName = 'home';
       fixture.detectChanges();
       expect(sortedClassNames(matIconElement))
-          .toEqual(['mat-icon', 'mat-icon-no-color', 'material-icons']);
+          .toEqual(['mat-icon', 'mat-icon-no-color', 'material-icons', 'notranslate']);
     });
 
     it('should use alternate icon font if set', () => {
@@ -147,7 +156,8 @@ describe('MatIcon', () => {
       const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
       testComponent.iconName = 'home';
       fixture.detectChanges();
-      expect(sortedClassNames(matIconElement)).toEqual(['mat-icon', 'mat-icon-no-color', 'myfont']);
+      expect(sortedClassNames(matIconElement))
+          .toEqual(['mat-icon', 'mat-icon-no-color', 'myfont', 'notranslate']);
     });
   });
 
@@ -697,19 +707,19 @@ describe('MatIcon', () => {
       testComponent.fontIcon = 'house';
       fixture.detectChanges();
       expect(sortedClassNames(matIconElement))
-          .toEqual(['font1', 'house', 'mat-icon', 'mat-icon-no-color']);
+          .toEqual(['font1', 'house', 'mat-icon', 'mat-icon-no-color', 'notranslate']);
 
       testComponent.fontSet = 'f2';
       testComponent.fontIcon = 'igloo';
       fixture.detectChanges();
       expect(sortedClassNames(matIconElement))
-          .toEqual(['f2', 'igloo', 'mat-icon', 'mat-icon-no-color']);
+          .toEqual(['f2', 'igloo', 'mat-icon', 'mat-icon-no-color', 'notranslate']);
 
       testComponent.fontSet = 'f3';
       testComponent.fontIcon = 'tent';
       fixture.detectChanges();
       expect(sortedClassNames(matIconElement))
-          .toEqual(['f3', 'mat-icon', 'mat-icon-no-color', 'tent']);
+          .toEqual(['f3', 'mat-icon', 'mat-icon-no-color', 'notranslate', 'tent']);
     });
 
     it('should handle values with extraneous spaces being passed in to `fontSet`', () => {
@@ -721,15 +731,16 @@ describe('MatIcon', () => {
         fixture.detectChanges();
       }).not.toThrow();
 
-      expect(sortedClassNames(matIconElement)).toEqual(['font', 'mat-icon', 'mat-icon-no-color']);
+      expect(sortedClassNames(matIconElement))
+          .toEqual(['font', 'mat-icon', 'mat-icon-no-color', 'notranslate']);
 
       expect(() => {
         fixture.componentInstance.fontSet = ' changed';
         fixture.detectChanges();
       }).not.toThrow();
 
       expect(sortedClassNames(matIconElement))
-          .toEqual(['changed', 'mat-icon', 'mat-icon-no-color']);
+          .toEqual(['changed', 'mat-icon', 'mat-icon-no-color', 'notranslate']);
     });
 
     it('should handle values with extraneous spaces being passed in to `fontIcon`', () => {
@@ -742,15 +753,15 @@ describe('MatIcon', () => {
       }).not.toThrow();
 
       expect(sortedClassNames(matIconElement))
-          .toEqual(['font', 'mat-icon', 'mat-icon-no-color', 'material-icons']);
+        .toEqual(['font', 'mat-icon', 'mat-icon-no-color', 'material-icons', 'notranslate']);
 
       expect(() => {
         fixture.componentInstance.fontIcon = ' changed';
         fixture.detectChanges();
       }).not.toThrow();
 
       expect(sortedClassNames(matIconElement))
-          .toEqual(['changed', 'mat-icon', 'mat-icon-no-color', 'material-icons']);
+        .toEqual(['changed', 'mat-icon', 'mat-icon-no-color', 'material-icons', 'notranslate']);
     });
 
   });

src/lib/icon/icon.ts

@@ -127,7 +127,7 @@ const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
   inputs: ['color'],
   host: {
     'role': 'img',
-    'class': 'mat-icon',
+    'class': 'mat-icon notranslate',
     '[class.mat-icon-inline]': 'inline',
     '[class.mat-icon-no-color]': 'color !== "primary" && color !== "accent" && color !== "warn"',
   },