diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts
index 343dd585bbf..1ebbedea90c 100644
--- a/src/demo-app/a11y/a11y-module.ts
+++ b/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 {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
import {SliderAccessibilityDemo} from './slider/slider-a11y';
@@ -46,6 +47,7 @@ export class AccessibilityRoutingModule {}
ChipsAccessibilityDemo,
DatepickerAccessibilityDemo,
GridListAccessibilityDemo,
+ IconAccessibilityDemo,
InputAccessibilityDemo,
ProgressSpinnerAccessibilityDemo,
RadioAccessibilityDemo,
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index 28e348eb76c..b6b8b91e766 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/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: 'Progress spinner', route: 'progress-spinner'},
{name: 'Radio buttons', route: 'radio'},
diff --git a/src/demo-app/a11y/icon/icon-a11y.html b/src/demo-app/a11y/icon/icon-a11y.html
new file mode 100644
index 00000000000..3b8bc223aa4
--- /dev/null
+++ b/src/demo-app/a11y/icon/icon-a11y.html
@@ -0,0 +1,30 @@
+
+ Fingerprint status
+ Showing a status message with a purely decorative icon
+ fingerprint
+ Your fingerprint was recorded!
+
+
+
+ Delete icon button
+ Showing a button with interactive icon which can perform an action
+
+
+
+
+ Home link
+ Showing a link with interactive icon
+
+ home
+
+
+
+
+ Done status
+ Showing a status indicator with an indicator icon
+ done
+ Done
+ Tasks
+
diff --git a/src/demo-app/a11y/icon/icon-a11y.ts b/src/demo-app/a11y/icon/icon-a11y.ts
new file mode 100644
index 00000000000..dfac7d4c04e
--- /dev/null
+++ b/src/demo-app/a11y/icon/icon-a11y.ts
@@ -0,0 +1,16 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {MdSnackBar} from '@angular/material';
+
+@Component({
+ moduleId: module.id,
+ selector: 'icon-a11y',
+ templateUrl: 'icon-a11y.html',
+ encapsulation: ViewEncapsulation.None,
+})
+export class IconAccessibilityDemo {
+ constructor(private snackBar: MdSnackBar) {}
+
+ deleteIcon() {
+ this.snackBar.open('Item deleted', '', {duration: 2000});
+ }
+}
diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts
index eae2b97f517..a74903312d7 100644
--- a/src/demo-app/a11y/routes.ts
+++ b/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 {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
import {SliderAccessibilityDemo} from './slider/slider-a11y';
@@ -21,6 +22,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: 'progress-spinner', component: ProgressSpinnerAccessibilityDemo},
{path: 'radio', component: RadioAccessibilityDemo},