feat(material/icon): SEO friendly ligature icons

The new way to use ligature icons, via a dedicated attribute, allow to hide
the font name from search engine results. Otherwise the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusingto read.

New recommended usage is:

```diff
- <mat-icon>my-icon-name</mat-icon>
+ <mat-icon icon="my-icon-name"></mat-icon>
```

Fixes #23195
Fixes #23183
Fixes google/material-design-icons#498

Author: PowerKiKi

src/components-examples/material/icon/icon-harness/icon-harness-example.html

@@ -1,3 +1,4 @@
 <mat-icon fontSet="fontIcons" fontIcon="fontIcon"></mat-icon>
 <mat-icon svgIcon="svgIcons:svgIcon"></mat-icon>
 <mat-icon inline>ligature_icon</mat-icon>
+<mat-icon inline icon="ligature_icon_by_attribute"></mat-icon>

src/components-examples/material/icon/icon-harness/icon-harness-example.spec.ts

@@ -32,24 +32,24 @@ describe('IconHarnessExample', () => {
 
   it('should load all icon harnesses', async () => {
     const icons = await loader.getAllHarnesses(MatIconHarness);
-    expect(icons.length).toBe(3);
+    expect(icons.length).toBe(4);
   });
 
   it('should get the name of an icon', async () => {
     const icons = await loader.getAllHarnesses(MatIconHarness);
     const names = await parallel(() => icons.map(icon => icon.getName()));
-    expect(names).toEqual(['fontIcon', 'svgIcon', 'ligature_icon']);
+    expect(names).toEqual(['fontIcon', 'svgIcon', 'ligature_icon', 'ligature_icon_by_attribute']);
   });
 
   it('should get the namespace of an icon', async () => {
     const icons = await loader.getAllHarnesses(MatIconHarness);
     const namespaces = await parallel(() => icons.map(icon => icon.getNamespace()));
-    expect(namespaces).toEqual(['fontIcons', 'svgIcons', null]);
+    expect(namespaces).toEqual(['fontIcons', 'svgIcons', null, null]);
   });
 
   it('should get whether an icon is inline', async () => {
     const icons = await loader.getAllHarnesses(MatIconHarness);
     const inlineStates = await parallel(() => icons.map(icon => icon.isInline()));
-    expect(inlineStates).toEqual([false, false, true]);
+    expect(inlineStates).toEqual([false, false, true, true]);
   });
 });

src/components-examples/material/icon/icon-overview/icon-overview-example.html

@@ -1 +1 @@
-<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
+<mat-icon aria-hidden="false" aria-label="Example home icon" icon="home"></mat-icon>

src/dev-app/icon/icon-demo.html

@@ -38,7 +38,12 @@
   </p>
 
   <p>
-    Ligature from Material Icons font:
+    Ligature from Material Icons font by attribute:
+    <mat-icon icon="home"></mat-icon>
+  </p>
+
+  <p>
+    Ligature from Material Icons font by content:
     <mat-icon>home</mat-icon>
   </p>
 

src/material/icon/icon.scss

@@ -21,6 +21,10 @@ $size: 24px !default;
     line-height: inherit;
     width: inherit;
   }
+
+  &[icon]:before {
+    content: attr(icon);
+  }
 }
 
 // Icons that will be mirrored in RTL.

src/material/icon/icon.spec.ts

@@ -1,13 +1,13 @@
-import {inject, waitForAsync, fakeAsync, tick, TestBed} from '@angular/core/testing';
-import {SafeResourceUrl, DomSanitizer, SafeHtml} from '@angular/platform-browser';
+import {fakeAsync, inject, TestBed, tick, waitForAsync} from '@angular/core/testing';
+import {DomSanitizer, SafeHtml, SafeResourceUrl} from '@angular/platform-browser';
 import {
   HttpClientTestingModule,
   HttpTestingController,
   TestRequest,
 } from '@angular/common/http/testing';
 import {Component, ErrorHandler, Provider, Type, ViewChild} from '@angular/core';
 import {MAT_ICON_DEFAULT_OPTIONS, MAT_ICON_LOCATION, MatIconModule} from './index';
-import {MatIconRegistry, getMatIconNoHttpProviderError} from './icon-registry';
+import {getMatIconNoHttpProviderError, MatIconRegistry} from './icon-registry';
 import {FAKE_SVGS} from './fake-svgs';
 import {wrappedErrorMessage} from '../../cdk/testing/private';
 import {MatIcon} from './icon';
