demo(icon): Add an accessibility demo page for icon

Author: tinayuangao

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

@@ -13,6 +13,7 @@ import {ChipsAccessibilityDemo} from './chips/chips-a11y';
 import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
+import {IconAccessibilityDemo} from './icon/icon-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
 
@@ -45,6 +46,7 @@ export class AccessibilityRoutingModule {}
     ChipsAccessibilityDemo,
     DatepickerAccessibilityDemo,
     GridListAccessibilityDemo,
+    IconAccessibilityDemo,
     InputAccessibilityDemo,
     RadioAccessibilityDemo,
     SliderAccessibilityDemo,

src/demo-app/a11y/a11y.ts

@@ -24,6 +24,7 @@ export class AccessibilityDemo {
     {name: 'Chips', route: 'chips'},
     {name: 'Datepicker', route: 'datepicker'},
     {name: 'Grid list', route: 'grid-list'},
+    {name: 'Icon', route: 'icon'},
     {name: 'Input', route: 'input'},
     {name: 'Radio buttons', route: 'radio'},
     {name: 'Slider', route: 'slider'},

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

@@ -0,0 +1,14 @@
+<section>
+  <h2>Home icon (Ligature from Material Icons font)</h2>
+  <md-icon color="primary" aria-label="Home">home</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>
+</section>
+
+<section>
+  <h2>Alarm icon (Icon from icon set) </h2>
+  <md-icon svgIcon="core:accessibility" color="warn" aria-label="Alarm"></md-icon>
+</section>

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

@@ -0,0 +1,19 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+import {MdIconRegistry} from '@angular/material';
+
+@Component({
+  moduleId: module.id,
+  selector: 'icon-a11y',
+  templateUrl: 'icon-a11y.html',
+  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'));
+  }
+}

src/demo-app/a11y/routes.ts

@@ -8,6 +8,7 @@ import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {AccessibilityHome} from './a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
+import {IconAccessibilityDemo} from './icon/icon-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
 
@@ -20,6 +21,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'chips', component: ChipsAccessibilityDemo},
   {path: 'datepicker', component: DatepickerAccessibilityDemo},
   {path: 'grid-list', component: GridListAccessibilityDemo},
+  {path: 'icon', component: IconAccessibilityDemo},
   {path: 'input', component: InputAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
   {path: 'slider', component: SliderAccessibilityDemo},