skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Prevents translation services (like Google Translate) from translating icon ligatures used in mat-icon.
This commit is contained in:
Pavel Agarkov
2019-02-07 22:47:03 +03:00
committed by Jeremy Elbourn
parent ed11370a21
commit b10dd043ae
2 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/icon/icon.spec.ts
+22 -11
View File
@@ -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,7 +731,8 @@ 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';
@@ -729,7 +740,7 @@ describe('MatIcon', () => {
}).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,7 +753,7 @@ 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';
@@ -750,7 +761,7 @@ describe('MatIcon', () => {
}).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
+1 -1
View File
@@ -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"',
},