diff --git a/e2e/components/icon/icon.e2e.ts b/e2e/components/icon/icon.e2e.ts
new file mode 100644
index 000000000000..4d5648ac5d8d
--- /dev/null
+++ b/e2e/components/icon/icon.e2e.ts
@@ -0,0 +1,28 @@
+describe('icon', () => {
+  describe('font icons by ligature', () => {
+    let testIcon: any;
+
+    beforeEach(() => {
+      browser.get('/icon');
+      testIcon = element(by.id('test-icon'));
+    });
+
+    it('should have the correct aria-label when used', () => {
+      testIcon.getAttribute('aria-label').then((attr: string) => {
+        expect(attr).toEqual('favorite');
+      });
+    });
+
+    it('should have the correct class when used', () => {
+      testIcon.getAttribute('class').then((attr: string) => {
+        expect(attr).toEqual('md-24 material-icons');
+      });
+    });
+
+    it('should have the correct role when used', () => {
+      testIcon.getAttribute('role').then((attr: string) => {
+        expect(attr).toEqual('img');
+      });
+    });
+  });
+});
diff --git a/src/e2e-app/e2e-app/e2e-app.html b/src/e2e-app/e2e-app/e2e-app.html
index ee230fbf4c2a..cff90869bb84 100644
--- a/src/e2e-app/e2e-app/e2e-app.html
+++ b/src/e2e-app/e2e-app/e2e-app.html
@@ -1,4 +1,5 @@
 <a md-list-item [routerLink]="['button']">Button</a>
 <a md-list-item [routerLink]="['tabs']">Tabs</a>
+<a md-list-item [routerLink]="['icon']">Icon</a>
 
 <router-outlet></router-outlet>
diff --git a/src/e2e-app/e2e-app/routes.ts b/src/e2e-app/e2e-app/routes.ts
index ec3133068848..02ddb4d40efa 100644
--- a/src/e2e-app/e2e-app/routes.ts
+++ b/src/e2e-app/e2e-app/routes.ts
@@ -2,12 +2,13 @@ import {provideRouter, RouterConfig} from '@angular/router';
 import {Home} from './e2e-app';
 import {ButtonE2E} from '../button/button-e2e';
 import {BasicTabs} from '../tabs/tabs-e2e';
-
+import {IconE2E} from '../icon/icon-e2e';
 
 export const routes: RouterConfig = [
   {path: '', component: Home},
   {path: 'button', component: ButtonE2E},
   {path: 'tabs', component: BasicTabs},
+  {path: 'icon', component: IconE2E}
 ];
 
 export const E2E_APP_ROUTE_PROVIDER = provideRouter(routes);
diff --git a/src/e2e-app/icon/icon-e2e.html b/src/e2e-app/icon/icon-e2e.html
new file mode 100644
index 000000000000..cf538e71481d
--- /dev/null
+++ b/src/e2e-app/icon/icon-e2e.html
@@ -0,0 +1,3 @@
+<section>
+  <md-icon class="md-24" id="test-icon">favorite</md-icon>
+</section>
\ No newline at end of file
diff --git a/src/e2e-app/icon/icon-e2e.ts b/src/e2e-app/icon/icon-e2e.ts
new file mode 100644
index 000000000000..812937a1df65
--- /dev/null
+++ b/src/e2e-app/icon/icon-e2e.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+import {MD_ICON_DIRECTIVES} from '@angular2-material/icon/icon';
+
+@Component({
+  moduleId: module.id,
+  selector: 'icon-e2e',
+  templateUrl: 'icon-e2e.html',
+  directives: [MD_ICON_DIRECTIVES]
+})
+export class IconE2E {}