@@ -70,6 +70,7 @@ describe('MatIcon', () => {
         declarations: [
           IconWithColor,
           IconWithLigature,
+          IconWithLigatureByAttribute,
           IconWithCustomFontCss,
           IconFromSvgName,
           IconWithAriaHiddenFalse,
@@ -243,6 +244,58 @@ describe('MatIcon', () => {
     });
   });
 
+  describe('Ligature icons by attribute', () => {
+    it('should add material-icons class by default', () => {
+      const fixture = TestBed.createComponent(IconWithLigatureByAttribute);
+
+      const testComponent = fixture.componentInstance;
+      const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+      testComponent.iconName = 'home';
+      fixture.detectChanges();
+      expect(sortedClassNames(matIconElement)).toEqual([
+        'mat-icon',
+        'mat-icon-no-color',
+        'material-icons',
+        'notranslate',
+      ]);
+    });
+
+    it('should use alternate icon font if set', () => {
+      iconRegistry.setDefaultFontSetClass('myfont');
+
+      const fixture = TestBed.createComponent(IconWithLigatureByAttribute);
+
+      const testComponent = fixture.componentInstance;
+      const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+      testComponent.iconName = 'home';
+      fixture.detectChanges();
+      expect(sortedClassNames(matIconElement)).toEqual([
+        'mat-icon',
+        'mat-icon-no-color',
+        'myfont',
+        'notranslate',
+      ]);
+    });
+
+    it('should be able to provide multiple alternate icon set classes', () => {
+      iconRegistry.setDefaultFontSetClass('myfont', 'myfont-48x48');
+
+      let fixture = TestBed.createComponent(IconWithLigatureByAttribute);
+
+      const testComponent = fixture.componentInstance;
+      const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+      testComponent.iconName = 'home';
+      fixture.detectChanges();
+      expect(sortedClassNames(matIconElement)).toEqual([
+        'mat-icon',
+        'mat-icon-no-color',
+        'myfont',
+        'myfont-48x48',
+        'notranslate',
+      ]);
+    });
+  });
+
   describe('Icons from URLs', () => {
     it('should register icon URLs by name', fakeAsync(() => {
       iconRegistry.addSvgIcon('fluffy', trustUrl('cat.svg'));
@@ -1338,6 +1391,11 @@ class IconWithLigature {
   iconName = '';
 }
 
+@Component({template: `<mat-icon [icon]="iconName"></mat-icon>`})
+class IconWithLigatureByAttribute {
+  iconName = '';
+}
+
 @Component({template: `<mat-icon [color]="iconColor">{{iconName}}</mat-icon>`})
 class IconWithColor {
   iconName = '';

src/material/icon/icon.ts

@@ -24,7 +24,7 @@ import {
   Optional,
   ViewEncapsulation,
 } from '@angular/core';
-import {CanColor, ThemePalette, mixinColor} from '@angular/material/core';
+import {CanColor, mixinColor, ThemePalette} from '@angular/material/core';
 import {Subscription} from 'rxjs';
 import {take} from 'rxjs/operators';
 
@@ -114,13 +114,16 @@ const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
  *     `<mat-icon svgIcon="left-arrow"></mat-icon>
  *     <mat-icon svgIcon="animals:cat"></mat-icon>`
  *
- * - Use a font ligature as an icon by putting the ligature text in the content of the `<mat-icon>`
- *   component. By default the Material icons font is used as described at
+ * - Use a font ligature as an icon by putting the ligature text in the `icon` attribute or the
+ *   content of the `<mat-icon>` component. It is recommended to use the attribute alternative
+ *   to prevent the ligature text to be selectable and to appear in search engine results.
+ *   By default the Material icons font is used as described at
  *   http://google.github.io/material-design-icons/#icon-font-for-the-web. You can specify an
  *   alternate font 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.
- *   Examples:
- *     `<mat-icon>home</mat-icon>
+ *     `<mat-icon icon="home"></mat-icon>
+ *     <mat-icon fontSet="myfont" icon="sun"></mat-icon>`
+ *     <mat-icon>home</mat-icon>
  *     <mat-icon fontSet="myfont">sun</mat-icon>`
  *
  * - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the
@@ -162,6 +165,13 @@ export class MatIcon extends _MatIconBase implements OnInit, AfterViewChecked, C
   }
   private _inline: boolean = false;
 
+  /**
+   * Name of an icon within a font set that use ligatures, such as the
+   * [Material icons font](http://google.github.io/material-design-icons/#icon-font-for-the-web).
+   */
+  @Input()
+  icon: string;
+
   /** Name of the icon in the SVG icon set. */
   @Input()
   get svgIcon(): string {
@@ -194,7 +204,10 @@ export class MatIcon extends _MatIconBase implements OnInit, AfterViewChecked, C
   }
   private _fontSet: string;
 
-  /** Name of an icon within a font set. */
+  /**
+   * Name of an icon within a font set that use CSS class for each icon glyph, such as
+   * [FontAwesome](https://fortawesome.github.io/Font-Awesome/examples/).
+   */
   @Input()
   get fontIcon(): string {
     return this._fontIcon;

src/material/icon/testing/icon-harness.ts

@@ -40,11 +40,16 @@ export class MatIconHarness extends ComponentHarness {
   /** Gets the name of the icon. */
   async getName(): Promise<string | null> {
     const host = await this.host();
-    const nameFromDom = await host.getAttribute('data-mat-icon-name');
 
     // If we managed to figure out the name from the attribute, use it.
-    if (nameFromDom) {
-      return nameFromDom;
+    const nameFromIconNameAttribute = await host.getAttribute('data-mat-icon-name');
+    if (nameFromIconNameAttribute) {
+      return nameFromIconNameAttribute;
+    }
+
+    const nameFromIconAttribute = await host.getAttribute('data-mat-icon-name');
+    if (nameFromIconAttribute) {
+      return nameFromIconAttribute;
     }
 
     // Some icons support defining the icon as a ligature.

src/material/icon/testing/shared.spec.ts

@@ -37,7 +37,7 @@ export function runHarnessTests(
 
   it('should load all icon harnesses', async () => {
     const icons = await loader.getAllHarnesses(iconHarness);
-    expect(icons.length).toBe(3);
+    expect(icons.length).toBe(4);
   });
 
   it('should filter icon harnesses based on their type', async () => {
@@ -47,7 +47,7 @@ export function runHarnessTests(
     ]);
 
     expect(svgIcons.length).toBe(1);
-    expect(fontIcons.length).toBe(2);
+    expect(fontIcons.length).toBe(3);
   });
 
   it('should filter icon harnesses based on their name', async () => {
@@ -75,25 +75,25 @@ export function runHarnessTests(
   it('should get the type of each icon', async () => {
     const icons = await loader.getAllHarnesses(iconHarness);
     const types = await parallel(() => icons.map(icon => icon.getType()));
-    expect(types).toEqual([IconType.FONT, IconType.SVG, IconType.FONT]);
+    expect(types).toEqual([IconType.FONT, IconType.SVG, IconType.FONT, IconType.FONT]);
   });
 
   it('should get the name of an icon', async () => {
     const icons = await loader.getAllHarnesses(iconHarness);
     const names = await parallel(() => icons.map(icon => icon.getName()));
-    expect(names).toEqual(['fontIcon', 'svgIcon', 'ligature_icon']);
+    expect(names).toEqual(['fontIcon', 'svgIcon', 'ligature_icon', 'ligature_icon_by_attribute']);
   });
 
   it('should get the namespace of an icon', async () => {
     const icons = await loader.getAllHarnesses(iconHarness);
     const namespaces = await parallel(() => icons.map(icon => icon.getNamespace()));
-    expect(namespaces).toEqual(['fontIcons', 'svgIcons', null]);
+    expect(namespaces).toEqual(['fontIcons', 'svgIcons', null, null]);
   });
 
   it('should get whether an icon is inline', async () => {
     const icons = await loader.getAllHarnesses(iconHarness);
     const inlineStates = await parallel(() => icons.map(icon => icon.isInline()));
-    expect(inlineStates).toEqual([false, false, true]);
+    expect(inlineStates).toEqual([false, false, true, true]);
   });
 }
 
@@ -102,6 +102,7 @@ export function runHarnessTests(
     <mat-icon fontSet="fontIcons" fontIcon="fontIcon"></mat-icon>
     <mat-icon svgIcon="svgIcons:svgIcon"></mat-icon>
     <mat-icon inline>ligature_icon</mat-icon>
+    <mat-icon inline icon="ligature_icon_by_attribute"></mat-icon>
   `,
 })
 class IconHarnessTest {}