Changed to use cases in material.angular.io

Author: tinayuangao

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

@@ -1,14 +1,17 @@
 <section>
-  <h2>Home icon (Ligature from Material Icons font)</h2>
-  <md-icon color="primary" aria-label="Home">home</md-icon>
+  <h2>Fingerprint icon (Decorative icons)</h2>
+  <md-icon color="primary">fingerprint</md-icon>
 </section>
 
 <section>
-  <h2>Thumb up icon (Icon registered with MdIconProvider) </h2>
-  <md-icon svgIcon="thumb-up" color="accent" aria-label="Thumb up"></md-icon>
+  <h2>Delete icon (Interactive icons) </h2>
+  <button md-icon-button aria-label="Delete" (click)="deleteIcon()">
+    <md-icon color="accent">delete</md-icon>
+  </button>
 </section>
 
 <section>
-  <h2>Alarm icon (Icon from icon set) </h2>
-  <md-icon svgIcon="core:accessibility" color="warn" aria-label="Alarm"></md-icon>
+  <h2>Done icon (Indicator icons) </h2>
+  <md-icon color="warn">done</md-icon>
+  <span class="cdk-visually-hidden">Done</span>
 </section>

src/demo-app/a11y/icon/icon-a11y.ts

@@ -1,6 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {DomSanitizer} from '@angular/platform-browser';
-import {MdIconRegistry} from '@angular/material';
+import {MdSnackBar} from '@angular/material';
 
 @Component({
   moduleId: module.id,
@@ -9,11 +8,9 @@ import {MdIconRegistry} from '@angular/material';
   encapsulation: ViewEncapsulation.None,
 })
 export class IconAccessibilityDemo {
-  constructor(mdIconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
-    mdIconRegistry
-      .addSvgIcon('thumb-up',
-        sanitizer.bypassSecurityTrustResourceUrl('/icon/assets/thumbup-icon.svg'))
-      .addSvgIconSetInNamespace('core',
-        sanitizer.bypassSecurityTrustResourceUrl('/icon/assets/core-icon-set.svg'));
+  constructor(private snackBar: MdSnackBar) {}
+
+  deleteIcon() {
+    this.snackBar.open('Item deleted', '', {duration: 2000});
   }
 }