From 62e82fedb1f1fb1c55250407491c1ed3f8e3d6ee Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Wed, 23 Mar 2016 01:45:53 -0400
Subject: [PATCH 01/37] Start of md-icon directive and service.

---
 src/components/icon/icon.ts          | 37 +++++++++++++++++++++++++++
 src/components/icon/icon_provider.ts | 38 ++++++++++++++++++++++++++++
 src/demo-app/demo-app.html           |  1 +
 src/demo-app/demo-app.ts             |  2 ++
 src/demo-app/icon/icon-demo.html     |  3 +++
 src/demo-app/icon/icon-demo.ts       | 11 ++++++++
 src/main.ts                          |  5 +++-
 7 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 src/components/icon/icon.ts
 create mode 100644 src/components/icon/icon_provider.ts
 create mode 100644 src/demo-app/icon/icon-demo.html
 create mode 100644 src/demo-app/icon/icon-demo.ts

diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
new file mode 100644
index 000000000000..342ad89f96c6
--- /dev/null
+++ b/src/components/icon/icon.ts
@@ -0,0 +1,37 @@
+import {
+  Component,
+  Directive,
+  Input,
+  OnChanges,
+  SimpleChange,
+} from 'angular2/core';
+
+import {
+  MdIconProvider,
+} from './icon_provider';
+
+@Component({
+  template: `<md-icon-inline [innerHTML]="iconSvg"></md-icon-inline>`,
+  selector: 'md-icon',
+  viewProviders: [MdIconProvider],
+})
+export class MdIcon implements OnChanges {
+  @Input() svgSrc: string;
+  @Input() svgIcon: string;
+    
+  iconSvg: string;
+    
+  constructor(private _mdIconProvider: MdIconProvider) {
+    this.iconSvg = '<b>123456</b>';
+  }
+    
+  ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
+    if (this.svgIcon) {
+      this._mdIconProvider.loadIcon(this.svgIcon)
+        .subscribe((svg: string) => {this.iconSvg = svg;});
+    } else if (this.svgSrc) {
+      this._mdIconProvider.loadUrl(this.svgSrc)
+        .subscribe((svg: string) => {this.iconSvg = svg;});    
+    }
+  }
+}
diff --git a/src/components/icon/icon_provider.ts b/src/components/icon/icon_provider.ts
new file mode 100644
index 000000000000..8f654ced9f25
--- /dev/null
+++ b/src/components/icon/icon_provider.ts
@@ -0,0 +1,38 @@
+import {Injectable} from 'angular2/core';
+import {Http, HTTP_PROVIDERS} from 'angular2/http';
+import {Observable} from 'rxjs/Rx';
+
+@Injectable()
+export class MdIconProvider {
+  private _namedIcons: Map<string, Observable<string>>;
+  private _defaultIcons: Map<string, string>;
+  
+  constructor(private _http: Http) {
+    this._namedIcons = new Map<string, any>();
+    this._defaultIcons = new Map<string, string>();
+    this._defaultIcons.set('search', `
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
+    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
+    `);
+  }
+
+  loadIcon(iconName: string): Observable<string> {
+    if (this._defaultIcons.has(iconName)) {
+      return Observable.of(this._defaultIcons.get(iconName));
+    }
+    throw Error('Unknown icon: ' + iconName);
+  }
+  
+  loadUrl(url: string): Observable<string> {
+    return this._http.get(url)
+        .map(response => this._extractSvg(response.text()));
+  }
+  
+  private _extractSvg(responseText: string) {
+    const start = responseText.indexOf('<svg>');
+    const end = responseText.lastIndexOf('</svg>');
+    return responseText.substring(start, end + '</svg>'.length);
+  }
+}
diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app.html
index e1ad0b6cbacd..89327df13085 100644
--- a/src/demo-app/demo-app.html
+++ b/src/demo-app/demo-app.html
@@ -9,6 +9,7 @@ <h1>Angular Material2 Demos</h1>
     <li><a [routerLink]="['CheckboxDemo']">Checkbox demo</a></li>
     <li><a [routerLink]="['ToolbarDemo']">Toolbar demo</a></li>
     <li><a [routerLink]="['RadioDemo']">Radio demo</a></li>
+    <li><a [routerLink]="['IconDemo']">Icon demo</a></li>
   </ul>
   <button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
     {{root.dir.toUpperCase()}}
diff --git a/src/demo-app/demo-app.ts b/src/demo-app/demo-app.ts
index a70b5305b62a..c7dc79e925b9 100644
--- a/src/demo-app/demo-app.ts
+++ b/src/demo-app/demo-app.ts
@@ -2,6 +2,7 @@ import {Component} from 'angular2/core';
 import {Route, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
 import {CardDemo} from './card/card-demo';
 import {ButtonDemo} from './button/button-demo';
+import {IconDemo} from './icon/icon-demo';
 import {RadioDemo} from './radio/radio-demo';
 import {SidenavDemo} from './sidenav/sidenav-demo';
 import {ProgressCircleDemo} from './progress-circle/progress-circle-demo';
@@ -36,5 +37,6 @@ export class Home {}
   new Route({path: '/portal', name: 'PortalDemo', component: PortalDemo}),
   new Route({path: '/checkbox', name: 'CheckboxDemo', component: CheckboxDemo}),
   new Route({path: '/toolbar', name: 'ToolbarDemo', component: ToolbarDemo}),
+  new Route({path: '/icon', name: 'IconDemo', component: IconDemo}),
 ])
 export class DemoApp { }
diff --git a/src/demo-app/icon/icon-demo.html b/src/demo-app/icon/icon-demo.html
new file mode 100644
index 000000000000..6599f343038b
--- /dev/null
+++ b/src/demo-app/icon/icon-demo.html
@@ -0,0 +1,3 @@
+These are some icons.
+
+<md-icon [svgIcon]="'search'"></md-icon>
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
new file mode 100644
index 000000000000..a633ad362205
--- /dev/null
+++ b/src/demo-app/icon/icon-demo.ts
@@ -0,0 +1,11 @@
+import {Component} from 'angular2/core';
+import {MdIcon} from '../../components/icon/icon';
+
+@Component({
+    selector: 'button-demo',
+    templateUrl: 'demo-app/icon/icon-demo.html',
+    directives: [MdIcon]
+})
+export class IconDemo {
+
+}
diff --git a/src/main.ts b/src/main.ts
index 6898cb4892c1..40ef5abcd385 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,10 @@
 import {bootstrap} from 'angular2/platform/browser';
 import {DemoApp} from './demo-app/demo-app';
+import {HTTP_PROVIDERS} from 'angular2/http';
 import {ROUTER_PROVIDERS} from 'angular2/router';
+import 'rxjs/Rx';
 
 bootstrap(DemoApp, [
-  ROUTER_PROVIDERS
+  ROUTER_PROVIDERS,
+  HTTP_PROVIDERS,
 ]);

From 8a188e4d7e87b70527cf8a33c0c922ff40c90abb Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Wed, 23 Mar 2016 15:33:47 -0400
Subject: [PATCH 02/37] Return SVG element instead of string, set default
 styles.

---
 src/components/icon/icon.scss        | 15 ++++++
 src/components/icon/icon.ts          | 19 +++++---
 src/components/icon/icon_provider.ts | 71 +++++++++++++++++++++-------
 src/demo-app/assets/search.svg       |  4 ++
 src/demo-app/icon/icon-demo.html     | 15 +++++-
 5 files changed, 98 insertions(+), 26 deletions(-)
 create mode 100644 src/components/icon/icon.scss
 create mode 100644 src/demo-app/assets/search.svg

diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
new file mode 100644
index 000000000000..a9598b14a519
--- /dev/null
+++ b/src/components/icon/icon.scss
@@ -0,0 +1,15 @@
+@import "variables";
+@import "default-theme";
+
+/** The width/height of the icon element. */
+$md-icon-size: 24px !default;
+
+.md-icon-layout {
+    background-repeat: no-repeat;
+    display: inline-block;
+    fill: currentColor;
+    height: $md-icon-size;
+    margin: auto;
+    vertical-align: middle;
+    width: $md-icon-size;
+}
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 342ad89f96c6..f300ba6f8e47 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -1,6 +1,7 @@
 import {
   Component,
   Directive,
+  ElementRef,
   Input,
   OnChanges,
   SimpleChange,
@@ -11,27 +12,31 @@ import {
 } from './icon_provider';
 
 @Component({
-  template: `<md-icon-inline [innerHTML]="iconSvg"></md-icon-inline>`,
+  template: '<div class="md-icon-layout"></div>',
   selector: 'md-icon',
+  styleUrls: ['./components/icon/icon.css'],
   viewProviders: [MdIconProvider],
 })
 export class MdIcon implements OnChanges {
   @Input() svgSrc: string;
   @Input() svgIcon: string;
     
-  iconSvg: string;
-    
-  constructor(private _mdIconProvider: MdIconProvider) {
-    this.iconSvg = '<b>123456</b>';
+  constructor(private _element: ElementRef, private _mdIconProvider: MdIconProvider) {
   }
     
   ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
     if (this.svgIcon) {
       this._mdIconProvider.loadIcon(this.svgIcon)
-        .subscribe((svg: string) => {this.iconSvg = svg;});
+        .subscribe((svg: SVGElement) => this._setSvgElement(svg));
     } else if (this.svgSrc) {
       this._mdIconProvider.loadUrl(this.svgSrc)
-        .subscribe((svg: string) => {this.iconSvg = svg;});    
+        .subscribe((svg: SVGElement) => this._setSvgElement(svg));    
     }
   }
+  
+  private _setSvgElement(svg: SVGElement) {
+    const layoutElement = this._element.nativeElement.querySelector('.md-icon-layout');
+    layoutElement.innerHTML = '';
+    layoutElement.appendChild(svg);
+  }
 }
diff --git a/src/components/icon/icon_provider.ts b/src/components/icon/icon_provider.ts
index 8f654ced9f25..4c471bffcdd5 100644
--- a/src/components/icon/icon_provider.ts
+++ b/src/components/icon/icon_provider.ts
@@ -2,37 +2,74 @@ import {Injectable} from 'angular2/core';
 import {Http, HTTP_PROVIDERS} from 'angular2/http';
 import {Observable} from 'rxjs/Rx';
 
+const defaultConfig = {
+   defaultViewBoxSize: 24,
+   defaultFontSet: 'material-icons',
+   fontSets : <[string]>[],
+ };
+
 @Injectable()
 export class MdIconProvider {
-  private _namedIcons: Map<string, Observable<string>>;
-  private _defaultIcons: Map<string, string>;
+  private _namedIcons: Map<string, Observable<SVGElement>>;
+  private _defaultIcons: Map<string, SVGElement>;
+  private _config: any = {};
   
   constructor(private _http: Http) {
     this._namedIcons = new Map<string, any>();
-    this._defaultIcons = new Map<string, string>();
-    this._defaultIcons.set('search', `
-<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
-    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
-    `);
+    this._defaultIcons = this._createDefaultIconMap();
+  }
+  
+  _createDefaultIconMap(): Map<string, SVGElement> {
+    const icons = new Map<string, SVGElement>();
+    icons.set('md-tabs-arrow', this._createSvgElement(`
+      <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><polygon points="15.4,7.4 14,6 8,12 14,18 15.4,16.6 10.8,12 "/></g></svg>
+    `));
+    icons.set('md-close', this._createSvgElement(`
+      <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/></g></svg>
+    `));
+    icons.set('md-cancel', this._createSvgElement(`
+      <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><path d="M12 2c-5.53 0-10 4.47-10 10s4.47 10 10 10 10-4.47 10-10-4.47-10-10-10zm5 13.59l-1.41 1.41-3.59-3.59-3.59 3.59-1.41-1.41 3.59-3.59-3.59-3.59 1.41-1.41 3.59 3.59 3.59-3.59 1.41 1.41-3.59 3.59 3.59 3.59z"/></g></svg>
+    `));
+    icons.set('md-menu', this._createSvgElement(`
+      <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg>
+    `));
+    icons.set('md-toggle-arrow', this._createSvgElement(`
+      <svg version="1.1" x="0px" y="0px" viewBox="0 0 48 48"><path d="M24 16l-12 12 2.83 2.83 9.17-9.17 9.17 9.17 2.83-2.83z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>
+    `));
+    icons.set('md-calendar', this._createSvgElement(`
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>
+    `));
+    return icons;
   }
 
-  loadIcon(iconName: string): Observable<string> {
+  loadIcon(iconName: string): Observable<SVGElement> {
     if (this._defaultIcons.has(iconName)) {
-      return Observable.of(this._defaultIcons.get(iconName));
+      // Copy the element so changes won't affect the original.
+      return Observable.of(this._defaultIcons.get(iconName).cloneNode(true));
     }
     throw Error('Unknown icon: ' + iconName);
   }
   
-  loadUrl(url: string): Observable<string> {
+  loadUrl(url: string): Observable<SVGElement> {
     return this._http.get(url)
-        .map(response => this._extractSvg(response.text()));
+        .map(response => this._createSvgElement(response.text()));
   }
   
-  private _extractSvg(responseText: string) {
-    const start = responseText.indexOf('<svg>');
-    const end = responseText.lastIndexOf('</svg>');
-    return responseText.substring(start, end + '</svg>'.length);
+  private _createSvgElement(responseText: string): SVGElement {
+    const div = document.createElement('DIV');
+    div.innerHTML = responseText;
+    const svg = <SVGElement>div.querySelector('svg');
+    if (!svg) {
+      throw Error('<svg> tag not found');
+    }
+    
+    const viewBoxSize = this._config ? this._config.viewBoxSize : defaultConfig.defaultViewBoxSize;
+    svg.setAttribute('fit', '');
+    svg.setAttribute('height', '100%');
+    svg.setAttribute('width', '100%');
+    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+    svg.setAttribute('viewBox', svg.getAttribute('viewBox') || ('0 0 ' + viewBoxSize + ' ' + viewBoxSize));
+    svg.setAttribute('focusable', 'false'); // Disable IE11s default behavior to make SVGs focusable.
+    return svg;
   }
 }
diff --git a/src/demo-app/assets/search.svg b/src/demo-app/assets/search.svg
new file mode 100644
index 000000000000..6dbeb430f714
--- /dev/null
+++ b/src/demo-app/assets/search.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
+    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
diff --git a/src/demo-app/icon/icon-demo.html b/src/demo-app/icon/icon-demo.html
index 6599f343038b..30a28f6a311f 100644
--- a/src/demo-app/icon/icon-demo.html
+++ b/src/demo-app/icon/icon-demo.html
@@ -1,3 +1,14 @@
-These are some icons.
+<p>
+  These are some icons.
+</p>
 
-<md-icon [svgIcon]="'search'"></md-icon>
+<p>
+  Built-in named icons:
+  <md-icon svgIcon="md-menu"></md-icon>
+  <md-icon svgIcon="md-close"></md-icon>
+</p>
+
+<p>
+  Icons from URLs:
+  <md-icon [svgSrc]="'/demo-app/assets/search.svg'"></md-icon>
+</p>

From 8b6f5ffb384cd3a40909afac8be1c7f791402919 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Wed, 23 Mar 2016 20:49:53 -0400
Subject: [PATCH 03/37] API and caching cleanup.

---
 src/components/icon/icon.ts                   |   4 +-
 src/components/icon/icon_provider.ts          | 128 ++++++++++++------
 .../assets/{search.svg => search-icon.svg}    |   2 +-
 src/demo-app/icon/icon-demo.html              |   3 +-
 src/demo-app/icon/icon-demo.scss              |   7 +
 src/demo-app/icon/icon-demo.ts                |   1 +
 6 files changed, 101 insertions(+), 44 deletions(-)
 rename src/demo-app/assets/{search.svg => search-icon.svg} (74%)
 create mode 100644 src/demo-app/icon/icon-demo.scss

diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index f300ba6f8e47..7c13fca06363 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -26,10 +26,10 @@ export class MdIcon implements OnChanges {
     
   ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
     if (this.svgIcon) {
-      this._mdIconProvider.loadIcon(this.svgIcon)
+      this._mdIconProvider.loadIconByName(this.svgIcon)
         .subscribe((svg: SVGElement) => this._setSvgElement(svg));
     } else if (this.svgSrc) {
-      this._mdIconProvider.loadUrl(this.svgSrc)
+      this._mdIconProvider.loadIconByUrl(this.svgSrc)
         .subscribe((svg: SVGElement) => this._setSvgElement(svg));    
     }
   }
diff --git a/src/components/icon/icon_provider.ts b/src/components/icon/icon_provider.ts
index 4c471bffcdd5..6cf80fea9aa0 100644
--- a/src/components/icon/icon_provider.ts
+++ b/src/components/icon/icon_provider.ts
@@ -2,60 +2,108 @@ import {Injectable} from 'angular2/core';
 import {Http, HTTP_PROVIDERS} from 'angular2/http';
 import {Observable} from 'rxjs/Rx';
 
-const defaultConfig = {
-   defaultViewBoxSize: 24,
-   defaultFontSet: 'material-icons',
-   fontSets : <[string]>[],
- };
+/**
+  *  Configuration item stored in the Icon registry; used for lookups
+  *  to load if not already cached in the `loaded` cache
+  */
+class IconConfig {
+  constructor(public url: string, public viewBoxSize: number) {
+  }
+}
+
+class FontSet {
+  constructor(public alias: string, fontSet: string) {
+  }
+}
 
 @Injectable()
 export class MdIconProvider {
-  private _namedIcons: Map<string, Observable<SVGElement>>;
-  private _defaultIcons: Map<string, SVGElement>;
-  private _config: any = {};
+  private _iconConfigsByName = new Map<string, IconConfig>();
+  private _cachedIconsByName = new Map<string, SVGElement>();
+  private _cachedSvgByUrl = new Map<string, string>();
+  private _cachedIconsByUrl = new Map<string, SVGElement>();
+  
+  private _defaultViewBoxSize = 24;
+  private _defaultFontSet = 'material-icons';
+  private _fontSets = <[FontSet]>[];
   
   constructor(private _http: Http) {
-    this._namedIcons = new Map<string, any>();
-    this._defaultIcons = this._createDefaultIconMap();
+    var defaultIcons = [
+      {
+        id: 'md-tabs-arrow',
+        // Should these be something that won't collide with real URLs?
+        // Symbol might work but that's ES6 only with no backport to ES5.
+        url: '[[md-tabs-arrow.svg]]',
+        svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><polygon points="15.4,7.4 14,6 8,12 14,18 15.4,16.6 10.8,12 "/></g></svg>'
+      },
+      {
+        id: 'md-close',
+        url: '[[md-close.svg]]',
+        svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/></g></svg>'
+      },
+      {
+        id: 'md-cancel',
+        url: '[[md-cancel.svg]]',
+        svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><path d="M12 2c-5.53 0-10 4.47-10 10s4.47 10 10 10 10-4.47 10-10-4.47-10-10-10zm5 13.59l-1.41 1.41-3.59-3.59-3.59 3.59-1.41-1.41 3.59-3.59-3.59-3.59 1.41-1.41 3.59 3.59 3.59-3.59 1.41 1.41-3.59 3.59 3.59 3.59z"/></g></svg>'
+      },
+      {
+        id: 'md-menu',
+        url: '[[md-menu.svg]]',
+        svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg>'
+      },
+      {
+        id: 'md-toggle-arrow',
+        url: '[[md-toggle-arrow-svg]]',
+        svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 48 48"><path d="M24 16l-12 12 2.83 2.83 9.17-9.17 9.17 9.17 2.83-2.83z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>'
+      },
+      {
+        id: 'md-calendar',
+        url: '[[md-calendar.svg]]',
+        svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>'
+      },
+    ];
+    for (const item of defaultIcons) {
+      this.icon(item.id, item.url);
+      this._cachedSvgByUrl.set(item.url, item.svg);
+    }
   }
   
-  _createDefaultIconMap(): Map<string, SVGElement> {
-    const icons = new Map<string, SVGElement>();
-    icons.set('md-tabs-arrow', this._createSvgElement(`
-      <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><polygon points="15.4,7.4 14,6 8,12 14,18 15.4,16.6 10.8,12 "/></g></svg>
-    `));
-    icons.set('md-close', this._createSvgElement(`
-      <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/></g></svg>
-    `));
-    icons.set('md-cancel', this._createSvgElement(`
-      <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><path d="M12 2c-5.53 0-10 4.47-10 10s4.47 10 10 10 10-4.47 10-10-4.47-10-10-10zm5 13.59l-1.41 1.41-3.59-3.59-3.59 3.59-1.41-1.41 3.59-3.59-3.59-3.59 1.41-1.41 3.59 3.59 3.59-3.59 1.41 1.41-3.59 3.59 3.59 3.59z"/></g></svg>
-    `));
-    icons.set('md-menu', this._createSvgElement(`
-      <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg>
-    `));
-    icons.set('md-toggle-arrow', this._createSvgElement(`
-      <svg version="1.1" x="0px" y="0px" viewBox="0 0 48 48"><path d="M24 16l-12 12 2.83 2.83 9.17-9.17 9.17 9.17 2.83-2.83z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>
-    `));
-    icons.set('md-calendar', this._createSvgElement(`
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>
-    `));
-    return icons;
+  icon(name: string, url: string, viewBoxSize=0) {
+    this._iconConfigsByName.set(name, new IconConfig(url, viewBoxSize || this._defaultViewBoxSize));
   }
 
-  loadIcon(iconName: string): Observable<SVGElement> {
-    if (this._defaultIcons.has(iconName)) {
+  loadIconByName(iconName: string): Observable<SVGElement> {
+    if (this._cachedIconsByName.has(iconName)) {
       // Copy the element so changes won't affect the original.
-      return Observable.of(this._defaultIcons.get(iconName).cloneNode(true));
+      return Observable.of(this._cachedIconsByName.get(iconName).cloneNode(true));
+    }
+    const iconConfig = this._iconConfigsByName.get(iconName);
+    if (!iconConfig) {
+      throw Error('Unknown icon: ' + iconName);
+    }
+    return this._loadIconFromConfig(iconConfig)
+        .do((svg: SVGElement) => this._cachedIconsByName.set(iconName, svg));
+  }
+  
+  loadIconByUrl(url: string): Observable<SVGElement> {
+    if (this._cachedIconsByUrl.has(url)) {
+      return Observable.of(this._cachedIconsByUrl.get(url).cloneNode(true));
     }
-    throw Error('Unknown icon: ' + iconName);
+    return this._loadIconFromConfig(new IconConfig(url, this._defaultViewBoxSize))
+        .do((svg: SVGElement) => this._cachedIconsByUrl.set(url, svg));
   }
   
-  loadUrl(url: string): Observable<SVGElement> {
-    return this._http.get(url)
-        .map(response => this._createSvgElement(response.text()));
+  private _loadIconFromConfig(config: IconConfig): Observable<SVGElement> {
+    // Fetch and cache SVG, if we haven't already.
+    var svgResponse: Observable<string> = this._cachedSvgByUrl.has(config.url) ?
+        Observable.of(this._cachedSvgByUrl.get(config.url)) :
+        this._http.get(config.url)
+            .map((response) => response.text())
+            .do(svgText => this._cachedSvgByUrl.set(config.url, svgText));
+    return svgResponse.map(svgText => this._createSvgElement(svgText, config));
   }
   
-  private _createSvgElement(responseText: string): SVGElement {
+  private _createSvgElement(responseText: string, config: IconConfig): SVGElement {
     const div = document.createElement('DIV');
     div.innerHTML = responseText;
     const svg = <SVGElement>div.querySelector('svg');
@@ -63,7 +111,7 @@ export class MdIconProvider {
       throw Error('<svg> tag not found');
     }
     
-    const viewBoxSize = this._config ? this._config.viewBoxSize : defaultConfig.defaultViewBoxSize;
+    const viewBoxSize = config.viewBoxSize || this._defaultViewBoxSize;
     svg.setAttribute('fit', '');
     svg.setAttribute('height', '100%');
     svg.setAttribute('width', '100%');
diff --git a/src/demo-app/assets/search.svg b/src/demo-app/assets/search-icon.svg
similarity index 74%
rename from src/demo-app/assets/search.svg
rename to src/demo-app/assets/search-icon.svg
index 6dbeb430f714..86cd6a722d0e 100644
--- a/src/demo-app/assets/search.svg
+++ b/src/demo-app/assets/search-icon.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
+<svg xmlns="http://www.w3.org/2000/svg">
     <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
     <path d="M0 0h24v24H0z" fill="none"/>
 </svg>
diff --git a/src/demo-app/icon/icon-demo.html b/src/demo-app/icon/icon-demo.html
index 30a28f6a311f..15024e647d0c 100644
--- a/src/demo-app/icon/icon-demo.html
+++ b/src/demo-app/icon/icon-demo.html
@@ -6,9 +6,10 @@
   Built-in named icons:
   <md-icon svgIcon="md-menu"></md-icon>
   <md-icon svgIcon="md-close"></md-icon>
+  <md-icon svgIcon="md-calendar"></md-icon>
 </p>
 
 <p>
   Icons from URLs:
-  <md-icon [svgSrc]="'/demo-app/assets/search.svg'"></md-icon>
+  <md-icon svgSrc="/demo-app/assets/search-icon.svg"></md-icon>
 </p>
diff --git a/src/demo-app/icon/icon-demo.scss b/src/demo-app/icon/icon-demo.scss
new file mode 100644
index 000000000000..c4727534fcc1
--- /dev/null
+++ b/src/demo-app/icon/icon-demo.scss
@@ -0,0 +1,7 @@
+md-icon:nth-child(1) {
+    color: purple;
+}
+
+md-icon:nth-child(2) {
+    color: green;
+}
\ No newline at end of file
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
index a633ad362205..b3727909f237 100644
--- a/src/demo-app/icon/icon-demo.ts
+++ b/src/demo-app/icon/icon-demo.ts
@@ -4,6 +4,7 @@ import {MdIcon} from '../../components/icon/icon';
 @Component({
     selector: 'button-demo',
     templateUrl: 'demo-app/icon/icon-demo.html',
+    styleUrls: ['demo-app/icon/icon-demo.css'],
     directives: [MdIcon]
 })
 export class IconDemo {

From 9518ca2dfba20dd050d8e8365be3704b1642b16d Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Wed, 23 Mar 2016 20:55:16 -0400
Subject: [PATCH 04/37] var->const

---
 src/components/icon/icon_provider.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/icon/icon_provider.ts b/src/components/icon/icon_provider.ts
index 6cf80fea9aa0..54dacca8f7ec 100644
--- a/src/components/icon/icon_provider.ts
+++ b/src/components/icon/icon_provider.ts
@@ -3,8 +3,7 @@ import {Http, HTTP_PROVIDERS} from 'angular2/http';
 import {Observable} from 'rxjs/Rx';
 
 /**
-  *  Configuration item stored in the Icon registry; used for lookups
-  *  to load if not already cached in the `loaded` cache
+  *  Configuration for a named icon, used when initially loading it.
   */
 class IconConfig {
   constructor(public url: string, public viewBoxSize: number) {
@@ -28,10 +27,10 @@ export class MdIconProvider {
   private _fontSets = <[FontSet]>[];
   
   constructor(private _http: Http) {
-    var defaultIcons = [
+    const defaultIcons = [
       {
         id: 'md-tabs-arrow',
-        // Should these be something that won't collide with real URLs?
+        // Should these be something that can't collide with real URLs?
         // Symbol might work but that's ES6 only with no backport to ES5.
         url: '[[md-tabs-arrow.svg]]',
         svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><polygon points="15.4,7.4 14,6 8,12 14,18 15.4,16.6 10.8,12 "/></g></svg>'
@@ -95,7 +94,8 @@ export class MdIconProvider {
   
   private _loadIconFromConfig(config: IconConfig): Observable<SVGElement> {
     // Fetch and cache SVG, if we haven't already.
-    var svgResponse: Observable<string> = this._cachedSvgByUrl.has(config.url) ?
+    // (Is there an Angular 2 equivalent of $templateCache?)
+    const svgResponse: Observable<string> = this._cachedSvgByUrl.has(config.url) ?
         Observable.of(this._cachedSvgByUrl.get(config.url)) :
         this._http.get(config.url)
             .map((response) => response.text())

From ec761da67145a8e01459dccae64b567cf36fbf72 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Wed, 23 Mar 2016 21:25:46 -0400
Subject: [PATCH 05/37] Make MdIconProvider available at top level so it's
 shared by all components.

---
 .../icon/{icon_provider.ts => icon-provider.ts}           | 0
 src/components/icon/icon.ts                               | 3 +--
 src/demo-app/assets/thumbup-icon.svg                      | 4 ++++
 src/demo-app/icon/icon-demo.html                          | 5 +++++
 src/demo-app/icon/icon-demo.ts                            | 8 ++++++--
 src/main.ts                                               | 2 ++
 6 files changed, 18 insertions(+), 4 deletions(-)
 rename src/components/icon/{icon_provider.ts => icon-provider.ts} (100%)
 create mode 100644 src/demo-app/assets/thumbup-icon.svg

diff --git a/src/components/icon/icon_provider.ts b/src/components/icon/icon-provider.ts
similarity index 100%
rename from src/components/icon/icon_provider.ts
rename to src/components/icon/icon-provider.ts
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 7c13fca06363..83e7f6a9bf22 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -9,13 +9,12 @@ import {
 
 import {
   MdIconProvider,
-} from './icon_provider';
+} from './icon-provider';
 
 @Component({
   template: '<div class="md-icon-layout"></div>',
   selector: 'md-icon',
   styleUrls: ['./components/icon/icon.css'],
-  viewProviders: [MdIconProvider],
 })
 export class MdIcon implements OnChanges {
   @Input() svgSrc: string;
diff --git a/src/demo-app/assets/thumbup-icon.svg b/src/demo-app/assets/thumbup-icon.svg
new file mode 100644
index 000000000000..2391a9f66103
--- /dev/null
+++ b/src/demo-app/assets/thumbup-icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/>
+</svg>
diff --git a/src/demo-app/icon/icon-demo.html b/src/demo-app/icon/icon-demo.html
index 15024e647d0c..2a85de8375b4 100644
--- a/src/demo-app/icon/icon-demo.html
+++ b/src/demo-app/icon/icon-demo.html
@@ -13,3 +13,8 @@
   Icons from URLs:
   <md-icon svgSrc="/demo-app/assets/search-icon.svg"></md-icon>
 </p>
+
+<p>
+  Configured named icons:
+  <md-icon svgIcon="thumb-up"></md-icon>
+</p>
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
index b3727909f237..7cec9121db2d 100644
--- a/src/demo-app/icon/icon-demo.ts
+++ b/src/demo-app/icon/icon-demo.ts
@@ -1,12 +1,16 @@
 import {Component} from 'angular2/core';
 import {MdIcon} from '../../components/icon/icon';
+import {MdIconProvider} from '../../components/icon/icon-provider';
 
 @Component({
     selector: 'button-demo',
     templateUrl: 'demo-app/icon/icon-demo.html',
     styleUrls: ['demo-app/icon/icon-demo.css'],
-    directives: [MdIcon]
+    directives: [MdIcon],
+    viewProviders: [MdIconProvider],
 })
 export class IconDemo {
-
+  constructor(mdIconProvider: MdIconProvider) {
+      mdIconProvider.icon('thumb-up', '/demo-app/assets/thumbup-icon.svg');
+  }
 }
diff --git a/src/main.ts b/src/main.ts
index 40ef5abcd385..efee256265a6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,9 +2,11 @@ import {bootstrap} from 'angular2/platform/browser';
 import {DemoApp} from './demo-app/demo-app';
 import {HTTP_PROVIDERS} from 'angular2/http';
 import {ROUTER_PROVIDERS} from 'angular2/router';
+import {MdIconProvider} from './components/icon/icon-provider';
 import 'rxjs/Rx';
 
 bootstrap(DemoApp, [
   ROUTER_PROVIDERS,
   HTTP_PROVIDERS,
+  MdIconProvider,
 ]);

From 776b7550372d5e700f32097d98c86cab31cbfb6b Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Thu, 24 Mar 2016 02:37:11 -0400
Subject: [PATCH 06/37] Icon set support.

---
 src/components/icon/icon-provider.ts  | 138 +++++++++++++++++++++-----
 src/components/icon/icon.ts           |  16 ++-
 src/demo-app/assets/core-icon-set.svg |  33 ++++++
 src/demo-app/icon/icon-demo.html      |   6 ++
 src/demo-app/icon/icon-demo.ts        |   3 +
 5 files changed, 166 insertions(+), 30 deletions(-)
 create mode 100644 src/demo-app/assets/core-icon-set.svg

diff --git a/src/components/icon/icon-provider.ts b/src/components/icon/icon-provider.ts
index 54dacca8f7ec..28ec4964d1c9 100644
--- a/src/components/icon/icon-provider.ts
+++ b/src/components/icon/icon-provider.ts
@@ -1,5 +1,5 @@
 import {Injectable} from 'angular2/core';
-import {Http, HTTP_PROVIDERS} from 'angular2/http';
+import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
 import {Observable} from 'rxjs/Rx';
 
 /**
@@ -17,10 +17,17 @@ class FontSet {
 
 @Injectable()
 export class MdIconProvider {
+  private _predefinedIcons = new Map<string, string>();
   private _iconConfigsByName = new Map<string, IconConfig>();
   private _cachedIconsByName = new Map<string, SVGElement>();
-  private _cachedSvgByUrl = new Map<string, string>();
+
+  private _iconSetConfigsByName = new Map<string, IconConfig>();
+  private _cachedIconSets = new Map<string, SVGElement>();
+  // Keys here are "[setName]:[iconName]"
+  private _cachedIconsBySetAndName = new Map<string, SVGElement>();
   private _cachedIconsByUrl = new Map<string, SVGElement>();
+
+  private _inProgressUrlFetches = new Map<string, Observable<string>>();
   
   private _defaultViewBoxSize = 24;
   private _defaultFontSet = 'material-icons';
@@ -30,46 +37,42 @@ export class MdIconProvider {
     const defaultIcons = [
       {
         id: 'md-tabs-arrow',
-        // Should these be something that can't collide with real URLs?
-        // Symbol might work but that's ES6 only with no backport to ES5.
-        url: '[[md-tabs-arrow.svg]]',
         svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><polygon points="15.4,7.4 14,6 8,12 14,18 15.4,16.6 10.8,12 "/></g></svg>'
       },
       {
         id: 'md-close',
-        url: '[[md-close.svg]]',
         svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/></g></svg>'
       },
       {
         id: 'md-cancel',
-        url: '[[md-cancel.svg]]',
         svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><path d="M12 2c-5.53 0-10 4.47-10 10s4.47 10 10 10 10-4.47 10-10-4.47-10-10-10zm5 13.59l-1.41 1.41-3.59-3.59-3.59 3.59-1.41-1.41 3.59-3.59-3.59-3.59 1.41-1.41 3.59 3.59 3.59-3.59 1.41 1.41-3.59 3.59 3.59 3.59z"/></g></svg>'
       },
       {
         id: 'md-menu',
-        url: '[[md-menu.svg]]',
         svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg>'
       },
       {
         id: 'md-toggle-arrow',
-        url: '[[md-toggle-arrow-svg]]',
         svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 48 48"><path d="M24 16l-12 12 2.83 2.83 9.17-9.17 9.17 9.17 2.83-2.83z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>'
       },
       {
         id: 'md-calendar',
-        url: '[[md-calendar.svg]]',
         svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>'
       },
     ];
     for (const item of defaultIcons) {
-      this.icon(item.id, item.url);
-      this._cachedSvgByUrl.set(item.url, item.svg);
+      this._predefinedIcons.set(item.id, item.svg);
     }
   }
   
   icon(name: string, url: string, viewBoxSize=0) {
     this._iconConfigsByName.set(name, new IconConfig(url, viewBoxSize || this._defaultViewBoxSize));
   }
+  
+  iconSet(name: string, url: string, viewBoxSize=0) {
+    this._iconSetConfigsByName.set(
+        name, new IconConfig(url, viewBoxSize || this._defaultViewBoxSize));
+  }
 
   loadIconByName(iconName: string): Observable<SVGElement> {
     if (this._cachedIconsByName.has(iconName)) {
@@ -78,13 +81,44 @@ export class MdIconProvider {
     }
     const iconConfig = this._iconConfigsByName.get(iconName);
     if (!iconConfig) {
-      throw Error('Unknown icon: ' + iconName);
+      // Check for predefined icon, create element and cache if so.
+      if (this._predefinedIcons.has(iconName)) {
+        const icon = this._svgElementFromString(this._predefinedIcons.get(iconName));
+        this._cachedIconsByName.set(iconName, icon);
+        return Observable.of(icon.cloneNode(true));
+      } else {
+        throw Error('Unknown icon: ' + iconName);
+      }
     }
     return this._loadIconFromConfig(iconConfig)
         .do((svg: SVGElement) => this._cachedIconsByName.set(iconName, svg));
   }
   
-  loadIconByUrl(url: string): Observable<SVGElement> {
+  loadIconFromSetByName(setName: string, iconName: string): Observable<SVGElement> {
+    const combinedKey = setName + ':' + iconName;
+    // Check for this specific icon being cached.
+    if (this._cachedIconsBySetAndName.has(combinedKey)) {
+      return Observable.of(this._cachedIconsBySetAndName.get(combinedKey).cloneNode(true));
+    }
+    const iconConfig = this._iconSetConfigsByName.get(setName);
+    if (!iconConfig) {
+        throw Error('Unknown icon set: ' + setName);
+    }
+    // Check for the icon set being cached.
+    if (this._cachedIconSets.has(setName)) {
+      var iconFromSet = this._extractSvgIconFromSet(
+          this._cachedIconSets.get(setName), iconName, iconConfig);
+      this._cachedIconsBySetAndName.set(combinedKey, iconFromSet);
+      return Observable.of(iconFromSet.cloneNode(true));
+    }
+    // Fetch the set and extract the icon.
+    return this._loadIconSetFromConfig(iconConfig)
+        .do((iconSet: SVGElement) => this._cachedIconSets.set(setName, iconSet))
+        .map((iconSet: SVGElement) =>
+            this._extractSvgIconFromSet(iconSet, iconName, iconConfig));
+  }
+  
+  loadIconFromUrl(url: string): Observable<SVGElement> {
     if (this._cachedIconsByUrl.has(url)) {
       return Observable.of(this._cachedIconsByUrl.get(url).cloneNode(true));
     }
@@ -92,32 +126,82 @@ export class MdIconProvider {
         .do((svg: SVGElement) => this._cachedIconsByUrl.set(url, svg));
   }
   
+  private _fetchUrl(url: string): Observable<string> {
+    // FIXME: This is trying to avoid sending a duplicate request for a URL when there is already
+    // a request in progress for that URL. But it's not working; even though we return the cached
+    // Observable, a second request is still sent.
+    console.log('*** fetchUrl: ' + url);
+    if (this._inProgressUrlFetches.has(url)) {
+      console.log("*** Using existing request");
+      return this._inProgressUrlFetches.get(url);
+    }
+    console.log("*** Sending request");
+    const req = this._http.get(url)
+        .do((response) => {
+          console.log('*** Removing request: ' + url);
+          this._inProgressUrlFetches.delete(url);
+        })
+        .map((response) => response.text());
+    this._inProgressUrlFetches.set(url, req);
+    return req;
+  }
+  
   private _loadIconFromConfig(config: IconConfig): Observable<SVGElement> {
-    // Fetch and cache SVG, if we haven't already.
-    // (Is there an Angular 2 equivalent of $templateCache?)
-    const svgResponse: Observable<string> = this._cachedSvgByUrl.has(config.url) ?
-        Observable.of(this._cachedSvgByUrl.get(config.url)) :
-        this._http.get(config.url)
-            .map((response) => response.text())
-            .do(svgText => this._cachedSvgByUrl.set(config.url, svgText));
-    return svgResponse.map(svgText => this._createSvgElement(svgText, config));
+    return this._fetchUrl(config.url)
+        .map(svgText => this._createSvgElementForSingleIcon(svgText, config));
   }
   
-  private _createSvgElement(responseText: string, config: IconConfig): SVGElement {
+  private _loadIconSetFromConfig(config: IconConfig): Observable<SVGElement> {
+    return this._fetchUrl(config.url)
+        .map((svgText) => this._svgElementFromString(svgText));
+  }
+  
+  private _createSvgElementForSingleIcon(responseText: string, config: IconConfig): SVGElement {
+    const svg = this._svgElementFromString(responseText);
+    this._setSvgAttributes(svg, config);
+    return svg;
+  }
+  
+  private _svgElementFromString(str: string): SVGElement {
     const div = document.createElement('DIV');
-    div.innerHTML = responseText;
+    div.innerHTML = str;
     const svg = <SVGElement>div.querySelector('svg');
     if (!svg) {
       throw Error('<svg> tag not found');
     }
-    
+    return svg;
+  }
+
+  private _setSvgAttributes(svg: SVGElement, config: IconConfig) {
     const viewBoxSize = config.viewBoxSize || this._defaultViewBoxSize;
+    if (!svg.getAttribute('xmlns')) {
+      svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    }
     svg.setAttribute('fit', '');
     svg.setAttribute('height', '100%');
     svg.setAttribute('width', '100%');
     svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-    svg.setAttribute('viewBox', svg.getAttribute('viewBox') || ('0 0 ' + viewBoxSize + ' ' + viewBoxSize));
-    svg.setAttribute('focusable', 'false'); // Disable IE11s default behavior to make SVGs focusable.
+    svg.setAttribute('viewBox',
+        svg.getAttribute('viewBox') || ('0 0 ' + viewBoxSize + ' ' + viewBoxSize));
+    svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable.
+  }
+  
+  private _extractSvgIconFromSet(
+      iconSet: SVGElement, iconName: string, config: IconConfig): SVGElement {
+    const iconNode = iconSet.querySelector('#' + iconName);
+    if (!iconNode) {
+      throw Error('No icon found in set with id: ' + iconName);
+    }
+    // createElement('SVG') doesn't work as expected; the DOM ends up with
+    // the correct nodes, but the SVG content doesn't render. Instead we
+    // have to set the entire SVG content via innerHTML, and then grab
+    // the <svg> node.
+    // http://stackoverflow.com/questions/23003278/svg-innerhtml-in-firefox-can-not-display
+    const div = document.createElement('DIV');
+    div.appendChild(iconNode);
+    div.innerHTML = '<svg>' + div.innerHTML + '</svg>';
+    const svg = <SVGElement>div.querySelector('svg');
+    this._setSvgAttributes(svg, config);
     return svg;
   }
 }
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 83e7f6a9bf22..94c7480e3869 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -25,10 +25,20 @@ export class MdIcon implements OnChanges {
     
   ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
     if (this.svgIcon) {
-      this._mdIconProvider.loadIconByName(this.svgIcon)
-        .subscribe((svg: SVGElement) => this._setSvgElement(svg));
+      const sepIndex = this.svgIcon.indexOf(':');
+      if (sepIndex == -1) {
+        // Icon not in set.
+        this._mdIconProvider.loadIconByName(this.svgIcon)
+            .subscribe((svg: SVGElement) => this._setSvgElement(svg));
+      } else {
+        // Set name is before separator.
+        const setName = this.svgIcon.substring(0, sepIndex);
+        const iconName = this.svgIcon.substring(sepIndex + 1);
+        this._mdIconProvider.loadIconFromSetByName(setName, iconName)
+            .subscribe((svg: SVGElement) => this._setSvgElement(svg));
+      }
     } else if (this.svgSrc) {
-      this._mdIconProvider.loadIconByUrl(this.svgSrc)
+      this._mdIconProvider.loadIconFromUrl(this.svgSrc)
         .subscribe((svg: SVGElement) => this._setSvgElement(svg));    
     }
   }
diff --git a/src/demo-app/assets/core-icon-set.svg b/src/demo-app/assets/core-icon-set.svg
new file mode 100644
index 000000000000..60c9e7b0ee33
--- /dev/null
+++ b/src/demo-app/assets/core-icon-set.svg
@@ -0,0 +1,33 @@
+<svg><defs>
+<g id="3d-rotation"><path d="M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z"/></g>
+<g id="accessibility"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/></g>
+<g id="account-balance"><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"/></g>
+<g id="account-balance-wallet"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></g>
+<g id="account-box"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/></g>
+<g id="account-child"><circle cx="12" cy="13.49" r="1.5"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 2.5c1.24 0 2.25 1.01 2.25 2.25S13.24 9 12 9 9.75 7.99 9.75 6.75 10.76 4.5 12 4.5zm5 10.56v2.5c-.45.41-.96.77-1.5 1.05v-.68c0-.34-.17-.65-.46-.92-.65-.62-1.89-1.02-3.04-1.02-.96 0-1.96.28-2.65.73l-.17.12-.21.17c.78.47 1.63.72 2.54.82l1.33.15c.37.04.66.36.66.75 0 .29-.16.53-.4.66-.28.15-.64.09-.95.09-.35 0-.69-.01-1.03-.05-.5-.06-.99-.17-1.46-.33-.49-.16-.97-.38-1.42-.64-.22-.13-.44-.27-.65-.43l-.31-.24c-.04-.02-.28-.18-.28-.23v-4.28c0-1.58 2.63-2.78 5-2.78s5 1.2 5 2.78v1.78z"/></g>
+<g id="account-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></g>
+<g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></g>
+<g id="add-box"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></g>
+<g id="add-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></g>
+<g id="add-circle-outline"><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></g>
+<g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"/></g>
+<g id="alarm"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></g>
+<g id="alarm-add"><path d="M7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm1-11h-2v3H8v2h3v3h2v-3h3v-2h-3V9z"/></g>
+<g id="alarm-off"><path d="M12 6c3.87 0 7 3.13 7 7 0 .84-.16 1.65-.43 2.4l1.52 1.52c.58-1.19.91-2.51.91-3.92 0-4.97-4.03-9-9-9-1.41 0-2.73.33-3.92.91L9.6 6.43C10.35 6.16 11.16 6 12 6zm10-.28l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM2.92 2.29L1.65 3.57 2.98 4.9l-1.11.93 1.42 1.42 1.11-.94.8.8C3.83 8.69 3 10.75 3 13c0 4.97 4.02 9 9 9 2.25 0 4.31-.83 5.89-2.2l2.2 2.2 1.27-1.27L3.89 3.27l-.97-.98zm13.55 16.1C15.26 19.39 13.7 20 12 20c-3.87 0-7-3.13-7-7 0-1.7.61-3.26 1.61-4.47l9.86 9.86zM8.02 3.28L6.6 1.86l-.86.71 1.42 1.42.86-.71z"/></g>
+<g id="alarm-on"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-1.46-5.47L8.41 12.4l-1.06 1.06 3.18 3.18 6-6-1.06-1.06-4.93 4.95z"/></g>
+<g id="android"><path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/></g>
+<g id="announcement"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"/></g>
+<g id="apps"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></g>
+<g id="archive"><path d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z"/></g>
+<g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></g>
+<g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"/></g>
+<g id="arrow-drop-down-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 12l-4-4h8l-4 4z"/></g>
+<g id="arrow-drop-up"><path d="M7 14l5-5 5 5z"/></g>
+<g id="cached"><path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"/></g>
+<g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></g>
+<g id="undo"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></g>
+<g id="redo"><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></g>
+<g id="content-copy"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></g>
+<g id="content-cut"><path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"/></g>
+<g id="content-paste"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/></g>
+</defs></svg>
diff --git a/src/demo-app/icon/icon-demo.html b/src/demo-app/icon/icon-demo.html
index 2a85de8375b4..c63295ab998c 100644
--- a/src/demo-app/icon/icon-demo.html
+++ b/src/demo-app/icon/icon-demo.html
@@ -18,3 +18,9 @@
   Configured named icons:
   <md-icon svgIcon="thumb-up"></md-icon>
 </p>
+
+<p>
+  Icons from set:
+  <md-icon svgIcon="core:alarm"></md-icon>
+  <md-icon svgIcon="core:android"></md-icon>
+</p>
\ No newline at end of file
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
index 7cec9121db2d..6f0d0edc5367 100644
--- a/src/demo-app/icon/icon-demo.ts
+++ b/src/demo-app/icon/icon-demo.ts
@@ -10,7 +10,10 @@ import {MdIconProvider} from '../../components/icon/icon-provider';
     viewProviders: [MdIconProvider],
 })
 export class IconDemo {
+  showAndroid = false;
+
   constructor(mdIconProvider: MdIconProvider) {
       mdIconProvider.icon('thumb-up', '/demo-app/assets/thumbup-icon.svg');
+      mdIconProvider.iconSet('core', '/demo-app/assets/core-icon-set.svg');
   }
 }

From d88144e73a9a23daabce1a2a820a2ea38fe902ac Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Sun, 27 Mar 2016 19:33:38 -0400
Subject: [PATCH 07/37] Font support, various refactorings.

---
 src/components/icon/icon-provider.ts          | 120 ++++++++----------
 src/components/icon/icon.scss                 |   6 +-
 src/components/icon/icon.ts                   |  98 +++++++++++++-
 src/demo-app/demo-app.scss                    |   4 +-
 .../{ => icon}/assets/core-icon-set.svg       |   0
 .../{ => icon}/assets/search-icon.svg         |   0
 .../{ => icon}/assets/thumbup-icon.svg        |   0
 src/demo-app/icon/icon-demo.html              |  26 ++--
 src/demo-app/icon/icon-demo.scss              |   6 +-
 src/demo-app/icon/icon-demo.ts                |  13 +-
 src/index.html                                |   4 +
 src/main.ts                                   |   2 +
 12 files changed, 185 insertions(+), 94 deletions(-)
 rename src/demo-app/{ => icon}/assets/core-icon-set.svg (100%)
 rename src/demo-app/{ => icon}/assets/search-icon.svg (100%)
 rename src/demo-app/{ => icon}/assets/thumbup-icon.svg (100%)

diff --git a/src/components/icon/icon-provider.ts b/src/components/icon/icon-provider.ts
index 28ec4964d1c9..c7ea487bda21 100644
--- a/src/components/icon/icon-provider.ts
+++ b/src/components/icon/icon-provider.ts
@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/core';
+import {Injectable, Renderer} from 'angular2/core';
 import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
 import {Observable} from 'rxjs/Rx';
 
@@ -10,14 +10,8 @@ class IconConfig {
   }
 }
 
-class FontSet {
-  constructor(public alias: string, fontSet: string) {
-  }
-}
-
 @Injectable()
 export class MdIconProvider {
-  private _predefinedIcons = new Map<string, string>();
   private _iconConfigsByName = new Map<string, IconConfig>();
   private _cachedIconsByName = new Map<string, SVGElement>();
 
@@ -27,51 +21,48 @@ export class MdIconProvider {
   private _cachedIconsBySetAndName = new Map<string, SVGElement>();
   private _cachedIconsByUrl = new Map<string, SVGElement>();
 
+  private _fontClassNamesByAlias = new Map<string, string>();
+
   private _inProgressUrlFetches = new Map<string, Observable<string>>();
   
   private _defaultViewBoxSize = 24;
-  private _defaultFontSet = 'material-icons';
-  private _fontSets = <[FontSet]>[];
-  
-  constructor(private _http: Http) {
-    const defaultIcons = [
-      {
-        id: 'md-tabs-arrow',
-        svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><polygon points="15.4,7.4 14,6 8,12 14,18 15.4,16.6 10.8,12 "/></g></svg>'
-      },
-      {
-        id: 'md-close',
-        svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/></g></svg>'
-      },
-      {
-        id: 'md-cancel',
-        svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g><path d="M12 2c-5.53 0-10 4.47-10 10s4.47 10 10 10 10-4.47 10-10-4.47-10-10-10zm5 13.59l-1.41 1.41-3.59-3.59-3.59 3.59-1.41-1.41 3.59-3.59-3.59-3.59 1.41-1.41 3.59 3.59 3.59-3.59 1.41 1.41-3.59 3.59 3.59 3.59z"/></g></svg>'
-      },
-      {
-        id: 'md-menu',
-        svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg>'
-      },
-      {
-        id: 'md-toggle-arrow',
-        svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 48 48"><path d="M24 16l-12 12 2.83 2.83 9.17-9.17 9.17 9.17 2.83-2.83z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>'
-      },
-      {
-        id: 'md-calendar',
-        svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>'
-      },
-    ];
-    for (const item of defaultIcons) {
-      this._predefinedIcons.set(item.id, item.svg);
-    }
+  private _defaultFontSetClass = 'material-icons';
+  
+  constructor(private _http: Http, private _renderer: Renderer) {
   }
   
-  icon(name: string, url: string, viewBoxSize=0) {
+  public registerIcon(name: string, url: string, viewBoxSize:number=0): MdIconProvider {
     this._iconConfigsByName.set(name, new IconConfig(url, viewBoxSize || this._defaultViewBoxSize));
+    return this;
   }
   
-  iconSet(name: string, url: string, viewBoxSize=0) {
+  public registerIconSet(name: string, url: string, viewBoxSize=0): MdIconProvider {
     this._iconSetConfigsByName.set(
         name, new IconConfig(url, viewBoxSize || this._defaultViewBoxSize));
+    return this;
+  }
+  
+  public registerFontSet(alias: string, className?: string): MdIconProvider {
+    this._fontClassNamesByAlias.set(alias, className || alias);
+    return this;
+  }
+  
+  public setDefaultViewBoxSize(size: number) {
+    this._defaultViewBoxSize = size;
+    return this;
+  }
+  
+  public getDefaultViewBoxSize(): number {
+    return this._defaultViewBoxSize;
+  }
+  
+  public setDefaultFontSetClass(className: string) {
+    this._defaultFontSetClass = className;
+    return this;
+  }
+  
+  public getDefaultFontSetClass(): string {
+    return this._defaultFontSetClass;
   }
 
   loadIconByName(iconName: string): Observable<SVGElement> {
@@ -81,14 +72,7 @@ export class MdIconProvider {
     }
     const iconConfig = this._iconConfigsByName.get(iconName);
     if (!iconConfig) {
-      // Check for predefined icon, create element and cache if so.
-      if (this._predefinedIcons.has(iconName)) {
-        const icon = this._svgElementFromString(this._predefinedIcons.get(iconName));
-        this._cachedIconsByName.set(iconName, icon);
-        return Observable.of(icon.cloneNode(true));
-      } else {
-        throw Error('Unknown icon: ' + iconName);
-      }
+      throw Error('Unknown icon: ' + iconName);
     }
     return this._loadIconFromConfig(iconConfig)
         .do((svg: SVGElement) => this._cachedIconsByName.set(iconName, svg));
@@ -125,6 +109,13 @@ export class MdIconProvider {
     return this._loadIconFromConfig(new IconConfig(url, this._defaultViewBoxSize))
         .do((svg: SVGElement) => this._cachedIconsByUrl.set(url, svg));
   }
+
+  classNameForFontAlias(alias: string): string {
+    if (!this._fontClassNamesByAlias.has(alias)) {
+      throw Error('Unknown font alias: ' + alias);
+    }
+    return this._fontClassNamesByAlias.get(alias);
+  }
   
   private _fetchUrl(url: string): Observable<string> {
     // FIXME: This is trying to avoid sending a duplicate request for a URL when there is already
@@ -161,16 +152,6 @@ export class MdIconProvider {
     this._setSvgAttributes(svg, config);
     return svg;
   }
-  
-  private _svgElementFromString(str: string): SVGElement {
-    const div = document.createElement('DIV');
-    div.innerHTML = str;
-    const svg = <SVGElement>div.querySelector('svg');
-    if (!svg) {
-      throw Error('<svg> tag not found');
-    }
-    return svg;
-  }
 
   private _setSvgAttributes(svg: SVGElement, config: IconConfig) {
     const viewBoxSize = config.viewBoxSize || this._defaultViewBoxSize;
@@ -194,14 +175,23 @@ export class MdIconProvider {
     }
     // createElement('SVG') doesn't work as expected; the DOM ends up with
     // the correct nodes, but the SVG content doesn't render. Instead we
-    // have to set the entire SVG content via innerHTML, and then grab
-    // the <svg> node.
+    // have to create an empty SVG node using innerHTML and append its content.
     // http://stackoverflow.com/questions/23003278/svg-innerhtml-in-firefox-can-not-display
+    const svg = this._svgElementFromString('<svg></svg>');
+    svg.appendChild(iconNode);
+    this._setSvgAttributes(svg, config);
+    return svg;
+  }
+
+  private _svgElementFromString(str: string): SVGElement {
+    // TODO: Is there a better way than innerHTML? Renderer doesn't appear to have a method for
+    // creating an element from an HTML string.
     const div = document.createElement('DIV');
-    div.appendChild(iconNode);
-    div.innerHTML = '<svg>' + div.innerHTML + '</svg>';
+    div.innerHTML = str;
     const svg = <SVGElement>div.querySelector('svg');
-    this._setSvgAttributes(svg, config);
+    if (!svg) {
+      throw Error('<svg> tag not found');
+    }
     return svg;
   }
 }
diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
index a9598b14a519..3c1128b3e87b 100644
--- a/src/components/icon/icon.scss
+++ b/src/components/icon/icon.scss
@@ -4,7 +4,11 @@
 /** The width/height of the icon element. */
 $md-icon-size: 24px !default;
 
-.md-icon-layout {
+/**
+This works because we're using ViewEncapsulation.None. If we used the default
+encapsulation, the selector would need to be ":host".
+*/
+md-icon {
     background-repeat: no-repeat;
     display: inline-block;
     fill: currentColor;
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 94c7480e3869..ad730fd22c74 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -2,25 +2,48 @@ import {
   Component,
   Directive,
   ElementRef,
+  HostBinding,
   Input,
   OnChanges,
+  OnInit,
+  Renderer,
   SimpleChange,
+  ViewEncapsulation,
 } from 'angular2/core';
 
+import {NgClass} from 'angular2/common';
+
 import {
   MdIconProvider,
 } from './icon-provider';
 
 @Component({
-  template: '<div class="md-icon-layout"></div>',
+  template: '<ng-content></ng-content>',
   selector: 'md-icon',
   styleUrls: ['./components/icon/icon.css'],
+  host: {
+    'role': 'img',
+    '[attr.aria-label]': 'ariaLabel()',
+  },
+  directives: [NgClass],
+  encapsulation: ViewEncapsulation.None,
 })
-export class MdIcon implements OnChanges {
-  @Input() svgSrc: string;
-  @Input() svgIcon: string;
+export class MdIcon implements OnChanges, OnInit {
+  @Input('md-svg-src') svgSrc: string;
+  @Input('md-svg-icon') svgIcon: string;
+  @Input('md-font-set') fontSet: string;
+  @Input('md-font-icon') fontIcon: string;
+  @Input() alt: string;
+  
+  @Input('aria-label') ariaLabelFromParent: string = '';
+  
+  private _previousFontSetClass: string;
+  private _previousFontIconClass: string;
     
-  constructor(private _element: ElementRef, private _mdIconProvider: MdIconProvider) {
+  constructor(
+      private _element: ElementRef,
+      private _renderer: Renderer,
+      private _mdIconProvider: MdIconProvider) {
   }
     
   ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
@@ -41,11 +64,74 @@ export class MdIcon implements OnChanges {
       this._mdIconProvider.loadIconFromUrl(this.svgSrc)
         .subscribe((svg: SVGElement) => this._setSvgElement(svg));    
     }
+    if (this._usingFontIcon()) {
+      this._updateFontIconClasses();
+    }
+  }
+  
+  ngOnInit() {
+    if (this._usingFontIcon()) {
+      this._updateFontIconClasses();
+    }
+  }
+  
+  ariaLabel() {
+    // If the parent provided an aria-label attribute value, use it as-is. Otherwise look for a
+    // reasonable value from the alt attribute, font icon name, SVG icon name, or (for ligatures)
+    // the text content of the directive.
+    const label =
+        this.ariaLabelFromParent ||
+        this.alt ||
+        this.fontIcon ||
+        this.svgIcon;
+    if (label) {
+      return label;
+    }
+    // The "content" of an SVG icon is not a useful label.
+    if (this._usingFontIcon()) {
+      const text = this._element.nativeElement.textContent;
+      if (text) {
+        return text;
+      }
+    }
+    // Warn here?
+    return null;
+  }
+
+  private _usingFontIcon(): boolean {
+    return !(this.svgIcon || this.svgSrc);
   }
   
   private _setSvgElement(svg: SVGElement) {
-    const layoutElement = this._element.nativeElement.querySelector('.md-icon-layout');
+    // Can we use Renderer here somehow?
+    const layoutElement = this._element.nativeElement;
     layoutElement.innerHTML = '';
     layoutElement.appendChild(svg);
   }
+
+  private _updateFontIconClasses() {
+    const elem = this._element.nativeElement;
+    const fontSetClass = this.fontSet ?
+        this._mdIconProvider.classNameForFontAlias(this.fontSet) :
+        this._mdIconProvider.getDefaultFontSetClass();
+    if (fontSetClass != this._previousFontSetClass) {
+      if (this._previousFontSetClass) {
+        this._renderer.setElementClass(elem, this._previousFontSetClass, false);
+      }
+      if (fontSetClass) {
+        this._renderer.setElementClass(elem, fontSetClass, true);
+      }
+      this._previousFontSetClass = fontSetClass;
+    }
+
+    if (this.fontIcon != this._previousFontIconClass) {
+      if (this._previousFontIconClass) {
+        this._renderer.setElementClass(elem, this._previousFontIconClass, false);
+      }
+      if (this.fontIcon) {
+        this._renderer.setElementClass(elem, this.fontIcon, true);
+      }
+      this._previousFontIconClass = this.fontIcon;
+    }
+  }
 }
diff --git a/src/demo-app/demo-app.scss b/src/demo-app/demo-app.scss
index f23099e1cde8..07d3aee6e908 100644
--- a/src/demo-app/demo-app.scss
+++ b/src/demo-app/demo-app.scss
@@ -10,6 +10,6 @@
   }
 }
 
-.demo-content {
-  padding: 15px;
+.md-icon-content {
+  opacity: 0.5;
 }
diff --git a/src/demo-app/assets/core-icon-set.svg b/src/demo-app/icon/assets/core-icon-set.svg
similarity index 100%
rename from src/demo-app/assets/core-icon-set.svg
rename to src/demo-app/icon/assets/core-icon-set.svg
diff --git a/src/demo-app/assets/search-icon.svg b/src/demo-app/icon/assets/search-icon.svg
similarity index 100%
rename from src/demo-app/assets/search-icon.svg
rename to src/demo-app/icon/assets/search-icon.svg
diff --git a/src/demo-app/assets/thumbup-icon.svg b/src/demo-app/icon/assets/thumbup-icon.svg
similarity index 100%
rename from src/demo-app/assets/thumbup-icon.svg
rename to src/demo-app/icon/assets/thumbup-icon.svg
diff --git a/src/demo-app/icon/icon-demo.html b/src/demo-app/icon/icon-demo.html
index c63295ab998c..414437d3b0cd 100644
--- a/src/demo-app/icon/icon-demo.html
+++ b/src/demo-app/icon/icon-demo.html
@@ -3,24 +3,26 @@
 </p>
 
 <p>
-  Built-in named icons:
-  <md-icon svgIcon="md-menu"></md-icon>
-  <md-icon svgIcon="md-close"></md-icon>
-  <md-icon svgIcon="md-calendar"></md-icon>
+  From URL:
+  <md-icon md-svg-src="/demo-app/icon/assets/search-icon.svg"></md-icon>
 </p>
 
 <p>
-  Icons from URLs:
-  <md-icon svgSrc="/demo-app/assets/search-icon.svg"></md-icon>
+  By name registered with MdIconProvider:
+  <md-icon md-svg-icon="thumb-up" class="green"></md-icon>
 </p>
 
 <p>
-  Configured named icons:
-  <md-icon svgIcon="thumb-up"></md-icon>
+  From icon set:
+  <md-icon md-svg-icon="core:alarm"></md-icon>
 </p>
 
 <p>
-  Icons from set:
-  <md-icon svgIcon="core:alarm"></md-icon>
-  <md-icon svgIcon="core:android"></md-icon>
-</p>
\ No newline at end of file
+  Ligature from Material Icons font:
+  <md-icon>home</md-icon>
+</p>
+
+<p>
+  Custom icon font and CSS:
+  <md-icon md-font-set="fontawesome" md-font-icon="fa-birthday-cake"></md-icon>
+</p>
diff --git a/src/demo-app/icon/icon-demo.scss b/src/demo-app/icon/icon-demo.scss
index c4727534fcc1..176309cf06e4 100644
--- a/src/demo-app/icon/icon-demo.scss
+++ b/src/demo-app/icon/icon-demo.scss
@@ -1,7 +1,7 @@
-md-icon:nth-child(1) {
+md-icon {
     color: purple;
 }
 
-md-icon:nth-child(2) {
+md-icon.green {
     color: green;
-}
\ No newline at end of file
+}
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
index 6f0d0edc5367..4f5dd7191c69 100644
--- a/src/demo-app/icon/icon-demo.ts
+++ b/src/demo-app/icon/icon-demo.ts
@@ -1,19 +1,22 @@
-import {Component} from 'angular2/core';
+import {Component, ViewEncapsulation} from 'angular2/core';
 import {MdIcon} from '../../components/icon/icon';
 import {MdIconProvider} from '../../components/icon/icon-provider';
 
 @Component({
-    selector: 'button-demo',
+    selector: 'icon-demo',
     templateUrl: 'demo-app/icon/icon-demo.html',
     styleUrls: ['demo-app/icon/icon-demo.css'],
     directives: [MdIcon],
     viewProviders: [MdIconProvider],
+    encapsulation: ViewEncapsulation.None,
 })
 export class IconDemo {
-  showAndroid = false;
+  showAndroid = true;
 
   constructor(mdIconProvider: MdIconProvider) {
-      mdIconProvider.icon('thumb-up', '/demo-app/assets/thumbup-icon.svg');
-      mdIconProvider.iconSet('core', '/demo-app/assets/core-icon-set.svg');
+      mdIconProvider
+          .registerIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
+          .registerIconSet('core', '/demo-app/icon/assets/core-icon-set.svg')
+          .registerFontSet('fontawesome', 'fa');
   }
 }
diff --git a/src/index.html b/src/index.html
index 902fb79d8eb2..02a711cc2f40 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,6 +10,10 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
         rel="stylesheet">
+
+  <!-- FontAwesome for md-icon demo. -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+
 </head>
 <body>
   <demo-app>Loading...</demo-app>
diff --git a/src/main.ts b/src/main.ts
index efee256265a6..fa39fff9cfd0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,10 +3,12 @@ import {DemoApp} from './demo-app/demo-app';
 import {HTTP_PROVIDERS} from 'angular2/http';
 import {ROUTER_PROVIDERS} from 'angular2/router';
 import {MdIconProvider} from './components/icon/icon-provider';
+import {Renderer} from 'angular2/core';
 import 'rxjs/Rx';
 
 bootstrap(DemoApp, [
   ROUTER_PROVIDERS,
   HTTP_PROVIDERS,
   MdIconProvider,
+  Renderer,
 ]);

From e42358242aaee27fb4280166711333cb0f70b136 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Mon, 28 Mar 2016 23:46:16 -0400
Subject: [PATCH 08/37] Rename directive bindings.

---
 src/components/icon/icon.ts      | 8 ++++----
 src/demo-app/icon/icon-demo.html | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index ad730fd22c74..bd4cedc7f460 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -29,10 +29,10 @@ import {
   encapsulation: ViewEncapsulation.None,
 })
 export class MdIcon implements OnChanges, OnInit {
-  @Input('md-svg-src') svgSrc: string;
-  @Input('md-svg-icon') svgIcon: string;
-  @Input('md-font-set') fontSet: string;
-  @Input('md-font-icon') fontIcon: string;
+  @Input() svgSrc: string;
+  @Input() svgIcon: string;
+  @Input() fontSet: string;
+  @Input() fontIcon: string;
   @Input() alt: string;
   
   @Input('aria-label') ariaLabelFromParent: string = '';
diff --git a/src/demo-app/icon/icon-demo.html b/src/demo-app/icon/icon-demo.html
index 414437d3b0cd..b3daf73d3471 100644
--- a/src/demo-app/icon/icon-demo.html
+++ b/src/demo-app/icon/icon-demo.html
@@ -4,17 +4,17 @@
 
 <p>
   From URL:
-  <md-icon md-svg-src="/demo-app/icon/assets/search-icon.svg"></md-icon>
+  <md-icon svgSrc="/demo-app/icon/assets/search-icon.svg"></md-icon>
 </p>
 
 <p>
   By name registered with MdIconProvider:
-  <md-icon md-svg-icon="thumb-up" class="green"></md-icon>
+  <md-icon svgIcon="thumb-up" class="green"></md-icon>
 </p>
 
 <p>
   From icon set:
-  <md-icon md-svg-icon="core:alarm"></md-icon>
+  <md-icon svgIcon="core:alarm"></md-icon>
 </p>
 
 <p>
@@ -24,5 +24,5 @@
 
 <p>
   Custom icon font and CSS:
-  <md-icon md-font-set="fontawesome" md-font-icon="fa-birthday-cake"></md-icon>
+  <md-icon fontSet="fontawesome" fontIcon="fa-birthday-cake"></md-icon>
 </p>

From 22a92e1056cc0d1c9045051f81d3880feaa01f8a Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Sun, 3 Apr 2016 02:18:36 -0400
Subject: [PATCH 09/37] test

---
 src/components/icon/icon.spec.ts | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/components/icon/icon.spec.ts

diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
new file mode 100644
index 000000000000..e3e860c9c79f
--- /dev/null
+++ b/src/components/icon/icon.spec.ts
@@ -0,0 +1,25 @@
+import {
+  inject,
+  TestComponentBuilder
+} from 'angular2/testing';
+import {
+  it,
+  describe,
+  expect,
+  beforeEach,
+} from '../../core/facade/testing';
+import {Component} from 'angular2/core';
+import {By} from 'angular2/platform/browser';
+
+import {MdIcon} from './icon';
+import {MdIconProvider} from './icon-provider';
+
+export function main() {
+  describe('MdIcon', () => {
+    let builder: TestComponentBuilder;
+
+    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+      builder = tcb;
+    }));
+  });
+}
\ No newline at end of file

From 0e6f396efa7a8bbbc387054c0d73ea85718c2735 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Mon, 4 Apr 2016 01:22:57 -0400
Subject: [PATCH 10/37] Injecting test HTTP classes.

---
 src/components/icon/icon-provider.ts |  5 ++-
 src/components/icon/icon.spec.ts     | 53 +++++++++++++++++++++++++---
 src/core/facade/testing.ts           |  1 +
 test/karma.config.ts                 |  2 ++
 4 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/src/components/icon/icon-provider.ts b/src/components/icon/icon-provider.ts
index c7ea487bda21..d63d3930e2cc 100644
--- a/src/components/icon/icon-provider.ts
+++ b/src/components/icon/icon-provider.ts
@@ -28,7 +28,7 @@ export class MdIconProvider {
   private _defaultViewBoxSize = 24;
   private _defaultFontSetClass = 'material-icons';
   
-  constructor(private _http: Http, private _renderer: Renderer) {
+  constructor(private _http: Http) {
   }
   
   public registerIcon(name: string, url: string, viewBoxSize:number=0): MdIconProvider {
@@ -127,6 +127,8 @@ export class MdIconProvider {
       return this._inProgressUrlFetches.get(url);
     }
     console.log("*** Sending request");
+    throw Error('oops');
+    /*
     const req = this._http.get(url)
         .do((response) => {
           console.log('*** Removing request: ' + url);
@@ -135,6 +137,7 @@ export class MdIconProvider {
         .map((response) => response.text());
     this._inProgressUrlFetches.set(url, req);
     return req;
+    */
   }
   
   private _loadIconFromConfig(config: IconConfig): Observable<SVGElement> {
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index e3e860c9c79f..61871718f552 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -1,25 +1,70 @@
 import {
   inject,
-  TestComponentBuilder
+  TestComponentBuilder,
 } from 'angular2/testing';
+import {
+  HTTP_PROVIDERS,
+  BaseRequestOptions,
+  Response,
+  ResponseOptions,
+  Http,
+  XHRBackend} from 'angular2/http';
+import {
+  MockBackend,
+  MockConnection} from 'angular2/http/testing';
 import {
   it,
   describe,
+  ddescribe,
   expect,
   beforeEach,
+  beforeEachProviders,
 } from '../../core/facade/testing';
-import {Component} from 'angular2/core';
+import {
+  provide,
+  Component} from 'angular2/core';
 import {By} from 'angular2/platform/browser';
+import {
+  TEST_BROWSER_PLATFORM_PROVIDERS,
+  TEST_BROWSER_APPLICATION_PROVIDERS
+} from 'angular2/platform/testing/browser';
 
 import {MdIcon} from './icon';
 import {MdIconProvider} from './icon-provider';
 
 export function main() {
-  describe('MdIcon', () => {
+  ddescribe('MdIcon', () => {
+  
+    beforeEachProviders(() => [
+      MdIconProvider,
+      HTTP_PROVIDERS,
+      MockBackend,
+      provide(XHRBackend, {useExisting: MockBackend}),
+    ]);
+  
     let builder: TestComponentBuilder;
 
     beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
       builder = tcb;
     }));
+
+    it('should add material-icons class by default', (done: () => void) => {
+      console.log('in test?');
+      return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
+        const testComponent = fixture.debugElement.componentInstance;
+        const nativeElement = fixture.debugElement.nativeElement;
+        done();
+      });
+    });
   });
-}
\ No newline at end of file
+}
+
+/** Test component that contains an MdIcon. */
+@Component({
+  selector: 'test-app',
+  template: `<md-icon>{{iconName}}</md-icon>`,
+  directives: [MdIcon],
+})
+class MdIconLigatureTestApp {
+  iconName = 'home';
+}
diff --git a/src/core/facade/testing.ts b/src/core/facade/testing.ts
index 7c7d80b63a05..e5b7370796f1 100644
--- a/src/core/facade/testing.ts
+++ b/src/core/facade/testing.ts
@@ -5,4 +5,5 @@ export {
   ddescribe,
   expect,
   beforeEach,
+  beforeEachProviders,
 } from 'angular2/testing';
diff --git a/test/karma.config.ts b/test/karma.config.ts
index a89437b2dd8d..f57b5b9b3505 100644
--- a/test/karma.config.ts
+++ b/test/karma.config.ts
@@ -31,6 +31,8 @@ export function config(config) {
       'node_modules/reflect-metadata/Reflect.js',
       {pattern: 'node_modules/angular2/bundles/angular2.dev.js', included: true, watched: true},
       {pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true},
+      {pattern: 'node_modules/angular2/bundles/http.dev.js', included: true, watched: true},
+      //{pattern: 'node_modules/angular2/http/testing.js', included: true, watched: true},
 
       {pattern: 'test/karma-test-shim.js', included: true, watched: true},
 

From 014be776408afd6958d54d6ab55287b87a00f86e Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Mon, 4 Apr 2016 02:48:47 -0400
Subject: [PATCH 11/37] start of tests

---
 src/components/icon/icon-provider.ts |  3 --
 src/components/icon/icon.spec.ts     | 45 +++++++++++++++++++++++-----
 src/components/icon/icon.ts          | 27 +++++++++++++++--
 src/core/facade/testing.ts           |  1 +
 4 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/src/components/icon/icon-provider.ts b/src/components/icon/icon-provider.ts
index d63d3930e2cc..1af21885f9e8 100644
--- a/src/components/icon/icon-provider.ts
+++ b/src/components/icon/icon-provider.ts
@@ -127,8 +127,6 @@ export class MdIconProvider {
       return this._inProgressUrlFetches.get(url);
     }
     console.log("*** Sending request");
-    throw Error('oops');
-    /*
     const req = this._http.get(url)
         .do((response) => {
           console.log('*** Removing request: ' + url);
@@ -137,7 +135,6 @@ export class MdIconProvider {
         .map((response) => response.text());
     this._inProgressUrlFetches.set(url, req);
     return req;
-    */
   }
   
   private _loadIconFromConfig(config: IconConfig): Observable<SVGElement> {
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 61871718f552..65436cead696 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -19,6 +19,7 @@ import {
   expect,
   beforeEach,
   beforeEachProviders,
+  xit,
 } from '../../core/facade/testing';
 import {
   provide,
@@ -32,6 +33,8 @@ import {
 import {MdIcon} from './icon';
 import {MdIconProvider} from './icon-provider';
 
+const sortedClassNames = (elem: Element) => elem.className.split(' ').sort();
+
 export function main() {
   ddescribe('MdIcon', () => {
   
@@ -48,12 +51,39 @@ export function main() {
       builder = tcb;
     }));
 
-    it('should add material-icons class by default', (done: () => void) => {
-      console.log('in test?');
-      return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
-        const testComponent = fixture.debugElement.componentInstance;
-        const nativeElement = fixture.debugElement.nativeElement;
-        done();
+    describe('Ligature icons', () => {
+      it('should add material-icons class by default', (done: () => void) => {
+        return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          fixture.detectChanges();
+          expect(sortedClassNames(mdIconElement)).toEqual(['material-icons']);
+          done();
+        });
+      });
+
+      // This test is disabled because the DOM in the test environment can't read
+      // the text content of the md-icon element.
+      xit('should set aria label from text content if not specified', (done: () => void) => {
+        return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          fixture.detectChanges();
+          expect(mdIconElement.getAttribute('aria-label')).toBe('home');
+          done();
+        });
+      });
+
+      // And getAttribute doesn't see values set by Renderer.setElementAttribute?
+      xit('should use provided aria label', (done: () => void) => {
+        return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          testComponent.ariaLabel = 'house';
+          fixture.detectChanges();
+          expect(mdIconElement.getAttribute('aria-label')).toBe('house');
+          done();
+        });
       });
     });
   });
@@ -62,9 +92,10 @@ export function main() {
 /** Test component that contains an MdIcon. */
 @Component({
   selector: 'test-app',
-  template: `<md-icon>{{iconName}}</md-icon>`,
+  template: `<md-icon foo="bar" aria-label="{{ariaLabel}}">{{iconName}}</md-icon>`,
   directives: [MdIcon],
 })
 class MdIconLigatureTestApp {
+  ariaLabel: string = null;
   iconName = 'home';
 }
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index bd4cedc7f460..c77812835e6a 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -1,4 +1,5 @@
 import {
+  ChangeDetectorRef,
   Component,
   Directive,
   ElementRef,
@@ -23,7 +24,6 @@ import {
   styleUrls: ['./components/icon/icon.css'],
   host: {
     'role': 'img',
-    '[attr.aria-label]': 'ariaLabel()',
   },
   directives: [NgClass],
   encapsulation: ViewEncapsulation.None,
@@ -43,6 +43,7 @@ export class MdIcon implements OnChanges, OnInit {
   constructor(
       private _element: ElementRef,
       private _renderer: Renderer,
+      private _changeDetectorRef: ChangeDetectorRef,
       private _mdIconProvider: MdIconProvider) {
   }
     
@@ -67,15 +68,34 @@ export class MdIcon implements OnChanges, OnInit {
     if (this._usingFontIcon()) {
       this._updateFontIconClasses();
     }
+    
+    this._updateAriaLabel();
   }
   
   ngOnInit() {
+    // Update font classes and aria attribute here because ngOnChanges won't be called
+    // if none of the inputs are present. That can happen for a ligature icon like
+    // <md-icon>home</md-icon>, in which case we need to set the default icon font and
+    // get the aria label from the text content.
     if (this._usingFontIcon()) {
       this._updateFontIconClasses();
     }
+    this._updateAriaLabel();
+  }
+
+  private _updateAriaLabel() {
+    console.log('aria from parent: ' + this.ariaLabelFromParent);
+    if (!this.ariaLabelFromParent) {
+      const ariaLabel = this._getAriaLabel();
+      console.log('Got aria label: ' + ariaLabel);
+      if (ariaLabel) {
+        this._renderer.setElementAttribute(this._element.nativeElement, 'aria-label', ariaLabel);
+        this._changeDetectorRef.detectChanges();
+      }
+    }
   }
   
-  ariaLabel() {
+  private _getAriaLabel() {
     // If the parent provided an aria-label attribute value, use it as-is. Otherwise look for a
     // reasonable value from the alt attribute, font icon name, SVG icon name, or (for ligatures)
     // the text content of the directive.
@@ -110,6 +130,9 @@ export class MdIcon implements OnChanges, OnInit {
   }
 
   private _updateFontIconClasses() {
+    if (!this._usingFontIcon()) {
+      return;
+    }
     const elem = this._element.nativeElement;
     const fontSetClass = this.fontSet ?
         this._mdIconProvider.classNameForFontAlias(this.fontSet) :
diff --git a/src/core/facade/testing.ts b/src/core/facade/testing.ts
index e5b7370796f1..77fff8359783 100644
--- a/src/core/facade/testing.ts
+++ b/src/core/facade/testing.ts
@@ -1,6 +1,7 @@
 export {
   it,
   iit,
+  xit,
   describe,
   ddescribe,
   expect,

From ea3beea9783755c2b2e062c094965af12f139b1b Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Tue, 5 Apr 2016 00:56:55 -0400
Subject: [PATCH 12/37] HTTP tests.

---
 package.json                     |   2 +-
 src/components/icon/icon.spec.ts | 169 ++++++++++++++++++++++++++++++-
 2 files changed, 167 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index ae1566bcd647..d0a47c3ba4de 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "add-stream": "^1.0.0",
-    "angular-cli": "^0.0.28",
+    "angular-cli": "^0.0.29",
     "angular-cli-github-pages": "^0.2.0",
     "broccoli-autoprefixer": "^4.1.0",
     "broccoli-caching-writer": "^2.2.1",
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 65436cead696..9ecb672dd741 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -2,6 +2,7 @@ import {
   inject,
   TestComponentBuilder,
 } from 'angular2/testing';
+
 import {
   HTTP_PROVIDERS,
   BaseRequestOptions,
@@ -36,7 +37,7 @@ import {MdIconProvider} from './icon-provider';
 const sortedClassNames = (elem: Element) => elem.className.split(' ').sort();
 
 export function main() {
-  ddescribe('MdIcon', () => {
+  describe('MdIcon', () => {
   
     beforeEachProviders(() => [
       MdIconProvider,
@@ -46,9 +47,41 @@ export function main() {
     ]);
   
     let builder: TestComponentBuilder;
+    let mdIconProvider: MdIconProvider;
 
-    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+    beforeEach(
+        inject([TestComponentBuilder, MdIconProvider, MockBackend],
+        (tcb: TestComponentBuilder, mip: MdIconProvider, mockBackend: MockBackend) => {
       builder = tcb;
+      mdIconProvider = mip;
+      // Set fake responses for various SVG URLs.
+      mockBackend.connections.subscribe((connection: any) => {
+        switch (connection.request.url) {
+          case 'cat.svg':
+            connection.mockRespond(new Response(new ResponseOptions({
+              status: 200,
+              body: '<svg><path d="meow"></path></svg>',
+            })));
+            break;
+          case 'dog.svg':
+            connection.mockRespond(new Response(new ResponseOptions({
+              status: 200,
+              body: '<svg><path d="woof"></path></svg>',
+            })));
+            break;
+          case 'farm-set.svg':
+            connection.mockRespond(new Response(new ResponseOptions({
+              status: 200,
+              body: `
+                <svg>
+                  <g id="pig"><path d="oink"></path></g>
+                  <g id="cow"><path d="moo"></path></g>
+                </svg>
+              `,
+            })));
+            break;
+        }
+      });
     }));
 
     describe('Ligature icons', () => {
@@ -56,6 +89,7 @@ export function main() {
         return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          testComponent.iconName = 'home';
           fixture.detectChanges();
           expect(sortedClassNames(mdIconElement)).toEqual(['material-icons']);
           done();
@@ -68,6 +102,7 @@ export function main() {
         return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          testComponent.iconName = 'home';
           fixture.detectChanges();
           expect(mdIconElement.getAttribute('aria-label')).toBe('home');
           done();
@@ -79,6 +114,7 @@ export function main() {
         return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          testComponent.iconName = 'home';
           testComponent.ariaLabel = 'house';
           fixture.detectChanges();
           expect(mdIconElement.getAttribute('aria-label')).toBe('house');
@@ -86,6 +122,113 @@ export function main() {
         });
       });
     });
+
+    describe('Icons from URLs', () => {
+      it('should fetch SVG icon from URL and inline the content', (done: () => void) => {
+        return builder.createAsync(MdIconFromSvgUrlTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          testComponent.iconUrl = 'cat.svg';
+          fixture.detectChanges();
+
+          // An <svg> element should have been added as a child of <md-icon>.
+          expect(mdIconElement.children.length).toBe(1);
+          let svgElement = mdIconElement.children[0];
+          expect(svgElement.tagName.toLowerCase()).toBe('svg');
+          // Default attributes should be set.
+          expect(svgElement.getAttribute('height')).toBe('100%');
+          expect(svgElement.getAttribute('height')).toBe('100%');
+          expect(svgElement.getAttribute('viewBox')).toBe('0 0 24 24');
+          // Make sure SVG content is taken from response.
+          expect(svgElement.children.length).toBe(1);
+          let pathElement = svgElement.children[0];
+          expect(pathElement.tagName.toLowerCase()).toBe('path');
+          expect(pathElement.getAttribute('d')).toBe('meow');
+
+          // Change the icon, and the SVG element should be replaced.
+          testComponent.iconUrl = 'dog.svg';
+          fixture.detectChanges();
+          expect(mdIconElement.children.length).toBe(1);
+          svgElement = mdIconElement.children[0];
+          expect(svgElement.tagName.toLowerCase()).toBe('svg');
+          expect(svgElement.children.length).toBe(1);
+          pathElement = svgElement.children[0];
+          expect(pathElement.tagName.toLowerCase()).toBe('path');
+          expect(pathElement.getAttribute('d')).toBe('woof');
+
+          done();
+        });
+      });
+
+      it('should register icon URLs by name', (done: () => void) => {
+        mdIconProvider.registerIcon('fluffy', 'cat.svg');
+        mdIconProvider.registerIcon('fido', 'dog.svg');
+        return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          testComponent.iconName= 'fido';
+          fixture.detectChanges();
+          expect(mdIconElement.children.length).toBe(1);
+          let svgElement = mdIconElement.children[0];
+          expect(svgElement.tagName.toLowerCase()).toBe('svg');
+          expect(svgElement.children.length).toBe(1);
+          let pathElement = svgElement.children[0];
+          expect(pathElement.tagName.toLowerCase()).toBe('path');
+          expect(pathElement.getAttribute('d')).toBe('woof');
+
+          // Change the icon, and the SVG element should be replaced.
+          testComponent.iconName = 'fluffy';
+          fixture.detectChanges();
+          expect(mdIconElement.children.length).toBe(1);
+          svgElement = mdIconElement.children[0];
+          expect(svgElement.tagName.toLowerCase()).toBe('svg');
+          expect(svgElement.children.length).toBe(1);
+          pathElement = svgElement.children[0];
+          expect(pathElement.tagName.toLowerCase()).toBe('path');
+          expect(pathElement.getAttribute('d')).toBe('meow');
+
+          done();
+        });
+      });
+
+      it('should extract icon from SVG icon set', (done: () => void) => {
+        mdIconProvider.registerIconSet('farm', 'farm-set.svg');
+        return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          testComponent.iconName = 'farm:pig';
+          fixture.detectChanges();
+          expect(mdIconElement.children.length).toBe(1);
+          let svgElement = mdIconElement.children[0];
+          expect(svgElement.tagName.toLowerCase()).toBe('svg');
+          expect(svgElement.children.length).toBe(1);
+          let svgChild = svgElement.children[0];
+          // The first <svg> child should be the <g id="pig"> element.
+          expect(svgChild.tagName.toLowerCase()).toBe('g');
+          expect(svgChild.getAttribute('id')).toBe('pig');
+          expect(svgChild.children.length).toBe(1);
+          let pathElement = svgChild.children[0];
+          expect(pathElement.tagName.toLowerCase()).toBe('path');
+          expect(pathElement.getAttribute('d')).toBe('oink');
+
+          // Change the icon, and the SVG element should be replaced.
+          testComponent.iconName = 'farm:cow';
+          fixture.detectChanges();
+          expect(mdIconElement.children.length).toBe(1);
+          svgElement = mdIconElement.children[0];
+          svgChild = svgElement.children[0];
+          // The first <svg> child should be the <g id="pig"> element.
+          expect(svgChild.tagName.toLowerCase()).toBe('g');
+          expect(svgChild.getAttribute('id')).toBe('cow');
+          expect(svgChild.children.length).toBe(1);
+          pathElement = svgChild.children[0];
+          expect(pathElement.tagName.toLowerCase()).toBe('path');
+          expect(pathElement.getAttribute('d')).toBe('moo');
+
+          done();
+        });
+      });
+    });
   });
 }
 
@@ -97,5 +240,25 @@ export function main() {
 })
 class MdIconLigatureTestApp {
   ariaLabel: string = null;
-  iconName = 'home';
+  iconName = '';
+}
+
+@Component({
+  selector: 'test-app',
+  template: `<md-icon svgSrc="{{iconUrl}}" aria-label="{{ariaLabel}}"></md-icon>`,
+  directives: [MdIcon],
+})
+class MdIconFromSvgUrlTestApp {
+  ariaLabel: string = null;
+  iconUrl = '';
+}
+
+@Component({
+  selector: 'test-app',
+  template: `<md-icon svgIcon="{{iconName}}" aria-label="{{ariaLabel}}"></md-icon>`,
+  directives: [MdIcon],
+})
+class MdIconFromSvgNameTestApp {
+  ariaLabel: string = null;
+  iconName = '';
 }

From 72d167f7108472e2fd69de6d8c594b7a09e8d004 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Thu, 7 Apr 2016 01:46:05 -0400
Subject: [PATCH 13/37] Improved change detection and added more tests.

---
 src/components/icon/icon.spec.ts | 75 ++++++++++++++++++++++++++++----
 src/components/icon/icon.ts      | 59 ++++++++++++++++---------
 2 files changed, 104 insertions(+), 30 deletions(-)

diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 9ecb672dd741..d1c84f37d2cb 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -14,7 +14,7 @@ import {
   MockBackend,
   MockConnection} from 'angular2/http/testing';
 import {
-  it,
+  it, iit,
   describe,
   ddescribe,
   expect,
@@ -96,22 +96,24 @@ export function main() {
         });
       });
 
-      // This test is disabled because the DOM in the test environment can't read
-      // the text content of the md-icon element.
-      xit('should set aria label from text content if not specified', (done: () => void) => {
+      it('should set aria label from text content if not specified', (done: () => void) => {
         return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           testComponent.iconName = 'home';
           fixture.detectChanges();
           expect(mdIconElement.getAttribute('aria-label')).toBe('home');
+
+          testComponent.iconName = 'hand';
+          fixture.detectChanges();
+          expect(mdIconElement.getAttribute('aria-label')).toBe('hand');
+
           done();
         });
       });
 
-      // And getAttribute doesn't see values set by Renderer.setElementAttribute?
-      xit('should use provided aria label', (done: () => void) => {
-        return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
+      it('should use provided aria label', (done: () => void) => {
+        return builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           testComponent.iconName = 'home';
@@ -175,6 +177,9 @@ export function main() {
           let pathElement = svgElement.children[0];
           expect(pathElement.tagName.toLowerCase()).toBe('path');
           expect(pathElement.getAttribute('d')).toBe('woof');
+          // The aria label should be taken from the icon name.
+          expect(mdIconElement.getAttribute('aria-label')).toBe('fido');
+
 
           // Change the icon, and the SVG element should be replaced.
           testComponent.iconName = 'fluffy';
@@ -186,6 +191,7 @@ export function main() {
           pathElement = svgElement.children[0];
           expect(pathElement.tagName.toLowerCase()).toBe('path');
           expect(pathElement.getAttribute('d')).toBe('meow');
+          expect(mdIconElement.getAttribute('aria-label')).toBe('fluffy');
 
           done();
         });
@@ -210,6 +216,8 @@ export function main() {
           let pathElement = svgChild.children[0];
           expect(pathElement.tagName.toLowerCase()).toBe('path');
           expect(pathElement.getAttribute('d')).toBe('oink');
+          // The aria label should be taken from the icon name (without the icon set portion).
+          expect(mdIconElement.getAttribute('aria-label')).toBe('pig');
 
           // Change the icon, and the SVG element should be replaced.
           testComponent.iconName = 'farm:cow';
@@ -224,18 +232,43 @@ export function main() {
           pathElement = svgChild.children[0];
           expect(pathElement.tagName.toLowerCase()).toBe('path');
           expect(pathElement.getAttribute('d')).toBe('moo');
+          expect(mdIconElement.getAttribute('aria-label')).toBe('cow');
 
           done();
         });
       });
     });
+    
+    describe('custom fonts', () => {
+      it('should apply CSS classes for custom font and icon', (done: () => void) => {
+        mdIconProvider.registerFontSet('f1', 'font1');
+        mdIconProvider.registerFontSet('f2');
+        return builder.createAsync(MdIconCustomFontCssTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          testComponent.fontSet = 'f1';
+          testComponent.fontIcon = 'house';
+          fixture.detectChanges();
+          expect(sortedClassNames(mdIconElement)).toEqual(['font1', 'house']);
+          expect(mdIconElement.getAttribute('aria-label')).toBe('house');
+          
+          testComponent.fontSet = 'f2';
+          testComponent.fontIcon = 'igloo';
+          fixture.detectChanges();
+          expect(sortedClassNames(mdIconElement)).toEqual(['f2', 'igloo']);
+          expect(mdIconElement.getAttribute('aria-label')).toBe('igloo');
+          
+          done();
+        });
+      });
+    });
   });
 }
 
-/** Test component that contains an MdIcon. */
+/** Test components that contain an MdIcon. */
 @Component({
   selector: 'test-app',
-  template: `<md-icon foo="bar" aria-label="{{ariaLabel}}">{{iconName}}</md-icon>`,
+  template: `<md-icon>{{iconName}}</md-icon>`,
   directives: [MdIcon],
 })
 class MdIconLigatureTestApp {
@@ -243,6 +276,30 @@ class MdIconLigatureTestApp {
   iconName = '';
 }
 
+@Component({
+  selector: 'test-app',
+  template: `<md-icon aria-label="{{ariaLabel}}">{{iconName}}</md-icon>`,
+  directives: [MdIcon],
+})
+class MdIconLigatureWithAriaBindingTestApp {
+  ariaLabel: string = null;
+  iconName = '';
+}
+
+@Component({
+  selector: 'test-app',
+  template: `
+      <md-icon fontSet="{{fontSet}}" fontIcon="{{fontIcon}}" aria-label="{{ariaLabel}}"></md-icon>
+  `,
+  directives: [MdIcon],
+})
+class MdIconCustomFontCssTestApp {
+  ariaLabel: string = null;
+  fontSet = '';
+  fontIcon = '';
+}
+
+
 @Component({
   selector: 'test-app',
   template: `<md-icon svgSrc="{{iconUrl}}" aria-label="{{ariaLabel}}"></md-icon>`,
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index c77812835e6a..7ffb1bcbbca8 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -1,4 +1,5 @@
 import {
+  AfterContentChecked,
   ChangeDetectorRef,
   Component,
   Directive,
@@ -28,7 +29,7 @@ import {
   directives: [NgClass],
   encapsulation: ViewEncapsulation.None,
 })
-export class MdIcon implements OnChanges, OnInit {
+export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
   @Input() svgSrc: string;
   @Input() svgIcon: string;
   @Input() fontSet: string;
@@ -46,19 +47,37 @@ export class MdIcon implements OnChanges, OnInit {
       private _changeDetectorRef: ChangeDetectorRef,
       private _mdIconProvider: MdIconProvider) {
   }
-    
+
+  /**
+   * Splits an svgIcon binding value into its icon set and icon name components.
+   * Returns a 2-element array of [(icon set), (icon name)].
+   * The separator for the two fields is ':'. If there is no separator, an empty
+   * string is returned for the icon set and the entire value is returned for
+   * the icon name. If the argument is falsy, returns an array of two empty strings.
+   * Examples:
+   *   'social:cake' -> ['social', 'cake']
+   *   'penguin' -> ['', 'penguin']
+   *   null -> ['', '']
+   */
+  private _splitIconName(iconName: string): [string, string] {
+    if (!iconName) {
+      return ['', ''];
+    }
+    const sepIndex = this.svgIcon.indexOf(':');
+    if (sepIndex == -1) {
+      return ['', iconName];
+    }
+    return [iconName.substring(0, sepIndex), iconName.substring(sepIndex + 1)];
+  }
+
   ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
     if (this.svgIcon) {
-      const sepIndex = this.svgIcon.indexOf(':');
-      if (sepIndex == -1) {
-        // Icon not in set.
-        this._mdIconProvider.loadIconByName(this.svgIcon)
+      const [iconSet, iconName] = this._splitIconName(this.svgIcon);
+      if (iconSet) {
+        this._mdIconProvider.loadIconFromSetByName(iconSet, iconName)
             .subscribe((svg: SVGElement) => this._setSvgElement(svg));
       } else {
-        // Set name is before separator.
-        const setName = this.svgIcon.substring(0, sepIndex);
-        const iconName = this.svgIcon.substring(sepIndex + 1);
-        this._mdIconProvider.loadIconFromSetByName(setName, iconName)
+        this._mdIconProvider.loadIconByName(this.svgIcon)
             .subscribe((svg: SVGElement) => this._setSvgElement(svg));
       }
     } else if (this.svgSrc) {
@@ -68,31 +87,29 @@ export class MdIcon implements OnChanges, OnInit {
     if (this._usingFontIcon()) {
       this._updateFontIconClasses();
     }
-    
     this._updateAriaLabel();
   }
-  
+
   ngOnInit() {
-    // Update font classes and aria attribute here because ngOnChanges won't be called
-    // if none of the inputs are present. That can happen for a ligature icon like
-    // <md-icon>home</md-icon>, in which case we need to set the default icon font and
-    // get the aria label from the text content.
+    // Update font classes because ngOnChanges won't be called if none of the inputs are present,
+    // e.g. <md-icon>arrow</md-icon>. In this case we need to add a CSS class for the default font.
     if (this._usingFontIcon()) {
       this._updateFontIconClasses();
     }
+  }
+
+  ngAfterContentChecked() {
+    // Update aria label here because it may depend on the projected text content.
+    // (e.g. <md-icon>home</md-icon> should use 'home').
     this._updateAriaLabel();
   }
 
   private _updateAriaLabel() {
-    console.log('aria from parent: ' + this.ariaLabelFromParent);
-    if (!this.ariaLabelFromParent) {
       const ariaLabel = this._getAriaLabel();
-      console.log('Got aria label: ' + ariaLabel);
       if (ariaLabel) {
         this._renderer.setElementAttribute(this._element.nativeElement, 'aria-label', ariaLabel);
         this._changeDetectorRef.detectChanges();
       }
-    }
   }
   
   private _getAriaLabel() {
@@ -103,7 +120,7 @@ export class MdIcon implements OnChanges, OnInit {
         this.ariaLabelFromParent ||
         this.alt ||
         this.fontIcon ||
-        this.svgIcon;
+        this._splitIconName(this.svgIcon)[1];
     if (label) {
       return label;
     }

From 53aeed227b752a5e96a8c0fac57d50f7e9977a8c Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Fri, 8 Apr 2016 03:32:26 -0400
Subject: [PATCH 14/37] Icon namespaces, addIcon and addIconSet are now
 additive.

---
 src/components/icon/icon-provider.ts | 202 ++++++++++++++++++++-------
 src/components/icon/icon.spec.ts     |   7 +-
 src/components/icon/icon.ts          |  16 +--
 src/demo-app/icon/icon-demo.ts       |   4 +-
 4 files changed, 169 insertions(+), 60 deletions(-)

diff --git a/src/components/icon/icon-provider.ts b/src/components/icon/icon-provider.ts
index 1af21885f9e8..4cedf77b6301 100644
--- a/src/components/icon/icon-provider.ts
+++ b/src/components/icon/icon-provider.ts
@@ -1,24 +1,30 @@
 import {Injectable, Renderer} from 'angular2/core';
 import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
-import {Observable} from 'rxjs/Rx';
+import {AsyncSubject, Observer, Observable} from 'rxjs/Rx';
 
 /**
-  *  Configuration for a named icon, used when initially loading it.
+  *  Configuration for an icon, possibly including the cached SVG element.
   */
 class IconConfig {
+  svgElement: SVGElement = null;
   constructor(public url: string, public viewBoxSize: number) {
   }
 }
 
 @Injectable()
 export class MdIconProvider {
-  private _iconConfigsByName = new Map<string, IconConfig>();
-  private _cachedIconsByName = new Map<string, SVGElement>();
+  // Cache all the things.
 
-  private _iconSetConfigsByName = new Map<string, IconConfig>();
-  private _cachedIconSets = new Map<string, SVGElement>();
-  // Keys here are "[setName]:[iconName]"
-  private _cachedIconsBySetAndName = new Map<string, SVGElement>();
+  // IconConfig objects and cached SVG elements for individual icons.
+  // First level of cache is icon set (which is the empty string for the default set).
+  // Second level is the icon name within the set.
+  private _iconConfigs = new Map<string, Map<string, IconConfig>>();
+
+  // IconConfig objects and cached SVG elements for icon sets.
+  // These are stored only by set name, but multiple URLs can be registered under the same name.
+  private _iconSetConfigs = new Map<string, [IconConfig]>();
+
+  // Cache for icons loaded by direct URLs.
   private _cachedIconsByUrl = new Map<string, SVGElement>();
 
   private _fontClassNamesByAlias = new Map<string, string>();
@@ -31,14 +37,30 @@ export class MdIconProvider {
   constructor(private _http: Http) {
   }
   
-  public registerIcon(name: string, url: string, viewBoxSize:number=0): MdIconProvider {
-    this._iconConfigsByName.set(name, new IconConfig(url, viewBoxSize || this._defaultViewBoxSize));
+  public addIcon(iconName: string, url: string, viewBoxSize:number=0): MdIconProvider {
+    return this.addIconInSet('', iconName, url, viewBoxSize);
+  }
+  
+  public addIconInSet(
+      setName: string, iconName: string, url: string, viewBoxSize:number=0): MdIconProvider {
+    let iconSetMap = this._iconConfigs.get(setName);
+    if (!iconSetMap) {
+      iconSetMap = new Map<string, IconConfig>();
+      this._iconConfigs.set(setName, iconSetMap);
+    }
+    iconSetMap.set(iconName, new IconConfig(url, viewBoxSize || this._defaultViewBoxSize));
     return this;
   }
   
-  public registerIconSet(name: string, url: string, viewBoxSize=0): MdIconProvider {
-    this._iconSetConfigsByName.set(
-        name, new IconConfig(url, viewBoxSize || this._defaultViewBoxSize));
+  public addIconSet(setName: string, url: string, viewBoxSize=0): MdIconProvider {
+    const config = new IconConfig(url, viewBoxSize || this._defaultViewBoxSize);
+    if (this._iconSetConfigs.has(setName)) {
+      // TODO: Allow multiple icon sets.
+      throw Error('Attempted to add multiple icon sets for: ' + setName);
+      // this._iconSetConfigsByName.get(iconSet).push(config);
+    } else {
+      this._iconSetConfigs.set(setName, [config]);
+    }
     return this;
   }
   
@@ -65,41 +87,126 @@ export class MdIconProvider {
     return this._defaultFontSetClass;
   }
 
-  loadIconByName(iconName: string): Observable<SVGElement> {
-    if (this._cachedIconsByName.has(iconName)) {
-      // Copy the element so changes won't affect the original.
-      return Observable.of(this._cachedIconsByName.get(iconName).cloneNode(true));
-    }
-    const iconConfig = this._iconConfigsByName.get(iconName);
-    if (!iconConfig) {
-      throw Error('Unknown icon: ' + iconName);
-    }
-    return this._loadIconFromConfig(iconConfig)
-        .do((svg: SVGElement) => this._cachedIconsByName.set(iconName, svg));
-  }
-  
   loadIconFromSetByName(setName: string, iconName: string): Observable<SVGElement> {
-    const combinedKey = setName + ':' + iconName;
-    // Check for this specific icon being cached.
-    if (this._cachedIconsBySetAndName.has(combinedKey)) {
-      return Observable.of(this._cachedIconsBySetAndName.get(combinedKey).cloneNode(true));
-    }
-    const iconConfig = this._iconSetConfigsByName.get(setName);
-    if (!iconConfig) {
-        throw Error('Unknown icon set: ' + setName);
+    // Return (copy of) cached icon if possible.
+    if (this._iconConfigs.has(setName) && this._iconConfigs.get(setName).has(iconName)) {
+      const config = this._iconConfigs.get(setName).get(iconName);
+      if (config.svgElement) {
+        // We already have the SVG element for this icon, return a copy.
+        return Observable.of(config.svgElement.cloneNode(true));
+      } else {
+        // Fetch the icon from the config's URL, cache it, and return a copy.
+        return this._loadIconFromConfig(config)
+          .do((svg: SVGElement) => config.svgElement = svg)
+          .map((svg: SVGElement) => svg.cloneNode(true));
+      }
     }
-    // Check for the icon set being cached.
-    if (this._cachedIconSets.has(setName)) {
-      var iconFromSet = this._extractSvgIconFromSet(
-          this._cachedIconSets.get(setName), iconName, iconConfig);
-      this._cachedIconsBySetAndName.set(combinedKey, iconFromSet);
-      return Observable.of(iconFromSet.cloneNode(true));
+    // See if we have any icon sets registered for the set name.
+    const iconSetConfigs = this._iconSetConfigs.get(setName);
+    if (iconSetConfigs) {
+      const unfetchedIconSetConfigs = <[IconConfig]>[];
+      // For all the icon set SVG elements we've fetched, see if any contain an icon with the
+      // requested name.
+      for (const setConfig of iconSetConfigs) {
+        if (setConfig.svgElement) {
+          const namedIcon = this._extractSvgIconFromSet(setConfig.svgElement, iconName, setConfig);
+          if (namedIcon) {
+            // We could cache namedSvg in _iconConfigs, but since we have to make a copy every
+            // time anyway, there's probably not much advantage compared to just always extracting
+            // it from the icon set.
+            return Observable.of(namedIcon.cloneNode(true));
+          }
+        } else {
+          unfetchedIconSetConfigs.push(setConfig);
+        }
+      }
+      // Not found in any cached icon sets. If there are icon sets with URLs that we haven't
+      // fetched, fetch them now and look for iconName in the results.
+      if (unfetchedIconSetConfigs.length) {
+        // The fun part. We need to asynchronously fetch the URLs, and see if any of them
+        // have an icon with the requested name.
+        let foundIcon: SVGElement = null;
+        
+        let parallelHttpRequests = unfetchedIconSetConfigs.map((setConfig) => {
+          return this._loadIconSetFromConfig(setConfig)
+              .catch((err: any, source: any, caught: any): Observable<SVGElement> => {
+                // Swallow errors fetching individual URLs so the combined Observable won't
+                // necessarily fail.
+                console.log(`Loading icon set URL: ${setConfig.url} failed with error: ${err}`);
+                return Observable.of(null);
+              })
+              .do((svg: SVGElement) => {
+                // Cache SVG element and look for named icon if we haven't already found it.
+                if (svg) {
+                  setConfig.svgElement = svg;
+                }
+                if (!foundIcon) {
+                  foundIcon = this._extractSvgIconFromSet(svg, iconName, setConfig);
+                }
+              });
+        });
+        // This will wait for all the URLs to come back. Ideally we'd like to return as soon as we
+        // find an icon with the correct name.
+        return Observable.forkJoin(parallelHttpRequests)
+            .map((ignoredResults: any) => {
+              if (foundIcon) {
+                return foundIcon;
+              }
+              throw Error(`Failed to find icon name: ${iconName} in set: ${setName}`);
+            });
+        /* // Trying to use AsyncSubject, which isn't working. The URL never gets fetched.
+        const subject = new AsyncSubject<SVGElement>();
+        let responsesReceived = 0;
+
+        console.log('AAA');
+        for (const setConfig of unfetchedIconSetConfigs) {
+          console.log('BBB: ' + setConfig.url);
+          this._loadIconSetFromConfig(setConfig)
+            .do((svg: SVGElement) => {
+              // Cache the element.
+              console.log(`Got icon set svg: ${svg}`);
+              setConfig.svgElement = svg;
+              if (!foundIcon) {
+                const namedIcon = this._extractSvgIconFromSet(svg, iconName, setConfig);
+                if (namedIcon) {
+                  // Avoid broadcasting multiple items if more than one set has a matching icon.
+                  foundIcon = true;
+                  subject.next(namedIcon);
+                }
+              }
+              responsesReceived += 1;
+              if (!foundIcon && responsesReceived == unfetchedIconSetConfigs.length) {
+                subject.error(`Failed to find icon name: ${iconName} in set: ${setName}`);
+              }
+            })
+            .catch((err: any, source: Observable<SVGElement>, caught: any): Observable<SVGElement> => {
+              console.log(`Loading icon set URL: ${setConfig.url} failed with error: ${err}`);
+              responsesReceived += 1;
+              if (!foundIcon && responsesReceived == unfetchedIconSetConfigs.length) {
+                subject.error(`Failed to find icon name: ${iconName} in set: ${setName}`);
+              }
+              return source;
+            });
+        }
+        return subject;
+        */
+        
+        /* // Simple implementation that only supports one icon set.
+        // Fetch the set and extract the icon.
+        const firstConfig = unfetchedIconSetConfigs[0];
+        return this._loadIconSetFromConfig(firstConfig)
+          .do((iconSet: SVGElement) => firstConfig.svgElement = iconSet)
+          .map((iconSet: SVGElement) => {
+            const namedIcon = this._extractSvgIconFromSet(iconSet, iconName, firstConfig);
+            if (!namedIcon) {
+              throw Error(`Failed to find icon name: ${iconName} in set: ${setName}`);
+            }
+            return namedIcon;
+          });
+        */
+      }
     }
-    // Fetch the set and extract the icon.
-    return this._loadIconSetFromConfig(iconConfig)
-        .do((iconSet: SVGElement) => this._cachedIconSets.set(setName, iconSet))
-        .map((iconSet: SVGElement) =>
-            this._extractSvgIconFromSet(iconSet, iconName, iconConfig));
+    return Observable.throw(Error(`Unknown icon name: ${iconName} in set: ${setName}`));
   }
   
   loadIconFromUrl(url: string): Observable<SVGElement> {
@@ -126,9 +233,10 @@ export class MdIconProvider {
       console.log("*** Using existing request");
       return this._inProgressUrlFetches.get(url);
     }
-    console.log("*** Sending request");
+    console.log(`*** Sending request for ${url}`);
     const req = this._http.get(url)
         .do((response) => {
+          console.log(`*** Got response for ${url}`);
           console.log('*** Removing request: ' + url);
           this._inProgressUrlFetches.delete(url);
         })
@@ -171,7 +279,7 @@ export class MdIconProvider {
       iconSet: SVGElement, iconName: string, config: IconConfig): SVGElement {
     const iconNode = iconSet.querySelector('#' + iconName);
     if (!iconNode) {
-      throw Error('No icon found in set with id: ' + iconName);
+      return null;
     }
     // createElement('SVG') doesn't work as expected; the DOM ends up with
     // the correct nodes, but the SVG content doesn't render. Instead we
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index d1c84f37d2cb..836e8f913414 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -55,6 +55,7 @@ export function main() {
       builder = tcb;
       mdIconProvider = mip;
       // Set fake responses for various SVG URLs.
+      // TODO: Keep track of requests so we can verify caching behavior.
       mockBackend.connections.subscribe((connection: any) => {
         switch (connection.request.url) {
           case 'cat.svg':
@@ -163,8 +164,8 @@ export function main() {
       });
 
       it('should register icon URLs by name', (done: () => void) => {
-        mdIconProvider.registerIcon('fluffy', 'cat.svg');
-        mdIconProvider.registerIcon('fido', 'dog.svg');
+        mdIconProvider.addIcon('fluffy', 'cat.svg');
+        mdIconProvider.addIcon('fido', 'dog.svg');
         return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -198,7 +199,7 @@ export function main() {
       });
 
       it('should extract icon from SVG icon set', (done: () => void) => {
-        mdIconProvider.registerIconSet('farm', 'farm-set.svg');
+        mdIconProvider.addIconSet('farm', 'farm-set.svg');
         return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 7ffb1bcbbca8..eb41cb4f9fe9 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -71,18 +71,18 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
   }
 
   ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
+    // TODO: Only refetch icons if the values actually changed.
     if (this.svgIcon) {
       const [iconSet, iconName] = this._splitIconName(this.svgIcon);
-      if (iconSet) {
-        this._mdIconProvider.loadIconFromSetByName(iconSet, iconName)
-            .subscribe((svg: SVGElement) => this._setSvgElement(svg));
-      } else {
-        this._mdIconProvider.loadIconByName(this.svgIcon)
-            .subscribe((svg: SVGElement) => this._setSvgElement(svg));
-      }
+      this._mdIconProvider.loadIconFromSetByName(iconSet, iconName)
+          .subscribe(
+              (svg: SVGElement) => this._setSvgElement(svg),
+              (err: any) => console.log(`Error retrieving icon: ${err}`));
     } else if (this.svgSrc) {
       this._mdIconProvider.loadIconFromUrl(this.svgSrc)
-        .subscribe((svg: SVGElement) => this._setSvgElement(svg));    
+        .subscribe(
+            (svg: SVGElement) => this._setSvgElement(svg),
+            (err: any) => console.log(`Error retrieving icon: ${err}`));
     }
     if (this._usingFontIcon()) {
       this._updateFontIconClasses();
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
index 4f5dd7191c69..a262bb901e8e 100644
--- a/src/demo-app/icon/icon-demo.ts
+++ b/src/demo-app/icon/icon-demo.ts
@@ -15,8 +15,8 @@ export class IconDemo {
 
   constructor(mdIconProvider: MdIconProvider) {
       mdIconProvider
-          .registerIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
-          .registerIconSet('core', '/demo-app/icon/assets/core-icon-set.svg')
+          .addIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
+          .addIconSet('core', '/demo-app/icon/assets/core-icon-set.svg')
           .registerFontSet('fontawesome', 'fa');
   }
 }

From 73900155a68890c2b18a2249d7de14a7c7eadf90 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Fri, 8 Apr 2016 14:36:07 -0400
Subject: [PATCH 15/37] cleanup

---
 src/components/icon/icon-provider.ts | 146 +++++++++------------------
 1 file changed, 48 insertions(+), 98 deletions(-)

diff --git a/src/components/icon/icon-provider.ts b/src/components/icon/icon-provider.ts
index 4cedf77b6301..361a807f6c36 100644
--- a/src/components/icon/icon-provider.ts
+++ b/src/components/icon/icon-provider.ts
@@ -13,8 +13,6 @@ class IconConfig {
 
 @Injectable()
 export class MdIconProvider {
-  // Cache all the things.
-
   // IconConfig objects and cached SVG elements for individual icons.
   // First level of cache is icon set (which is the empty string for the default set).
   // Second level is the icon name within the set.
@@ -55,9 +53,7 @@ export class MdIconProvider {
   public addIconSet(setName: string, url: string, viewBoxSize=0): MdIconProvider {
     const config = new IconConfig(url, viewBoxSize || this._defaultViewBoxSize);
     if (this._iconSetConfigs.has(setName)) {
-      // TODO: Allow multiple icon sets.
-      throw Error('Attempted to add multiple icon sets for: ' + setName);
-      // this._iconSetConfigsByName.get(iconSet).push(config);
+      this._iconSetConfigs.get(setName).push(config);
     } else {
       this._iconSetConfigs.set(setName, [config]);
     }
@@ -104,109 +100,63 @@ export class MdIconProvider {
     // See if we have any icon sets registered for the set name.
     const iconSetConfigs = this._iconSetConfigs.get(setName);
     if (iconSetConfigs) {
-      const unfetchedIconSetConfigs = <[IconConfig]>[];
       // For all the icon set SVG elements we've fetched, see if any contain an icon with the
       // requested name.
-      for (const setConfig of iconSetConfigs) {
-        if (setConfig.svgElement) {
-          const namedIcon = this._extractSvgIconFromSet(setConfig.svgElement, iconName, setConfig);
-          if (namedIcon) {
-            // We could cache namedSvg in _iconConfigs, but since we have to make a copy every
-            // time anyway, there's probably not much advantage compared to just always extracting
-            // it from the icon set.
-            return Observable.of(namedIcon.cloneNode(true));
-          }
-        } else {
-          unfetchedIconSetConfigs.push(setConfig);
-        }
+      const namedIcon = this._extractIconWithNameFromAnySet(iconName, iconSetConfigs);
+      if (namedIcon) {
+        // We could cache namedSvg in _iconConfigs, but since we have to make a copy every
+        // time anyway, there's probably not much advantage compared to just always extracting
+        // it from the icon set.
+        return Observable.of(namedIcon.cloneNode(true));
       }
       // Not found in any cached icon sets. If there are icon sets with URLs that we haven't
       // fetched, fetch them now and look for iconName in the results.
-      if (unfetchedIconSetConfigs.length) {
-        // The fun part. We need to asynchronously fetch the URLs, and see if any of them
-        // have an icon with the requested name.
-        let foundIcon: SVGElement = null;
-        
-        let parallelHttpRequests = unfetchedIconSetConfigs.map((setConfig) => {
-          return this._loadIconSetFromConfig(setConfig)
-              .catch((err: any, source: any, caught: any): Observable<SVGElement> => {
-                // Swallow errors fetching individual URLs so the combined Observable won't
-                // necessarily fail.
-                console.log(`Loading icon set URL: ${setConfig.url} failed with error: ${err}`);
-                return Observable.of(null);
-              })
-              .do((svg: SVGElement) => {
-                // Cache SVG element and look for named icon if we haven't already found it.
-                if (svg) {
-                  setConfig.svgElement = svg;
-                }
-                if (!foundIcon) {
-                  foundIcon = this._extractSvgIconFromSet(svg, iconName, setConfig);
-                }
-              });
+      const iconSetFetchRequests = <[Observable<SVGElement>]>[];
+      iconSetConfigs.forEach((setConfig) => {
+        if (!setConfig.svgElement) {
+          iconSetFetchRequests.push(
+              this._loadIconSetFromConfig(setConfig)
+                  .catch((err: any, source: any, caught: any): Observable<SVGElement> => {
+                    // Swallow errors fetching individual URLs so the combined Observable won't
+                    // necessarily fail.
+                    console.log(`Loading icon set URL: ${setConfig.url} failed with error: ${err}`);
+                    return Observable.of(null);
+                  })
+                  .do((svg: SVGElement) => {
+                    // Cache SVG element.
+                    if (svg) {
+                      setConfig.svgElement = svg;
+                    }
+                  })
+          );
+        }
+      });
+      // Fetch all the icon set URLs. When the requests complete, every IconSet should have a
+      // cached SVG element (unless the request failed), and we can check again for the icon.
+      return Observable.forkJoin(iconSetFetchRequests)
+        .map((ignoredResults: any) => {
+          const foundIcon = this._extractIconWithNameFromAnySet(iconName, iconSetConfigs);
+          if (!foundIcon) {
+            throw Error(`Failed to find icon name: ${iconName} in set: ${setName}`);
+          }
+          return foundIcon;
         });
-        // This will wait for all the URLs to come back. Ideally we'd like to return as soon as we
-        // find an icon with the correct name.
-        return Observable.forkJoin(parallelHttpRequests)
-            .map((ignoredResults: any) => {
-              if (foundIcon) {
-                return foundIcon;
-              }
-              throw Error(`Failed to find icon name: ${iconName} in set: ${setName}`);
-            });
-        /* // Trying to use AsyncSubject, which isn't working. The URL never gets fetched.
-        const subject = new AsyncSubject<SVGElement>();
-        let responsesReceived = 0;
+    }
+    return Observable.throw(Error(`Unknown icon name: ${iconName} in set: ${setName}`));
+  }
 
-        console.log('AAA');
-        for (const setConfig of unfetchedIconSetConfigs) {
-          console.log('BBB: ' + setConfig.url);
-          this._loadIconSetFromConfig(setConfig)
-            .do((svg: SVGElement) => {
-              // Cache the element.
-              console.log(`Got icon set svg: ${svg}`);
-              setConfig.svgElement = svg;
-              if (!foundIcon) {
-                const namedIcon = this._extractSvgIconFromSet(svg, iconName, setConfig);
-                if (namedIcon) {
-                  // Avoid broadcasting multiple items if more than one set has a matching icon.
-                  foundIcon = true;
-                  subject.next(namedIcon);
-                }
-              }
-              responsesReceived += 1;
-              if (!foundIcon && responsesReceived == unfetchedIconSetConfigs.length) {
-                subject.error(`Failed to find icon name: ${iconName} in set: ${setName}`);
-              }
-            })
-            .catch((err: any, source: Observable<SVGElement>, caught: any): Observable<SVGElement> => {
-              console.log(`Loading icon set URL: ${setConfig.url} failed with error: ${err}`);
-              responsesReceived += 1;
-              if (!foundIcon && responsesReceived == unfetchedIconSetConfigs.length) {
-                subject.error(`Failed to find icon name: ${iconName} in set: ${setName}`);
-              }
-              return source;
-            });
+  private _extractIconWithNameFromAnySet(iconName: string, setConfigs: [IconConfig]): SVGElement {
+    // Iterate backwards, so icon sets added later have precedence.
+    for (let i = setConfigs.length - 1; i >= 0; i--) {
+      const config = setConfigs[i];
+      if (config.svgElement) {
+        const foundIcon = this._extractSvgIconFromSet(config.svgElement, iconName, config);
+        if (foundIcon) {
+          return foundIcon;
         }
-        return subject;
-        */
-        
-        /* // Simple implementation that only supports one icon set.
-        // Fetch the set and extract the icon.
-        const firstConfig = unfetchedIconSetConfigs[0];
-        return this._loadIconSetFromConfig(firstConfig)
-          .do((iconSet: SVGElement) => firstConfig.svgElement = iconSet)
-          .map((iconSet: SVGElement) => {
-            const namedIcon = this._extractSvgIconFromSet(iconSet, iconName, firstConfig);
-            if (!namedIcon) {
-              throw Error(`Failed to find icon name: ${iconName} in set: ${setName}`);
-            }
-            return namedIcon;
-          });
-        */
       }
     }
-    return Observable.throw(Error(`Unknown icon name: ${iconName} in set: ${setName}`));
+    return null;
   }
   
   loadIconFromUrl(url: string): Observable<SVGElement> {

From 17f40c5b49fb0c223fb196020cfececb37212c35 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Fri, 8 Apr 2016 14:52:39 -0400
Subject: [PATCH 16/37] fix tests

---
 src/components/icon/icon.spec.ts | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 836e8f913414..1d5116936d26 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -1,8 +1,14 @@
 import {
+  it, iit,
+  describe,
+  ddescribe,
+  expect,
+  beforeEach,
+  beforeEachProviders,
+  xit,
   inject,
   TestComponentBuilder,
 } from 'angular2/testing';
-
 import {
   HTTP_PROVIDERS,
   BaseRequestOptions,
@@ -13,15 +19,6 @@ import {
 import {
   MockBackend,
   MockConnection} from 'angular2/http/testing';
-import {
-  it, iit,
-  describe,
-  ddescribe,
-  expect,
-  beforeEach,
-  beforeEachProviders,
-  xit,
-} from '../../core/facade/testing';
 import {
   provide,
   Component} from 'angular2/core';
@@ -300,7 +297,6 @@ class MdIconCustomFontCssTestApp {
   fontIcon = '';
 }
 
-
 @Component({
   selector: 'test-app',
   template: `<md-icon svgSrc="{{iconUrl}}" aria-label="{{ariaLabel}}"></md-icon>`,

From 87dd4acd2b121c9128fd89a393a229cbb437b61f Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Fri, 8 Apr 2016 14:57:45 -0400
Subject: [PATCH 17/37] Remove local changes.

---
 src/demo-app/demo-app.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/demo-app/demo-app.scss b/src/demo-app/demo-app.scss
index 07d3aee6e908..f23099e1cde8 100644
--- a/src/demo-app/demo-app.scss
+++ b/src/demo-app/demo-app.scss
@@ -10,6 +10,6 @@
   }
 }
 
-.md-icon-content {
-  opacity: 0.5;
+.demo-content {
+  padding: 15px;
 }

From 82bd25ef3e5b20671325673668cb526cbe86584b Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Fri, 8 Apr 2016 15:00:07 -0400
Subject: [PATCH 18/37] remove unused entry

---
 test/karma.config.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/karma.config.ts b/test/karma.config.ts
index f57b5b9b3505..c41c3d0183bf 100644
--- a/test/karma.config.ts
+++ b/test/karma.config.ts
@@ -32,7 +32,6 @@ export function config(config) {
       {pattern: 'node_modules/angular2/bundles/angular2.dev.js', included: true, watched: true},
       {pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true},
       {pattern: 'node_modules/angular2/bundles/http.dev.js', included: true, watched: true},
-      //{pattern: 'node_modules/angular2/http/testing.js', included: true, watched: true},
 
       {pattern: 'test/karma-test-shim.js', included: true, watched: true},
 

From e4d568f6d7fd15c997317524b284a81df4b183f8 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Sun, 10 Apr 2016 02:04:13 -0400
Subject: [PATCH 19/37] more tests

---
 src/components/icon/icon-provider.ts |  53 +++---
 src/components/icon/icon.spec.ts     | 234 ++++++++++++++++++++++-----
 src/components/icon/icon.ts          |  27 ++--
 src/demo-app/icon/icon-demo.html     |   2 +
 4 files changed, 237 insertions(+), 79 deletions(-)

diff --git a/src/components/icon/icon-provider.ts b/src/components/icon/icon-provider.ts
index 361a807f6c36..baa55e41dc84 100644
--- a/src/components/icon/icon-provider.ts
+++ b/src/components/icon/icon-provider.ts
@@ -20,7 +20,7 @@ export class MdIconProvider {
 
   // IconConfig objects and cached SVG elements for icon sets.
   // These are stored only by set name, but multiple URLs can be registered under the same name.
-  private _iconSetConfigs = new Map<string, [IconConfig]>();
+  private _iconSetConfigs = new Map<string, IconConfig[]>();
 
   // Cache for icons loaded by direct URLs.
   private _cachedIconsByUrl = new Map<string, SVGElement>();
@@ -28,19 +28,19 @@ export class MdIconProvider {
   private _fontClassNamesByAlias = new Map<string, string>();
 
   private _inProgressUrlFetches = new Map<string, Observable<string>>();
-  
+
   private _defaultViewBoxSize = 24;
   private _defaultFontSetClass = 'material-icons';
-  
+
   constructor(private _http: Http) {
   }
-  
-  public addIcon(iconName: string, url: string, viewBoxSize:number=0): MdIconProvider {
+
+  public addIcon(iconName: string, url: string, viewBoxSize:number=0): this {
     return this.addIconInSet('', iconName, url, viewBoxSize);
   }
-  
+
   public addIconInSet(
-      setName: string, iconName: string, url: string, viewBoxSize:number=0): MdIconProvider {
+      setName: string, iconName: string, url: string, viewBoxSize:number=0): this {
     let iconSetMap = this._iconConfigs.get(setName);
     if (!iconSetMap) {
       iconSetMap = new Map<string, IconConfig>();
@@ -49,8 +49,8 @@ export class MdIconProvider {
     iconSetMap.set(iconName, new IconConfig(url, viewBoxSize || this._defaultViewBoxSize));
     return this;
   }
-  
-  public addIconSet(setName: string, url: string, viewBoxSize=0): MdIconProvider {
+
+  public addIconSet(setName: string, url: string, viewBoxSize=0): this {
     const config = new IconConfig(url, viewBoxSize || this._defaultViewBoxSize);
     if (this._iconSetConfigs.has(setName)) {
       this._iconSetConfigs.get(setName).push(config);
@@ -59,26 +59,26 @@ export class MdIconProvider {
     }
     return this;
   }
-  
-  public registerFontSet(alias: string, className?: string): MdIconProvider {
+
+  public registerFontSet(alias: string, className?: string): this {
     this._fontClassNamesByAlias.set(alias, className || alias);
     return this;
   }
-  
+
   public setDefaultViewBoxSize(size: number) {
     this._defaultViewBoxSize = size;
     return this;
   }
-  
+
   public getDefaultViewBoxSize(): number {
     return this._defaultViewBoxSize;
   }
-  
+
   public setDefaultFontSetClass(className: string) {
     this._defaultFontSetClass = className;
     return this;
   }
-  
+
   public getDefaultFontSetClass(): string {
     return this._defaultFontSetClass;
   }
@@ -145,7 +145,7 @@ export class MdIconProvider {
     return Observable.throw(Error(`Unknown icon name: ${iconName} in set: ${setName}`));
   }
 
-  private _extractIconWithNameFromAnySet(iconName: string, setConfigs: [IconConfig]): SVGElement {
+  private _extractIconWithNameFromAnySet(iconName: string, setConfigs: IconConfig[]): SVGElement {
     // Iterate backwards, so icon sets added later have precedence.
     for (let i = setConfigs.length - 1; i >= 0; i--) {
       const config = setConfigs[i];
@@ -158,7 +158,7 @@ export class MdIconProvider {
     }
     return null;
   }
-  
+
   loadIconFromUrl(url: string): Observable<SVGElement> {
     if (this._cachedIconsByUrl.has(url)) {
       return Observable.of(this._cachedIconsByUrl.get(url).cloneNode(true));
@@ -168,16 +168,15 @@ export class MdIconProvider {
   }
 
   classNameForFontAlias(alias: string): string {
-    if (!this._fontClassNamesByAlias.has(alias)) {
-      throw Error('Unknown font alias: ' + alias);
-    }
-    return this._fontClassNamesByAlias.get(alias);
+    return this._fontClassNamesByAlias.get(alias) || alias;
   }
-  
+
   private _fetchUrl(url: string): Observable<string> {
     // FIXME: This is trying to avoid sending a duplicate request for a URL when there is already
     // a request in progress for that URL. But it's not working; even though we return the cached
     // Observable, a second request is still sent.
+    // Observable.share seems like it should work, but doesn't seem to have any effect.
+    // (http://xgrommx.github.io/rx-book/content/observable/observable_instance_methods/share.html)
     console.log('*** fetchUrl: ' + url);
     if (this._inProgressUrlFetches.has(url)) {
       console.log("*** Using existing request");
@@ -192,19 +191,19 @@ export class MdIconProvider {
         })
         .map((response) => response.text());
     this._inProgressUrlFetches.set(url, req);
-    return req;
+    return req.share();
   }
-  
+
   private _loadIconFromConfig(config: IconConfig): Observable<SVGElement> {
     return this._fetchUrl(config.url)
         .map(svgText => this._createSvgElementForSingleIcon(svgText, config));
   }
-  
+
   private _loadIconSetFromConfig(config: IconConfig): Observable<SVGElement> {
     return this._fetchUrl(config.url)
         .map((svgText) => this._svgElementFromString(svgText));
   }
-  
+
   private _createSvgElementForSingleIcon(responseText: string, config: IconConfig): SVGElement {
     const svg = this._svgElementFromString(responseText);
     this._setSvgAttributes(svg, config);
@@ -224,7 +223,7 @@ export class MdIconProvider {
         svg.getAttribute('viewBox') || ('0 0 ' + viewBoxSize + ' ' + viewBoxSize));
     svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable.
   }
-  
+
   private _extractSvgIconFromSet(
       iconSet: SVGElement, iconName: string, config: IconConfig): SVGElement {
     const iconNode = iconSet.querySelector('#' + iconName);
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 1d5116936d26..2df8e6febe90 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -1,11 +1,9 @@
 import {
-  it, iit,
+  it,
   describe,
-  ddescribe,
   expect,
   beforeEach,
   beforeEachProviders,
-  xit,
   inject,
   TestComponentBuilder,
 } from 'angular2/testing';
@@ -35,16 +33,17 @@ const sortedClassNames = (elem: Element) => elem.className.split(' ').sort();
 
 export function main() {
   describe('MdIcon', () => {
-  
+
     beforeEachProviders(() => [
       MdIconProvider,
       HTTP_PROVIDERS,
       MockBackend,
       provide(XHRBackend, {useExisting: MockBackend}),
     ]);
-  
+
     let builder: TestComponentBuilder;
     let mdIconProvider: MdIconProvider;
+    let httpRequestUrls: string[];
 
     beforeEach(
         inject([TestComponentBuilder, MdIconProvider, MockBackend],
@@ -53,8 +52,11 @@ export function main() {
       mdIconProvider = mip;
       // Set fake responses for various SVG URLs.
       // TODO: Keep track of requests so we can verify caching behavior.
+      httpRequestUrls = [];
       mockBackend.connections.subscribe((connection: any) => {
-        switch (connection.request.url) {
+        const url = connection.request.url;
+        httpRequestUrls.push(url);
+        switch (url) {
           case 'cat.svg':
             connection.mockRespond(new Response(new ResponseOptions({
               status: 200,
@@ -67,7 +69,7 @@ export function main() {
               body: '<svg><path d="woof"></path></svg>',
             })));
             break;
-          case 'farm-set.svg':
+          case 'farm-set-1.svg':
             connection.mockRespond(new Response(new ResponseOptions({
               status: 200,
               body: `
@@ -78,6 +80,28 @@ export function main() {
               `,
             })));
             break;
+          case 'farm-set-2.svg':
+            connection.mockRespond(new Response(new ResponseOptions({
+              status: 200,
+              body: `
+                <svg>
+                  <g id="cow"><path d="moo moo"></path></g>
+                  <g id="sheep"><path d="baa"></path></g>
+                </svg>
+              `,
+            })));
+            break;
+          case 'arrow-set.svg':
+            connection.mockRespond(new Response(new ResponseOptions({
+              status: 200,
+              body: `
+                <svg>
+                  <g id="left"><path d="left"></path></g>
+                  <g id="right"><path d="right"></path></g>
+                </svg>
+              `,
+            })));
+            break;
         }
       });
     }));
@@ -94,30 +118,14 @@ export function main() {
         });
       });
 
-      it('should set aria label from text content if not specified', (done: () => void) => {
+      it('should use alternate icon font if set', (done: () => void) => {
+        mdIconProvider.setDefaultFontSetClass('myfont');
         return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           testComponent.iconName = 'home';
           fixture.detectChanges();
-          expect(mdIconElement.getAttribute('aria-label')).toBe('home');
-
-          testComponent.iconName = 'hand';
-          fixture.detectChanges();
-          expect(mdIconElement.getAttribute('aria-label')).toBe('hand');
-
-          done();
-        });
-      });
-
-      it('should use provided aria label', (done: () => void) => {
-        return builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then((fixture) => {
-          const testComponent = fixture.debugElement.componentInstance;
-          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-          testComponent.iconName = 'home';
-          testComponent.ariaLabel = 'house';
-          fixture.detectChanges();
-          expect(mdIconElement.getAttribute('aria-label')).toBe('house');
+          expect(sortedClassNames(mdIconElement)).toEqual(['myfont']);
           done();
         });
       });
@@ -128,12 +136,14 @@ export function main() {
         return builder.createAsync(MdIconFromSvgUrlTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          let svgElement: any;
+          let pathElement: any;
+
           testComponent.iconUrl = 'cat.svg';
           fixture.detectChanges();
-
           // An <svg> element should have been added as a child of <md-icon>.
           expect(mdIconElement.children.length).toBe(1);
-          let svgElement = mdIconElement.children[0];
+          svgElement = mdIconElement.children[0];
           expect(svgElement.tagName.toLowerCase()).toBe('svg');
           // Default attributes should be set.
           expect(svgElement.getAttribute('height')).toBe('100%');
@@ -141,7 +151,7 @@ export function main() {
           expect(svgElement.getAttribute('viewBox')).toBe('0 0 24 24');
           // Make sure SVG content is taken from response.
           expect(svgElement.children.length).toBe(1);
-          let pathElement = svgElement.children[0];
+          pathElement = svgElement.children[0];
           expect(pathElement.tagName.toLowerCase()).toBe('path');
           expect(pathElement.getAttribute('d')).toBe('meow');
 
@@ -156,6 +166,15 @@ export function main() {
           expect(pathElement.tagName.toLowerCase()).toBe('path');
           expect(pathElement.getAttribute('d')).toBe('woof');
 
+          expect(httpRequestUrls).toEqual(['cat.svg', 'dog.svg']);
+          // Using an icon from a previously loaded URL should not cause another HTTP request.
+          testComponent.iconUrl = 'cat.svg';
+          fixture.detectChanges();
+          expect(mdIconElement.children.length).toBe(1);
+          pathElement = mdIconElement.querySelector('svg path');
+          expect(pathElement.getAttribute('d')).toBe('meow');
+          expect(httpRequestUrls).toEqual(['cat.svg', 'dog.svg']);
+
           done();
         });
       });
@@ -166,13 +185,16 @@ export function main() {
         return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          let svgElement: any;
+          let pathElement: any;
+
           testComponent.iconName= 'fido';
           fixture.detectChanges();
           expect(mdIconElement.children.length).toBe(1);
-          let svgElement = mdIconElement.children[0];
+          svgElement = mdIconElement.children[0];
           expect(svgElement.tagName.toLowerCase()).toBe('svg');
           expect(svgElement.children.length).toBe(1);
-          let pathElement = svgElement.children[0];
+          pathElement = svgElement.children[0];
           expect(pathElement.tagName.toLowerCase()).toBe('path');
           expect(pathElement.getAttribute('d')).toBe('woof');
           // The aria label should be taken from the icon name.
@@ -191,27 +213,40 @@ export function main() {
           expect(pathElement.getAttribute('d')).toBe('meow');
           expect(mdIconElement.getAttribute('aria-label')).toBe('fluffy');
 
+          expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
+          // Using an icon from a previously loaded URL should not cause another HTTP request.
+          testComponent.iconName = 'fido';
+          fixture.detectChanges();
+          expect(mdIconElement.children.length).toBe(1);
+          pathElement = mdIconElement.querySelector('svg path');
+          expect(pathElement.getAttribute('d')).toBe('woof');
+          expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
+
           done();
         });
       });
 
       it('should extract icon from SVG icon set', (done: () => void) => {
-        mdIconProvider.addIconSet('farm', 'farm-set.svg');
+        mdIconProvider.addIconSet('farm', 'farm-set-1.svg');
         return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          let svgElement: any;
+          let pathElement: any;
+          let svgChild: any;
+
           testComponent.iconName = 'farm:pig';
           fixture.detectChanges();
           expect(mdIconElement.children.length).toBe(1);
-          let svgElement = mdIconElement.children[0];
+          svgElement = mdIconElement.children[0];
           expect(svgElement.tagName.toLowerCase()).toBe('svg');
           expect(svgElement.children.length).toBe(1);
-          let svgChild = svgElement.children[0];
+          svgChild = svgElement.children[0];
           // The first <svg> child should be the <g id="pig"> element.
           expect(svgChild.tagName.toLowerCase()).toBe('g');
           expect(svgChild.getAttribute('id')).toBe('pig');
           expect(svgChild.children.length).toBe(1);
-          let pathElement = svgChild.children[0];
+          pathElement = svgChild.children[0];
           expect(pathElement.tagName.toLowerCase()).toBe('path');
           expect(pathElement.getAttribute('d')).toBe('oink');
           // The aria label should be taken from the icon name (without the icon set portion).
@@ -223,7 +258,7 @@ export function main() {
           expect(mdIconElement.children.length).toBe(1);
           svgElement = mdIconElement.children[0];
           svgChild = svgElement.children[0];
-          // The first <svg> child should be the <g id="pig"> element.
+          // The first <svg> child should be the <g id="cow"> element.
           expect(svgChild.tagName.toLowerCase()).toBe('g');
           expect(svgChild.getAttribute('id')).toBe('cow');
           expect(svgChild.children.length).toBe(1);
@@ -235,8 +270,61 @@ export function main() {
           done();
         });
       });
+
+      it('should allow multiple icon sets in a namespace', (done: () => void) => {
+        mdIconProvider.addIconSet('farm', 'farm-set-1.svg');
+        mdIconProvider.addIconSet('farm', 'farm-set-2.svg');
+        mdIconProvider.addIconSet('arrows', 'arrow-set.svg');
+        return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          let svgElement: any;
+          let pathElement: any;
+          let svgChild: any;
+
+          testComponent.iconName = 'farm:pig';
+          fixture.detectChanges();
+          expect(mdIconElement.children.length).toBe(1);
+          svgElement = mdIconElement.children[0];
+          expect(svgElement.tagName.toLowerCase()).toBe('svg');
+          expect(svgElement.children.length).toBe(1);
+          svgChild = svgElement.children[0];
+          // The first <svg> child should be the <g id="pig"> element.
+          expect(svgChild.tagName.toLowerCase()).toBe('g');
+          expect(svgChild.getAttribute('id')).toBe('pig');
+          expect(svgChild.children.length).toBe(1);
+          pathElement = svgChild.children[0];
+          expect(pathElement.tagName.toLowerCase()).toBe('path');
+          expect(pathElement.getAttribute('d')).toBe('oink');
+          // The aria label should be taken from the icon name (without the icon set portion).
+          expect(mdIconElement.getAttribute('aria-label')).toBe('pig');
+
+          // Both icon sets registered in the 'farm' namespace should have been fetched.
+          expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
+
+          // Change the icon name to one that appears in both icon sets. The icon from the set that
+          // was registered last should be used (with 'd' attribute of 'moo moo' instead of 'moo'),
+          // and no additional HTTP request should be made.
+          testComponent.iconName = 'farm:cow';
+          fixture.detectChanges();
+          expect(mdIconElement.children.length).toBe(1);
+          svgElement = mdIconElement.children[0];
+          svgChild = svgElement.children[0];
+          // The first <svg> child should be the <g id="cow"> element.
+          expect(svgChild.tagName.toLowerCase()).toBe('g');
+          expect(svgChild.getAttribute('id')).toBe('cow');
+          expect(svgChild.children.length).toBe(1);
+          pathElement = svgChild.children[0];
+          expect(pathElement.tagName.toLowerCase()).toBe('path');
+          expect(pathElement.getAttribute('d')).toBe('moo moo');
+          expect(mdIconElement.getAttribute('aria-label')).toBe('cow');
+          expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
+
+          done();
+        });
+      });
     });
-    
+
     describe('custom fonts', () => {
       it('should apply CSS classes for custom font and icon', (done: () => void) => {
         mdIconProvider.registerFontSet('f1', 'font1');
@@ -249,13 +337,79 @@ export function main() {
           fixture.detectChanges();
           expect(sortedClassNames(mdIconElement)).toEqual(['font1', 'house']);
           expect(mdIconElement.getAttribute('aria-label')).toBe('house');
-          
+
           testComponent.fontSet = 'f2';
           testComponent.fontIcon = 'igloo';
           fixture.detectChanges();
           expect(sortedClassNames(mdIconElement)).toEqual(['f2', 'igloo']);
           expect(mdIconElement.getAttribute('aria-label')).toBe('igloo');
-          
+
+          testComponent.fontSet = 'f3';
+          testComponent.fontIcon = 'tent';
+          fixture.detectChanges();
+          expect(sortedClassNames(mdIconElement)).toEqual(['f3', 'tent']);
+          expect(mdIconElement.getAttribute('aria-label')).toBe('tent');
+
+          done();
+        });
+      });
+    });
+
+    describe('aria label', () => {
+      it('should set aria label from text content if not specified', (done: () => void) => {
+        return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          testComponent.iconName = 'home';
+          fixture.detectChanges();
+          expect(mdIconElement.getAttribute('aria-label')).toBe('home');
+
+          testComponent.iconName = 'hand';
+          fixture.detectChanges();
+          expect(mdIconElement.getAttribute('aria-label')).toBe('hand');
+
+          done();
+        });
+      });
+
+      it('should use alt tag if aria label is not specified', (done: () => void) => {
+        return builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          testComponent.iconName = 'home';
+          testComponent.altText = 'castle';
+          fixture.detectChanges();
+          expect(mdIconElement.getAttribute('aria-label')).toBe('castle');
+
+          testComponent.ariaLabel = 'house';
+          fixture.detectChanges();
+          expect(mdIconElement.getAttribute('aria-label')).toBe('house');
+
+          done();
+        });
+      });
+
+      it('should use provided aria label rather than icon name', (done: () => void) => {
+        return builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          testComponent.iconName = 'home';
+          testComponent.ariaLabel = 'house';
+          fixture.detectChanges();
+          expect(mdIconElement.getAttribute('aria-label')).toBe('house');
+          done();
+        });
+      });
+
+      it('should use provided aria label rather than font icon', (done: () => void) => {
+        return builder.createAsync(MdIconCustomFontCssTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          testComponent.fontSet = 'f1';
+          testComponent.fontIcon = 'house';
+          testComponent.ariaLabel = 'home';
+          fixture.detectChanges();
+          expect(mdIconElement.getAttribute('aria-label')).toBe('home');
           done();
         });
       });
@@ -276,7 +430,7 @@ class MdIconLigatureTestApp {
 
 @Component({
   selector: 'test-app',
-  template: `<md-icon aria-label="{{ariaLabel}}">{{iconName}}</md-icon>`,
+  template: `<md-icon aria-label="{{ariaLabel}}" alt="{{altText}}">{{iconName}}</md-icon>`,
   directives: [MdIcon],
 })
 class MdIconLigatureWithAriaBindingTestApp {
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index eb41cb4f9fe9..fa06b51c26a2 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -70,19 +70,22 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
     return [iconName.substring(0, sepIndex), iconName.substring(sepIndex + 1)];
   }
 
-  ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
-    // TODO: Only refetch icons if the values actually changed.
-    if (this.svgIcon) {
-      const [iconSet, iconName] = this._splitIconName(this.svgIcon);
-      this._mdIconProvider.loadIconFromSetByName(iconSet, iconName)
+  ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
+    const changedInputs = Object.keys(changes);
+    // Only update the inline SVG icon if the inputs changed, to avoid unnecessary DOM operations.
+    if (changedInputs.indexOf('svgIcon') != -1 || changedInputs.indexOf('svgSrc') != -1) {
+      if (this.svgIcon) {
+        const [iconSet, iconName] = this._splitIconName(this.svgIcon);
+        this._mdIconProvider.loadIconFromSetByName(iconSet, iconName)
           .subscribe(
-              (svg: SVGElement) => this._setSvgElement(svg),
-              (err: any) => console.log(`Error retrieving icon: ${err}`));
-    } else if (this.svgSrc) {
-      this._mdIconProvider.loadIconFromUrl(this.svgSrc)
-        .subscribe(
-            (svg: SVGElement) => this._setSvgElement(svg),
-            (err: any) => console.log(`Error retrieving icon: ${err}`));
+          (svg: SVGElement) => this._setSvgElement(svg),
+          (err: any) => console.log(`Error retrieving icon: ${err}`));
+      } else if (this.svgSrc) {
+        this._mdIconProvider.loadIconFromUrl(this.svgSrc)
+          .subscribe(
+          (svg: SVGElement) => this._setSvgElement(svg),
+          (err: any) => console.log(`Error retrieving icon: ${err}`));
+      }
     }
     if (this._usingFontIcon()) {
       this._updateFontIconClasses();
diff --git a/src/demo-app/icon/icon-demo.html b/src/demo-app/icon/icon-demo.html
index b3daf73d3471..0de32df13b23 100644
--- a/src/demo-app/icon/icon-demo.html
+++ b/src/demo-app/icon/icon-demo.html
@@ -10,11 +10,13 @@
 <p>
   By name registered with MdIconProvider:
   <md-icon svgIcon="thumb-up" class="green"></md-icon>
+  <md-icon svgIcon="thumb-up"></md-icon>
 </p>
 
 <p>
   From icon set:
   <md-icon svgIcon="core:alarm"></md-icon>
+  <md-icon svgIcon="core:accessibility"></md-icon>
 </p>
 
 <p>

From af2f94b0c4125dd4cc4c4a46e5f101cb0be788d0 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Sun, 10 Apr 2016 14:19:46 -0400
Subject: [PATCH 20/37] MdIconProvider->MdIconRegistry

---
 .../{icon-provider.ts => icon-registry.ts}    | 30 ++++++++---------
 src/components/icon/icon.spec.ts              | 32 +++++++++----------
 src/components/icon/icon.ts                   | 26 +++++++--------
 src/demo-app/icon/icon-demo.ts                |  8 ++---
 src/main.ts                                   |  4 +--
 5 files changed, 50 insertions(+), 50 deletions(-)
 rename src/components/icon/{icon-provider.ts => icon-registry.ts} (91%)

diff --git a/src/components/icon/icon-provider.ts b/src/components/icon/icon-registry.ts
similarity index 91%
rename from src/components/icon/icon-provider.ts
rename to src/components/icon/icon-registry.ts
index baa55e41dc84..4e8010f85159 100644
--- a/src/components/icon/icon-provider.ts
+++ b/src/components/icon/icon-registry.ts
@@ -12,14 +12,14 @@ class IconConfig {
 }
 
 @Injectable()
-export class MdIconProvider {
+export class MdIconRegistry {
   // IconConfig objects and cached SVG elements for individual icons.
-  // First level of cache is icon set (which is the empty string for the default set).
-  // Second level is the icon name within the set.
+  // First level of cache is namespace (which is the empty string if not specified).
+  // Second level is the icon name within the namespace.
   private _iconConfigs = new Map<string, Map<string, IconConfig>>();
 
   // IconConfig objects and cached SVG elements for icon sets.
-  // These are stored only by set name, but multiple URLs can be registered under the same name.
+  // Multiple icon sets can be registered under the same namespace.
   private _iconSetConfigs = new Map<string, IconConfig[]>();
 
   // Cache for icons loaded by direct URLs.
@@ -36,15 +36,15 @@ export class MdIconProvider {
   }
 
   public addIcon(iconName: string, url: string, viewBoxSize:number=0): this {
-    return this.addIconInSet('', iconName, url, viewBoxSize);
+    return this.addIconInNamespace('', iconName, url, viewBoxSize);
   }
 
-  public addIconInSet(
-      setName: string, iconName: string, url: string, viewBoxSize:number=0): this {
-    let iconSetMap = this._iconConfigs.get(setName);
+  public addIconInNamespace(
+      namespace: string, iconName: string, url: string, viewBoxSize:number=0): this {
+    let iconSetMap = this._iconConfigs.get(namespace);
     if (!iconSetMap) {
       iconSetMap = new Map<string, IconConfig>();
-      this._iconConfigs.set(setName, iconSetMap);
+      this._iconConfigs.set(namespace, iconSetMap);
     }
     iconSetMap.set(iconName, new IconConfig(url, viewBoxSize || this._defaultViewBoxSize));
     return this;
@@ -83,10 +83,10 @@ export class MdIconProvider {
     return this._defaultFontSetClass;
   }
 
-  loadIconFromSetByName(setName: string, iconName: string): Observable<SVGElement> {
+  loadIconFromNamespaceByName(namespace: string, iconName: string): Observable<SVGElement> {
     // Return (copy of) cached icon if possible.
-    if (this._iconConfigs.has(setName) && this._iconConfigs.get(setName).has(iconName)) {
-      const config = this._iconConfigs.get(setName).get(iconName);
+    if (this._iconConfigs.has(namespace) && this._iconConfigs.get(namespace).has(iconName)) {
+      const config = this._iconConfigs.get(namespace).get(iconName);
       if (config.svgElement) {
         // We already have the SVG element for this icon, return a copy.
         return Observable.of(config.svgElement.cloneNode(true));
@@ -98,7 +98,7 @@ export class MdIconProvider {
       }
     }
     // See if we have any icon sets registered for the set name.
-    const iconSetConfigs = this._iconSetConfigs.get(setName);
+    const iconSetConfigs = this._iconSetConfigs.get(namespace);
     if (iconSetConfigs) {
       // For all the icon set SVG elements we've fetched, see if any contain an icon with the
       // requested name.
@@ -137,12 +137,12 @@ export class MdIconProvider {
         .map((ignoredResults: any) => {
           const foundIcon = this._extractIconWithNameFromAnySet(iconName, iconSetConfigs);
           if (!foundIcon) {
-            throw Error(`Failed to find icon name: ${iconName} in set: ${setName}`);
+            throw Error(`Failed to find icon name: ${iconName} in namespace: ${namespace}`);
           }
           return foundIcon;
         });
     }
-    return Observable.throw(Error(`Unknown icon name: ${iconName} in set: ${setName}`));
+    return Observable.throw(Error(`Unknown icon name: ${iconName} in namespace: ${namespace}`));
   }
 
   private _extractIconWithNameFromAnySet(iconName: string, setConfigs: IconConfig[]): SVGElement {
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 2df8e6febe90..f9d2038d956b 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -27,7 +27,7 @@ import {
 } from 'angular2/platform/testing/browser';
 
 import {MdIcon} from './icon';
-import {MdIconProvider} from './icon-provider';
+import {MdIconRegistry} from './icon-registry';
 
 const sortedClassNames = (elem: Element) => elem.className.split(' ').sort();
 
@@ -35,23 +35,23 @@ export function main() {
   describe('MdIcon', () => {
 
     beforeEachProviders(() => [
-      MdIconProvider,
+      MdIconRegistry,
       HTTP_PROVIDERS,
       MockBackend,
       provide(XHRBackend, {useExisting: MockBackend}),
     ]);
 
     let builder: TestComponentBuilder;
-    let mdIconProvider: MdIconProvider;
+    let mdIconRegistry: MdIconRegistry;
     let httpRequestUrls: string[];
 
     beforeEach(
-        inject([TestComponentBuilder, MdIconProvider, MockBackend],
-        (tcb: TestComponentBuilder, mip: MdIconProvider, mockBackend: MockBackend) => {
+        inject([TestComponentBuilder, MdIconRegistry, MockBackend],
+        (tcb: TestComponentBuilder, mir: MdIconRegistry, mockBackend: MockBackend) => {
       builder = tcb;
-      mdIconProvider = mip;
+      mdIconRegistry = mir;
       // Set fake responses for various SVG URLs.
-      // TODO: Keep track of requests so we can verify caching behavior.
+      // Keep track of requests so we can verify caching behavior.
       httpRequestUrls = [];
       mockBackend.connections.subscribe((connection: any) => {
         const url = connection.request.url;
@@ -119,7 +119,7 @@ export function main() {
       });
 
       it('should use alternate icon font if set', (done: () => void) => {
-        mdIconProvider.setDefaultFontSetClass('myfont');
+        mdIconRegistry.setDefaultFontSetClass('myfont');
         return builder.createAsync(MdIconLigatureTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -180,8 +180,8 @@ export function main() {
       });
 
       it('should register icon URLs by name', (done: () => void) => {
-        mdIconProvider.addIcon('fluffy', 'cat.svg');
-        mdIconProvider.addIcon('fido', 'dog.svg');
+        mdIconRegistry.addIcon('fluffy', 'cat.svg');
+        mdIconRegistry.addIcon('fido', 'dog.svg');
         return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -227,7 +227,7 @@ export function main() {
       });
 
       it('should extract icon from SVG icon set', (done: () => void) => {
-        mdIconProvider.addIconSet('farm', 'farm-set-1.svg');
+        mdIconRegistry.addIconSet('farm', 'farm-set-1.svg');
         return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -272,9 +272,9 @@ export function main() {
       });
 
       it('should allow multiple icon sets in a namespace', (done: () => void) => {
-        mdIconProvider.addIconSet('farm', 'farm-set-1.svg');
-        mdIconProvider.addIconSet('farm', 'farm-set-2.svg');
-        mdIconProvider.addIconSet('arrows', 'arrow-set.svg');
+        mdIconRegistry.addIconSet('farm', 'farm-set-1.svg');
+        mdIconRegistry.addIconSet('farm', 'farm-set-2.svg');
+        mdIconRegistry.addIconSet('arrows', 'arrow-set.svg');
         return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -327,8 +327,8 @@ export function main() {
 
     describe('custom fonts', () => {
       it('should apply CSS classes for custom font and icon', (done: () => void) => {
-        mdIconProvider.registerFontSet('f1', 'font1');
-        mdIconProvider.registerFontSet('f2');
+        mdIconRegistry.registerFontSet('f1', 'font1');
+        mdIconRegistry.registerFontSet('f2');
         return builder.createAsync(MdIconCustomFontCssTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index fa06b51c26a2..cc31d302e2fa 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -16,8 +16,8 @@ import {
 import {NgClass} from 'angular2/common';
 
 import {
-  MdIconProvider,
-} from './icon-provider';
+  MdIconRegistry,
+} from './icon-registry';
 
 @Component({
   template: '<ng-content></ng-content>',
@@ -35,17 +35,17 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
   @Input() fontSet: string;
   @Input() fontIcon: string;
   @Input() alt: string;
-  
+
   @Input('aria-label') ariaLabelFromParent: string = '';
-  
+
   private _previousFontSetClass: string;
   private _previousFontIconClass: string;
-    
+
   constructor(
       private _element: ElementRef,
       private _renderer: Renderer,
       private _changeDetectorRef: ChangeDetectorRef,
-      private _mdIconProvider: MdIconProvider) {
+      private _mdIconRegistry: MdIconRegistry) {
   }
 
   /**
@@ -75,13 +75,13 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
     // Only update the inline SVG icon if the inputs changed, to avoid unnecessary DOM operations.
     if (changedInputs.indexOf('svgIcon') != -1 || changedInputs.indexOf('svgSrc') != -1) {
       if (this.svgIcon) {
-        const [iconSet, iconName] = this._splitIconName(this.svgIcon);
-        this._mdIconProvider.loadIconFromSetByName(iconSet, iconName)
+        const [namespace, iconName] = this._splitIconName(this.svgIcon);
+        this._mdIconRegistry.loadIconFromNamespaceByName(namespace, iconName)
           .subscribe(
           (svg: SVGElement) => this._setSvgElement(svg),
           (err: any) => console.log(`Error retrieving icon: ${err}`));
       } else if (this.svgSrc) {
-        this._mdIconProvider.loadIconFromUrl(this.svgSrc)
+        this._mdIconRegistry.loadIconFromUrl(this.svgSrc)
           .subscribe(
           (svg: SVGElement) => this._setSvgElement(svg),
           (err: any) => console.log(`Error retrieving icon: ${err}`));
@@ -114,7 +114,7 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
         this._changeDetectorRef.detectChanges();
       }
   }
-  
+
   private _getAriaLabel() {
     // If the parent provided an aria-label attribute value, use it as-is. Otherwise look for a
     // reasonable value from the alt attribute, font icon name, SVG icon name, or (for ligatures)
@@ -141,7 +141,7 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
   private _usingFontIcon(): boolean {
     return !(this.svgIcon || this.svgSrc);
   }
-  
+
   private _setSvgElement(svg: SVGElement) {
     // Can we use Renderer here somehow?
     const layoutElement = this._element.nativeElement;
@@ -155,8 +155,8 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
     }
     const elem = this._element.nativeElement;
     const fontSetClass = this.fontSet ?
-        this._mdIconProvider.classNameForFontAlias(this.fontSet) :
-        this._mdIconProvider.getDefaultFontSetClass();
+        this._mdIconRegistry.classNameForFontAlias(this.fontSet) :
+        this._mdIconRegistry.getDefaultFontSetClass();
     if (fontSetClass != this._previousFontSetClass) {
       if (this._previousFontSetClass) {
         this._renderer.setElementClass(elem, this._previousFontSetClass, false);
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
index a262bb901e8e..a5d8fe51a68e 100644
--- a/src/demo-app/icon/icon-demo.ts
+++ b/src/demo-app/icon/icon-demo.ts
@@ -1,20 +1,20 @@
 import {Component, ViewEncapsulation} from 'angular2/core';
 import {MdIcon} from '../../components/icon/icon';
-import {MdIconProvider} from '../../components/icon/icon-provider';
+import {MdIconRegistry} from '../../components/icon/icon-registry';
 
 @Component({
     selector: 'icon-demo',
     templateUrl: 'demo-app/icon/icon-demo.html',
     styleUrls: ['demo-app/icon/icon-demo.css'],
     directives: [MdIcon],
-    viewProviders: [MdIconProvider],
+    viewProviders: [MdIconRegistry],
     encapsulation: ViewEncapsulation.None,
 })
 export class IconDemo {
   showAndroid = true;
 
-  constructor(mdIconProvider: MdIconProvider) {
-      mdIconProvider
+  constructor(mdIconRegistry: MdIconRegistry) {
+      mdIconRegistry
           .addIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
           .addIconSet('core', '/demo-app/icon/assets/core-icon-set.svg')
           .registerFontSet('fontawesome', 'fa');
diff --git a/src/main.ts b/src/main.ts
index 8a4595b8410e..078c9ac86b15 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,7 @@ import {bootstrap} from 'angular2/platform/browser';
 import {DemoApp} from './demo-app/demo-app';
 import {HTTP_PROVIDERS} from 'angular2/http';
 import {ROUTER_PROVIDERS} from 'angular2/router';
-import {MdIconProvider} from './components/icon/icon-provider';
+import {MdIconRegistry} from './components/icon/icon-registry';
 import {OVERLAY_CONTAINER_TOKEN} from './core/overlay/overlay';
 import {MdLiveAnnouncer} from './core/live-announcer/live-announcer';
 import {provide} from 'angular2/core';
@@ -15,6 +15,6 @@ bootstrap(DemoApp, [
   MdLiveAnnouncer,
   provide(OVERLAY_CONTAINER_TOKEN, {useValue: createOverlayContainer()}),
   HTTP_PROVIDERS,
-  MdIconProvider,
+  MdIconRegistry,
   Renderer,
 ]);

From 154b5e048a3865995bf1302e033ebafee83febb0 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Wed, 13 Apr 2016 00:55:07 -0400
Subject: [PATCH 21/37] Fix bug copying icons out of icon sets, and use
 Observable.share() correctly so that in-progress HTTP requests can be
 coalesced.

---
 src/components/icon/icon-registry.ts | 23 +++++++++--------------
 src/components/icon/icon.ts          | 14 ++++++--------
 src/demo-app/icon/icon-demo.html     |  1 +
 3 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/components/icon/icon-registry.ts b/src/components/icon/icon-registry.ts
index 4e8010f85159..81c3aaef554e 100644
--- a/src/components/icon/icon-registry.ts
+++ b/src/components/icon/icon-registry.ts
@@ -172,26 +172,20 @@ export class MdIconRegistry {
   }
 
   private _fetchUrl(url: string): Observable<string> {
-    // FIXME: This is trying to avoid sending a duplicate request for a URL when there is already
-    // a request in progress for that URL. But it's not working; even though we return the cached
-    // Observable, a second request is still sent.
-    // Observable.share seems like it should work, but doesn't seem to have any effect.
-    // (http://xgrommx.github.io/rx-book/content/observable/observable_instance_methods/share.html)
-    console.log('*** fetchUrl: ' + url);
+    // Store in-progress fetches to avoid sending a duplicate request for a URL when there is
+    // already a request in progress for that URL. It's necessary to call share() on the
+    // Observable returned by http.get() so that multiple subscribers don't cause multiple XHRs.
     if (this._inProgressUrlFetches.has(url)) {
-      console.log("*** Using existing request");
       return this._inProgressUrlFetches.get(url);
     }
-    console.log(`*** Sending request for ${url}`);
     const req = this._http.get(url)
-        .do((response) => {
-          console.log(`*** Got response for ${url}`);
-          console.log('*** Removing request: ' + url);
+        .map((response) => response.text())
+        .finally(() => {
           this._inProgressUrlFetches.delete(url);
         })
-        .map((response) => response.text());
+        .share();
     this._inProgressUrlFetches.set(url, req);
-    return req.share();
+    return req;
   }
 
   private _loadIconFromConfig(config: IconConfig): Observable<SVGElement> {
@@ -235,7 +229,8 @@ export class MdIconRegistry {
     // have to create an empty SVG node using innerHTML and append its content.
     // http://stackoverflow.com/questions/23003278/svg-innerhtml-in-firefox-can-not-display
     const svg = this._svgElementFromString('<svg></svg>');
-    svg.appendChild(iconNode);
+    // Clone the node so we don't remove it from the parent icon set element.
+    svg.appendChild(iconNode.cloneNode(true));
     this._setSvgAttributes(svg, config);
     return svg;
   }
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index cc31d302e2fa..a0dc89738c7b 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -76,15 +76,13 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
     if (changedInputs.indexOf('svgIcon') != -1 || changedInputs.indexOf('svgSrc') != -1) {
       if (this.svgIcon) {
         const [namespace, iconName] = this._splitIconName(this.svgIcon);
-        this._mdIconRegistry.loadIconFromNamespaceByName(namespace, iconName)
-          .subscribe(
-          (svg: SVGElement) => this._setSvgElement(svg),
-          (err: any) => console.log(`Error retrieving icon: ${err}`));
+        this._mdIconRegistry.loadIconFromNamespaceByName(namespace, iconName).subscribe(
+            (svg: SVGElement) => this._setSvgElement(svg),
+            (err: any) => console.log(`Error retrieving icon: ${err}`));
       } else if (this.svgSrc) {
-        this._mdIconRegistry.loadIconFromUrl(this.svgSrc)
-          .subscribe(
-          (svg: SVGElement) => this._setSvgElement(svg),
-          (err: any) => console.log(`Error retrieving icon: ${err}`));
+        this._mdIconRegistry.loadIconFromUrl(this.svgSrc).subscribe(
+            (svg: SVGElement) => this._setSvgElement(svg),
+            (err: any) => console.log(`Error retrieving icon: ${err}`));
       }
     }
     if (this._usingFontIcon()) {
diff --git a/src/demo-app/icon/icon-demo.html b/src/demo-app/icon/icon-demo.html
index 0de32df13b23..1dc527be3927 100644
--- a/src/demo-app/icon/icon-demo.html
+++ b/src/demo-app/icon/icon-demo.html
@@ -17,6 +17,7 @@
   From icon set:
   <md-icon svgIcon="core:alarm"></md-icon>
   <md-icon svgIcon="core:accessibility"></md-icon>
+  <md-icon svgIcon="core:alarm"></md-icon>
 </p>
 
 <p>

From cef127755deee47dc9c867bd8dc91cd29c6c1428 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Wed, 13 Apr 2016 01:00:13 -0400
Subject: [PATCH 22/37] Remove unused imports.

---
 src/components/icon/icon-registry.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/icon/icon-registry.ts b/src/components/icon/icon-registry.ts
index 81c3aaef554e..122fa48bce1e 100644
--- a/src/components/icon/icon-registry.ts
+++ b/src/components/icon/icon-registry.ts
@@ -1,6 +1,6 @@
-import {Injectable, Renderer} from 'angular2/core';
-import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
-import {AsyncSubject, Observer, Observable} from 'rxjs/Rx';
+import {Injectable} from 'angular2/core';
+import {Http} from 'angular2/http';
+import {Observable} from 'rxjs/Rx';
 
 /**
   *  Configuration for an icon, possibly including the cached SVG element.

From 30f8ccee78f9c33d5fd92053ab2690ab9dd3f4c6 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Wed, 13 Apr 2016 20:30:10 -0400
Subject: [PATCH 23/37] Remove unnecessary cloneNode.

---
 src/components/icon/icon-registry.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/icon/icon-registry.ts b/src/components/icon/icon-registry.ts
index 122fa48bce1e..8f4b8e3970f6 100644
--- a/src/components/icon/icon-registry.ts
+++ b/src/components/icon/icon-registry.ts
@@ -50,12 +50,12 @@ export class MdIconRegistry {
     return this;
   }
 
-  public addIconSet(setName: string, url: string, viewBoxSize=0): this {
+  public addIconSet(namespace: string, url: string, viewBoxSize=0): this {
     const config = new IconConfig(url, viewBoxSize || this._defaultViewBoxSize);
-    if (this._iconSetConfigs.has(setName)) {
-      this._iconSetConfigs.get(setName).push(config);
+    if (this._iconSetConfigs.has(namespace)) {
+      this._iconSetConfigs.get(namespace).push(config);
     } else {
-      this._iconSetConfigs.set(setName, [config]);
+      this._iconSetConfigs.set(namespace, [config]);
     }
     return this;
   }
@@ -107,7 +107,7 @@ export class MdIconRegistry {
         // We could cache namedSvg in _iconConfigs, but since we have to make a copy every
         // time anyway, there's probably not much advantage compared to just always extracting
         // it from the icon set.
-        return Observable.of(namedIcon.cloneNode(true));
+        return Observable.of(namedIcon);
       }
       // Not found in any cached icon sets. If there are icon sets with URLs that we haven't
       // fetched, fetch them now and look for iconName in the results.

From 73a9a3faf45b99f9292bdbbd6e02b4ec88eb4b13 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Fri, 15 Apr 2016 16:03:26 -0400
Subject: [PATCH 24/37] Remove custom viewBox size.

---
 src/components/icon/icon-registry.ts | 36 ++++++++++------------------
 src/components/icon/icon.spec.ts     |  9 ++++---
 src/demo-app/icon/icon-demo.ts       |  2 +-
 3 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/components/icon/icon-registry.ts b/src/components/icon/icon-registry.ts
index 8f4b8e3970f6..702996a0393c 100644
--- a/src/components/icon/icon-registry.ts
+++ b/src/components/icon/icon-registry.ts
@@ -3,11 +3,11 @@ import {Http} from 'angular2/http';
 import {Observable} from 'rxjs/Rx';
 
 /**
-  *  Configuration for an icon, possibly including the cached SVG element.
+  *  Configuration for an icon, including the URL and possibly the cached SVG element.
   */
 class IconConfig {
   svgElement: SVGElement = null;
-  constructor(public url: string, public viewBoxSize: number) {
+  constructor(public url: string) {
   }
 }
 
@@ -29,29 +29,31 @@ export class MdIconRegistry {
 
   private _inProgressUrlFetches = new Map<string, Observable<string>>();
 
-  private _defaultViewBoxSize = 24;
   private _defaultFontSetClass = 'material-icons';
 
   constructor(private _http: Http) {
   }
 
-  public addIcon(iconName: string, url: string, viewBoxSize:number=0): this {
-    return this.addIconInNamespace('', iconName, url, viewBoxSize);
+  public addIcon(iconName: string, url: string): this {
+    return this.addIconInNamespace('', iconName, url);
   }
 
-  public addIconInNamespace(
-      namespace: string, iconName: string, url: string, viewBoxSize:number=0): this {
+  public addIconInNamespace(namespace: string, iconName: string, url: string): this {
     let iconSetMap = this._iconConfigs.get(namespace);
     if (!iconSetMap) {
       iconSetMap = new Map<string, IconConfig>();
       this._iconConfigs.set(namespace, iconSetMap);
     }
-    iconSetMap.set(iconName, new IconConfig(url, viewBoxSize || this._defaultViewBoxSize));
+    iconSetMap.set(iconName, new IconConfig(url));
     return this;
   }
 
-  public addIconSet(namespace: string, url: string, viewBoxSize=0): this {
-    const config = new IconConfig(url, viewBoxSize || this._defaultViewBoxSize);
+  public addIconSet(url: string): this {
+      return this.addIconSetInNamespace('', url);
+  }
+
+  public addIconSetInNamespace(namespace: string, url: string): this {
+    const config = new IconConfig(url);
     if (this._iconSetConfigs.has(namespace)) {
       this._iconSetConfigs.get(namespace).push(config);
     } else {
@@ -65,15 +67,6 @@ export class MdIconRegistry {
     return this;
   }
 
-  public setDefaultViewBoxSize(size: number) {
-    this._defaultViewBoxSize = size;
-    return this;
-  }
-
-  public getDefaultViewBoxSize(): number {
-    return this._defaultViewBoxSize;
-  }
-
   public setDefaultFontSetClass(className: string) {
     this._defaultFontSetClass = className;
     return this;
@@ -163,7 +156,7 @@ export class MdIconRegistry {
     if (this._cachedIconsByUrl.has(url)) {
       return Observable.of(this._cachedIconsByUrl.get(url).cloneNode(true));
     }
-    return this._loadIconFromConfig(new IconConfig(url, this._defaultViewBoxSize))
+    return this._loadIconFromConfig(new IconConfig(url))
         .do((svg: SVGElement) => this._cachedIconsByUrl.set(url, svg));
   }
 
@@ -205,7 +198,6 @@ export class MdIconRegistry {
   }
 
   private _setSvgAttributes(svg: SVGElement, config: IconConfig) {
-    const viewBoxSize = config.viewBoxSize || this._defaultViewBoxSize;
     if (!svg.getAttribute('xmlns')) {
       svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
     }
@@ -213,8 +205,6 @@ export class MdIconRegistry {
     svg.setAttribute('height', '100%');
     svg.setAttribute('width', '100%');
     svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-    svg.setAttribute('viewBox',
-        svg.getAttribute('viewBox') || ('0 0 ' + viewBoxSize + ' ' + viewBoxSize));
     svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable.
   }
 
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index f9d2038d956b..c9b9b66cd272 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -148,7 +148,6 @@ export function main() {
           // Default attributes should be set.
           expect(svgElement.getAttribute('height')).toBe('100%');
           expect(svgElement.getAttribute('height')).toBe('100%');
-          expect(svgElement.getAttribute('viewBox')).toBe('0 0 24 24');
           // Make sure SVG content is taken from response.
           expect(svgElement.children.length).toBe(1);
           pathElement = svgElement.children[0];
@@ -227,7 +226,7 @@ export function main() {
       });
 
       it('should extract icon from SVG icon set', (done: () => void) => {
-        mdIconRegistry.addIconSet('farm', 'farm-set-1.svg');
+        mdIconRegistry.addIconSetInNamespace('farm', 'farm-set-1.svg');
         return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -272,9 +271,9 @@ export function main() {
       });
 
       it('should allow multiple icon sets in a namespace', (done: () => void) => {
-        mdIconRegistry.addIconSet('farm', 'farm-set-1.svg');
-        mdIconRegistry.addIconSet('farm', 'farm-set-2.svg');
-        mdIconRegistry.addIconSet('arrows', 'arrow-set.svg');
+        mdIconRegistry.addIconSetInNamespace('farm', 'farm-set-1.svg');
+        mdIconRegistry.addIconSetInNamespace('farm', 'farm-set-2.svg');
+        mdIconRegistry.addIconSetInNamespace('arrows', 'arrow-set.svg');
         return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
index a5d8fe51a68e..cf439d97d8ff 100644
--- a/src/demo-app/icon/icon-demo.ts
+++ b/src/demo-app/icon/icon-demo.ts
@@ -16,7 +16,7 @@ export class IconDemo {
   constructor(mdIconRegistry: MdIconRegistry) {
       mdIconRegistry
           .addIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
-          .addIconSet('core', '/demo-app/icon/assets/core-icon-set.svg')
+          .addIconSetInNamespace('core', '/demo-app/icon/assets/core-icon-set.svg')
           .registerFontSet('fontawesome', 'fa');
   }
 }

From e87af2e7c189966eac78ad516b00ab4ddd847a0c Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Sun, 17 Apr 2016 22:05:48 -0400
Subject: [PATCH 25/37] Updated for PR comments.

---
 src/components/icon/icon-registry.ts       | 390 ++++++++++++++-------
 src/components/icon/icon.scss              |  14 +-
 src/components/icon/icon.spec.ts           |  34 +-
 src/components/icon/icon.ts                |  50 ++-
 src/demo-app/icon/assets/core-icon-set.svg |  62 ++--
 src/demo-app/icon/icon-demo.ts             |   6 +-
 6 files changed, 366 insertions(+), 190 deletions(-)

diff --git a/src/components/icon/icon-registry.ts b/src/components/icon/icon-registry.ts
index 702996a0393c..7e48af41bd7e 100644
--- a/src/components/icon/icon-registry.ts
+++ b/src/components/icon/icon-registry.ts
@@ -1,59 +1,108 @@
 import {Injectable} from 'angular2/core';
+import {BaseException} from 'angular2/src/facade/exceptions';
 import {Http} from 'angular2/http';
 import {Observable} from 'rxjs/Rx';
 
+
+/** Exception thrown when attmepting to load an icon with a name that cannot be found. */
+export class MdIconNameNotFoundException extends BaseException {
+  constructor(iconName: string) {
+      super(`Unable to find icon with the name "${name}"`);
+  }
+}
+
 /**
-  *  Configuration for an icon, including the URL and possibly the cached SVG element.
+ * Exception thrown when attmepting to load SVG content that does not contain the expected
+ * <svg> tag.
+ */
+export class MdIconSvgTagNotFoundException extends BaseException {
+  constructor() {
+      super('<svg> tag not found');
+  }
+}
+
+/**
+  * Configuration for an icon, including the URL and possibly the cached SVG element.
+  * @internal
   */
-class IconConfig {
+class SvgIconConfig {
   svgElement: SVGElement = null;
   constructor(public url: string) {
   }
 }
 
+/**
+ * Service to register and display icons used by the <md-icon> component.
+ * - Registers icon URLs by namespace and name.
+ * - Registers icon set URLs by namespace.
+ * - Registers aliases for CSS classes, for use with icon fonts.
+ * - Loads icons from URLs and extracts individual icons from icon sets.
+ */
 @Injectable()
 export class MdIconRegistry {
-  // IconConfig objects and cached SVG elements for individual icons.
-  // First level of cache is namespace (which is the empty string if not specified).
-  // Second level is the icon name within the namespace.
-  private _iconConfigs = new Map<string, Map<string, IconConfig>>();
+  /**
+   * URLs and cached SVG elements for individual icons. Keys are of the format "[namespace]:[icon]".
+   */
+  private _svgIconConfigs = new Map<string, SvgIconConfig>();
 
-  // IconConfig objects and cached SVG elements for icon sets.
-  // Multiple icon sets can be registered under the same namespace.
-  private _iconSetConfigs = new Map<string, IconConfig[]>();
+  /**
+   * SvgIconConfig objects and cached SVG elements for icon sets, keyed by namespace.
+   * Multiple icon sets can be registered under the same namespace.
+   */
+  private _iconSetConfigs = new Map<string, SvgIconConfig[]>();
 
-  // Cache for icons loaded by direct URLs.
+  /**
+   * Cache for icons loaded by direct URLs.
+   */
   private _cachedIconsByUrl = new Map<string, SVGElement>();
 
-  private _fontClassNamesByAlias = new Map<string, string>();
-
+  /**
+   * In-progress icon fetches. Used to coalesce multiple requests to the same URL.
+   */
   private _inProgressUrlFetches = new Map<string, Observable<string>>();
 
+  /**
+   * Map from font identifiers to their CSS class names. Used for icon fonts.
+   */
+  private _fontCssClassesByAlias = new Map<string, string>();
+
+  /**
+   * The CSS class to apply when an <md-icon> component has no icon name, url, or font specified.
+   * The default 'material-icons' value assumes that the material icon font has been loaded as
+   * described at http://google.github.io/material-design-icons/#icon-font-for-the-web
+   */
   private _defaultFontSetClass = 'material-icons';
 
-  constructor(private _http: Http) {
-  }
+  constructor(private _http: Http) {}
 
-  public addIcon(iconName: string, url: string): this {
-    return this.addIconInNamespace('', iconName, url);
+  /**
+   * Registers an icon by URL in the default namespace.
+   */
+  addSvgIcon(iconName: string, url: string): this {
+    return this.addSvgIconInNamespace('', iconName, url);
   }
 
-  public addIconInNamespace(namespace: string, iconName: string, url: string): this {
-    let iconSetMap = this._iconConfigs.get(namespace);
-    if (!iconSetMap) {
-      iconSetMap = new Map<string, IconConfig>();
-      this._iconConfigs.set(namespace, iconSetMap);
-    }
-    iconSetMap.set(iconName, new IconConfig(url));
+  /**
+   * Registers an icon by URL in the specified namespace.
+   */
+  addSvgIconInNamespace(namespace: string, iconName: string, url: string): this {
+    const iconKey = namespace + ':' + iconName;
+    this._svgIconConfigs.set(iconKey, new SvgIconConfig(url));
     return this;
   }
 
-  public addIconSet(url: string): this {
-      return this.addIconSetInNamespace('', url);
+  /**
+   * Registers an icon set by URL in the default namespace.
+   */
+  addSvgIconSet(url: string): this {
+    return this.addSvgIconSetInNamespace('', url);
   }
 
-  public addIconSetInNamespace(namespace: string, url: string): this {
-    const config = new IconConfig(url);
+  /**
+   * Registers an icon set by URL in the specified namespace.
+   */
+  addSvgIconSetInNamespace(namespace: string, url: string): this {
+    const config = new SvgIconConfig(url);
     if (this._iconSetConfigs.has(namespace)) {
       this._iconSetConfigs.get(namespace).push(config);
     } else {
@@ -62,83 +111,145 @@ export class MdIconRegistry {
     return this;
   }
 
-  public registerFontSet(alias: string, className?: string): this {
-    this._fontClassNamesByAlias.set(alias, className || alias);
+  /**
+   * Defines an alias for a CSS class name to be used for icon fonts. Creating an mdIcon
+   * component with the alias as the fontSet input will cause the class name to be applied
+   * to the <md-icon> element.
+   */
+  registerFontClassAlias(alias: string, className = alias): this {
+    this._fontCssClassesByAlias.set(alias, className);
     return this;
   }
 
-  public setDefaultFontSetClass(className: string) {
+  /**
+   * Returns the CSS class name associated with the alias by a previous call to
+   * registerFontClassAlias. If no CSS class has been associated, returns the alias unmodified.
+   */
+  classNameForFontAlias(alias: string): string {
+    return this._fontCssClassesByAlias.get(alias) || alias;
+  }
+
+  /**
+   * Sets the CSS class name to be used for icon fonts when an <md-icon> component does not
+   * have a fontSet input value, and is not loading an icon by name or URL.
+   */
+  setDefaultFontSetClass(className: string) {
     this._defaultFontSetClass = className;
     return this;
   }
 
-  public getDefaultFontSetClass(): string {
+  /**
+   * Returns the CSS class name to be used for icon fonts when an <md-icon> component does not
+   * have a fontSet input value, and is not loading an icon by name or URL.
+   */
+  getDefaultFontSetClass(): string {
     return this._defaultFontSetClass;
   }
 
-  loadIconFromNamespaceByName(namespace: string, iconName: string): Observable<SVGElement> {
+  /**
+   * Returns an Observable that produces the icon (as an <svg> DOM element) from the given URL.
+   * The response from the URL may be cached so this will not always cause an HTTP request, but
+   * the produced element will always be a new copy of the originally fetched icon. (That is,
+   * it will not contain any modifications made to elements previously returned).
+   */
+  getSvgIconFromUrl(url: string): Observable<SVGElement> {
+    if (this._cachedIconsByUrl.has(url)) {
+      return Observable.of(this._cachedIconsByUrl.get(url).cloneNode(true));
+    }
+    return this._loadSvgIconFromConfig(new SvgIconConfig(url))
+        .do(svg => this._cachedIconsByUrl.set(url, svg))
+        .map(svg => svg.cloneNode(true));
+  }
+
+  /**
+   * Returns an Observable that produces the icon (as an <svg> DOM element) with the given name
+   * and namespace. The icon must have been previously registered with addIcon or addIconSet;
+   * if not, the Observable will throw an MdIconNameNotFoundException.
+   */
+  getNamedSvgIcon(name: string, namespace = ''): Observable<SVGElement> {
     // Return (copy of) cached icon if possible.
-    if (this._iconConfigs.has(namespace) && this._iconConfigs.get(namespace).has(iconName)) {
-      const config = this._iconConfigs.get(namespace).get(iconName);
-      if (config.svgElement) {
-        // We already have the SVG element for this icon, return a copy.
-        return Observable.of(config.svgElement.cloneNode(true));
-      } else {
-        // Fetch the icon from the config's URL, cache it, and return a copy.
-        return this._loadIconFromConfig(config)
-          .do((svg: SVGElement) => config.svgElement = svg)
-          .map((svg: SVGElement) => svg.cloneNode(true));
-      }
+    const iconKey = namespace + ':' + name;
+    if (this._svgIconConfigs.has(iconKey)) {
+      return this._getSvgFromConfig(this._svgIconConfigs.get(iconKey));
     }
-    // See if we have any icon sets registered for the set name.
+    // See if we have any icon sets registered for the namespace.
     const iconSetConfigs = this._iconSetConfigs.get(namespace);
     if (iconSetConfigs) {
-      // For all the icon set SVG elements we've fetched, see if any contain an icon with the
-      // requested name.
-      const namedIcon = this._extractIconWithNameFromAnySet(iconName, iconSetConfigs);
-      if (namedIcon) {
-        // We could cache namedSvg in _iconConfigs, but since we have to make a copy every
-        // time anyway, there's probably not much advantage compared to just always extracting
-        // it from the icon set.
-        return Observable.of(namedIcon);
-      }
-      // Not found in any cached icon sets. If there are icon sets with URLs that we haven't
-      // fetched, fetch them now and look for iconName in the results.
-      const iconSetFetchRequests = <[Observable<SVGElement>]>[];
-      iconSetConfigs.forEach((setConfig) => {
-        if (!setConfig.svgElement) {
-          iconSetFetchRequests.push(
-              this._loadIconSetFromConfig(setConfig)
-                  .catch((err: any, source: any, caught: any): Observable<SVGElement> => {
-                    // Swallow errors fetching individual URLs so the combined Observable won't
-                    // necessarily fail.
-                    console.log(`Loading icon set URL: ${setConfig.url} failed with error: ${err}`);
-                    return Observable.of(null);
-                  })
-                  .do((svg: SVGElement) => {
-                    // Cache SVG element.
-                    if (svg) {
-                      setConfig.svgElement = svg;
-                    }
-                  })
-          );
-        }
-      });
-      // Fetch all the icon set URLs. When the requests complete, every IconSet should have a
-      // cached SVG element (unless the request failed), and we can check again for the icon.
-      return Observable.forkJoin(iconSetFetchRequests)
+      return this._getSvgFromIconSetConfigs(name, this._iconSetConfigs.get(namespace));
+    }
+    return Observable.throw(Error(`Unknown icon name: ${name} in namespace: ${namespace}`));
+  }
+
+  /**
+   * Returns the cached icon for a SvgIconConfig if available, or fetches it from its URL if not.
+   */
+  private _getSvgFromConfig(config: SvgIconConfig): Observable<SVGElement> {
+    if (config.svgElement) {
+      // We already have the SVG element for this icon, return a copy.
+      return Observable.of(config.svgElement.cloneNode(true));
+    } else {
+      // Fetch the icon from the config's URL, cache it, and return a copy.
+      return this._loadSvgIconFromConfig(config)
+          .do((svg: SVGElement) => config.svgElement = svg)
+          .map((svg: SVGElement) => svg.cloneNode(true));
+    }
+  }
+
+  /**
+   * Attempts to find an icon with the specified name in any of the SVG icon sets.
+   * First searches the available cached icons for a nested element with a matching name, and
+   * if found copies the element to a new <svg> element. If not found, fetches all icon sets
+   * that have not been cached, and searches again after all fetches are completed.
+   * The returned Observable produces the SVG element if possible, and throws
+   * MdIconNameNotFoundException if no icon with the specified name can be found.
+   */
+  private _getSvgFromIconSetConfigs(name: string, iconSetConfigs: SvgIconConfig[]):
+      Observable<SVGElement> {
+    // For all the icon set SVG elements we've fetched, see if any contain an icon with the
+    // requested name.
+    const namedIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs);
+    if (namedIcon) {
+      // We could cache namedSvg in _svgIconConfigs, but since we have to make a copy every
+      // time anyway, there's probably not much advantage compared to just always extracting
+      // it from the icon set.
+      return Observable.of(namedIcon);
+    }
+    // Not found in any cached icon sets. If there are icon sets with URLs that we haven't
+    // fetched, fetch them now and look for iconName in the results.
+    const iconSetFetchRequests: Observable<SVGElement>[] = iconSetConfigs
+        .filter(iconSetConfig => !iconSetConfig.svgElement)
+        .map(iconSetConfig =>
+            this._loadSvgIconSetFromConfig(iconSetConfig)
+                .catch((err: any, source: any, caught: any): Observable<SVGElement> => {
+                  // Swallow errors fetching individual URLs so the combined Observable won't
+                  // necessarily fail.
+                  console.log(`Loading icon set URL: ${iconSetConfig.url} failed: ${err}`);
+                  return Observable.of(null);
+                })
+                .do((svg: SVGElement) => {
+                  // Cache SVG element.
+                  if (svg) {
+                    iconSetConfig.svgElement = svg;
+                  }
+                }));
+    // Fetch all the icon set URLs. When the requests complete, every IconSet should have a
+    // cached SVG element (unless the request failed), and we can check again for the icon.
+    return Observable.forkJoin(iconSetFetchRequests)
         .map((ignoredResults: any) => {
-          const foundIcon = this._extractIconWithNameFromAnySet(iconName, iconSetConfigs);
+          const foundIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs);
           if (!foundIcon) {
-            throw Error(`Failed to find icon name: ${iconName} in namespace: ${namespace}`);
+            throw new MdIconNameNotFoundException(name);
           }
           return foundIcon;
         });
-    }
-    return Observable.throw(Error(`Unknown icon name: ${iconName} in namespace: ${namespace}`));
   }
 
-  private _extractIconWithNameFromAnySet(iconName: string, setConfigs: IconConfig[]): SVGElement {
+  /**
+   * Searches the cached SVG elements for the given icon sets for a nested icon element whose "id"
+   * tag matches the specified name. If found, copies the nested element to a new SVG element and
+   * returns it. Returns null if no matching element is found.
+   */
+  private _extractIconWithNameFromAnySet(iconName: string, setConfigs: SvgIconConfig[]): SVGElement {
     // Iterate backwards, so icon sets added later have precedence.
     for (let i = setConfigs.length - 1; i >= 0; i--) {
       const config = setConfigs[i];
@@ -152,68 +263,49 @@ export class MdIconRegistry {
     return null;
   }
 
-  loadIconFromUrl(url: string): Observable<SVGElement> {
-    if (this._cachedIconsByUrl.has(url)) {
-      return Observable.of(this._cachedIconsByUrl.get(url).cloneNode(true));
-    }
-    return this._loadIconFromConfig(new IconConfig(url))
-        .do((svg: SVGElement) => this._cachedIconsByUrl.set(url, svg));
-  }
-
-  classNameForFontAlias(alias: string): string {
-    return this._fontClassNamesByAlias.get(alias) || alias;
-  }
-
-  private _fetchUrl(url: string): Observable<string> {
-    // Store in-progress fetches to avoid sending a duplicate request for a URL when there is
-    // already a request in progress for that URL. It's necessary to call share() on the
-    // Observable returned by http.get() so that multiple subscribers don't cause multiple XHRs.
-    if (this._inProgressUrlFetches.has(url)) {
-      return this._inProgressUrlFetches.get(url);
-    }
-    const req = this._http.get(url)
-        .map((response) => response.text())
-        .finally(() => {
-          this._inProgressUrlFetches.delete(url);
-        })
-        .share();
-    this._inProgressUrlFetches.set(url, req);
-    return req;
-  }
-
-  private _loadIconFromConfig(config: IconConfig): Observable<SVGElement> {
+  /**
+   * Loads the content of the icon URL specified in the SvgIconConfig and creates an SVG element
+   * from it.
+   */
+  private _loadSvgIconFromConfig(config: SvgIconConfig): Observable<SVGElement> {
     return this._fetchUrl(config.url)
         .map(svgText => this._createSvgElementForSingleIcon(svgText, config));
   }
 
-  private _loadIconSetFromConfig(config: IconConfig): Observable<SVGElement> {
+  /**
+   * Loads the content of the icon set URL specified in the SvgIconConfig and creates an SVG element
+   * from it.
+   */
+  private _loadSvgIconSetFromConfig(config: SvgIconConfig): Observable<SVGElement> {
     return this._fetchUrl(config.url)
         .map((svgText) => this._svgElementFromString(svgText));
   }
 
-  private _createSvgElementForSingleIcon(responseText: string, config: IconConfig): SVGElement {
+  /**
+   * Creates a DOM element from the given SVG string, and adds default attributes.
+   */
+  private _createSvgElementForSingleIcon(responseText: string, config: SvgIconConfig): SVGElement {
     const svg = this._svgElementFromString(responseText);
     this._setSvgAttributes(svg, config);
     return svg;
   }
 
-  private _setSvgAttributes(svg: SVGElement, config: IconConfig) {
-    if (!svg.getAttribute('xmlns')) {
-      svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    }
-    svg.setAttribute('fit', '');
-    svg.setAttribute('height', '100%');
-    svg.setAttribute('width', '100%');
-    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-    svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable.
-  }
-
+  /**
+   * Searches the cached element of the given SvgIconConfig for a nested icon element whose "id"
+   * tag matches the specified name. If found, copies the nested element to a new SVG element and
+   * returns it. Returns null if no matching element is found.
+   */
   private _extractSvgIconFromSet(
-      iconSet: SVGElement, iconName: string, config: IconConfig): SVGElement {
+      iconSet: SVGElement, iconName: string, config: SvgIconConfig): SVGElement {
     const iconNode = iconSet.querySelector('#' + iconName);
     if (!iconNode) {
       return null;
     }
+    // If the icon node is itself an <svg> node, clone and return it directly. If not, set it as
+    // the content of a new <svg> node.
+    if (iconNode.tagName.toLowerCase() == 'svg') {
+      return this._setSvgAttributes(<SVGElement>iconNode.cloneNode(true), config);
+    }
     // createElement('SVG') doesn't work as expected; the DOM ends up with
     // the correct nodes, but the SVG content doesn't render. Instead we
     // have to create an empty SVG node using innerHTML and append its content.
@@ -221,10 +313,12 @@ export class MdIconRegistry {
     const svg = this._svgElementFromString('<svg></svg>');
     // Clone the node so we don't remove it from the parent icon set element.
     svg.appendChild(iconNode.cloneNode(true));
-    this._setSvgAttributes(svg, config);
-    return svg;
+    return this._setSvgAttributes(svg, config);
   }
 
+  /**
+   * Creates a DOM element from the given SVG string.
+   */
   private _svgElementFromString(str: string): SVGElement {
     // TODO: Is there a better way than innerHTML? Renderer doesn't appear to have a method for
     // creating an element from an HTML string.
@@ -232,8 +326,44 @@ export class MdIconRegistry {
     div.innerHTML = str;
     const svg = <SVGElement>div.querySelector('svg');
     if (!svg) {
-      throw Error('<svg> tag not found');
+      throw new MdIconSvgTagNotFoundException();
+    }
+    return svg;
+  }
+
+  /**
+   * Sets the default attributes for an SVG element to be used as an icon.
+   */
+  private _setSvgAttributes(svg: SVGElement, config: SvgIconConfig): SVGElement {
+    if (!svg.getAttribute('xmlns')) {
+      svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
     }
+    svg.setAttribute('fit', '');
+    svg.setAttribute('height', '100%');
+    svg.setAttribute('width', '100%');
+    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+    svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable.
     return svg;
   }
+
+  /**
+   * Returns an Observable which produces the string contents of the given URL. Results may be
+   * cached, so future calls with the same URL may not cause another HTTP request.
+   */
+  private _fetchUrl(url: string): Observable<string> {
+    // Store in-progress fetches to avoid sending a duplicate request for a URL when there is
+    // already a request in progress for that URL. It's necessary to call share() on the
+    // Observable returned by http.get() so that multiple subscribers don't cause multiple XHRs.
+    if (this._inProgressUrlFetches.has(url)) {
+      return this._inProgressUrlFetches.get(url);
+    }
+    const req = this._http.get(url)
+        .map((response) => response.text())
+        .finally(() => {
+          this._inProgressUrlFetches.delete(url);
+        })
+        .share();
+    this._inProgressUrlFetches.set(url, req);
+    return req;
+  }
 }
diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
index 3c1128b3e87b..1fa23d71bc13 100644
--- a/src/components/icon/icon.scss
+++ b/src/components/icon/icon.scss
@@ -9,11 +9,11 @@ This works because we're using ViewEncapsulation.None. If we used the default
 encapsulation, the selector would need to be ":host".
 */
 md-icon {
-    background-repeat: no-repeat;
-    display: inline-block;
-    fill: currentColor;
-    height: $md-icon-size;
-    margin: auto;
-    vertical-align: middle;
-    width: $md-icon-size;
+  background-repeat: no-repeat;
+  display: inline-block;
+  fill: currentColor;
+  height: $md-icon-size;
+  margin: auto;
+  vertical-align: middle;
+  width: $md-icon-size;
 }
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index c9b9b66cd272..4c7b610436cf 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -85,8 +85,10 @@ export function main() {
               status: 200,
               body: `
                 <svg>
-                  <g id="cow"><path d="moo moo"></path></g>
-                  <g id="sheep"><path d="baa"></path></g>
+                  <defs>
+                    <g id="cow"><path d="moo moo"></path></g>
+                    <g id="sheep"><path d="baa"></path></g>
+                  </defs>
                 </svg>
               `,
             })));
@@ -96,8 +98,10 @@ export function main() {
               status: 200,
               body: `
                 <svg>
-                  <g id="left"><path d="left"></path></g>
-                  <g id="right"><path d="right"></path></g>
+                  <defs>
+                    <svg id="left"><path d="left"></path></g>
+                    <svg id="right"><path d="right"></path></g>
+                  </defs>
                 </svg>
               `,
             })));
@@ -179,8 +183,8 @@ export function main() {
       });
 
       it('should register icon URLs by name', (done: () => void) => {
-        mdIconRegistry.addIcon('fluffy', 'cat.svg');
-        mdIconRegistry.addIcon('fido', 'dog.svg');
+        mdIconRegistry.addSvgIcon('fluffy', 'cat.svg');
+        mdIconRegistry.addSvgIcon('fido', 'dog.svg');
         return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -226,7 +230,7 @@ export function main() {
       });
 
       it('should extract icon from SVG icon set', (done: () => void) => {
-        mdIconRegistry.addIconSetInNamespace('farm', 'farm-set-1.svg');
+        mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-1.svg');
         return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -271,9 +275,9 @@ export function main() {
       });
 
       it('should allow multiple icon sets in a namespace', (done: () => void) => {
-        mdIconRegistry.addIconSetInNamespace('farm', 'farm-set-1.svg');
-        mdIconRegistry.addIconSetInNamespace('farm', 'farm-set-2.svg');
-        mdIconRegistry.addIconSetInNamespace('arrows', 'arrow-set.svg');
+        mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-1.svg');
+        mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-2.svg');
+        mdIconRegistry.addSvgIconSetInNamespace('arrows', 'arrow-set.svg');
         return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -326,8 +330,8 @@ export function main() {
 
     describe('custom fonts', () => {
       it('should apply CSS classes for custom font and icon', (done: () => void) => {
-        mdIconRegistry.registerFontSet('f1', 'font1');
-        mdIconRegistry.registerFontSet('f2');
+        mdIconRegistry.registerFontClassAlias('f1', 'font1');
+        mdIconRegistry.registerFontClassAlias('f2');
         return builder.createAsync(MdIconCustomFontCssTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
@@ -469,3 +473,9 @@ class MdIconFromSvgNameTestApp {
   ariaLabel: string = null;
   iconName = '';
 }
+
+
+// tests
+// modification of icon doesn't propagate
+// <svg> as icon set children
+// icon name not found
\ No newline at end of file
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index a0dc89738c7b..05eea52a0943 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -1,5 +1,6 @@
 import {
   AfterContentChecked,
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   Directive,
@@ -19,6 +20,40 @@ import {
   MdIconRegistry,
 } from './icon-registry';
 
+
+/**
+ * Component to display an icon. It can be used in the following ways:
+ * - Specify the svgSrc input to load an SVG icon from a URL. The SVG content is directly inlined
+ *   as a child of the <md-icon> component, so that CSS styles can easily be applied to it.
+ *   The URL is loaded via an XMLHttpRequest, so it must be on the same domain as the page or its
+ *   server must be configured to allow cross-domain requests.
+ *   Example:
+ *     <md-icon svgSrc="assets/arrow.svg"></md-icon>
+ *
+ * - Specify the svgIcon input to load an SVG icon from a URL previously registered with the
+ *   addSvgIcon, addSvgIconInNamespace, addSvgIconSet, or addSvgIconSetInNamespace methods of
+ *   MdIconRegistry. If the svgIcon value contains a colon it is assumed to be in the format
+ *   "[namespace]:[name]", if not the value will be the name of an icon in the default namespace.
+ *   Examples:
+ *     <md-icon svgIcon="left-arrow"></md-icon>
+ *     <md-icon svgIcon="animals:cat"></md-icon>
+ *
+ * - Use a font ligature as an icon by putting the ligature text in the content of the <md-icon>
+ *   component. 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 MdIconRegistry.registerFontClassAlias.
+ *   Examples:
+ *     <md-icon>home</md-icon>
+ *     <md-icon fontSet="myfont">sun</md-icon>
+ *
+ * - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the
+ *   font, and the fontIcon input to specify the icon. (Typically the fontIcon will specify a class
+ *   which causes the icon glyph to be displayed via a :before selector, for example
+ *   <fontawesome URL>
+ *   Example:
+ *     <md-icon fontSet="fa" fontIcon="alarm"></md-icon>
+ */
 @Component({
   template: '<ng-content></ng-content>',
   selector: 'md-icon',
@@ -28,6 +63,7 @@ import {
   },
   directives: [NgClass],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
   @Input() svgSrc: string;
@@ -63,11 +99,11 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
     if (!iconName) {
       return ['', ''];
     }
-    const sepIndex = this.svgIcon.indexOf(':');
-    if (sepIndex == -1) {
+    const separatorIndex = this.svgIcon.indexOf(':');
+    if (separatorIndex == -1) {
       return ['', iconName];
     }
-    return [iconName.substring(0, sepIndex), iconName.substring(sepIndex + 1)];
+    return [iconName.substring(0, separatorIndex), iconName.substring(separatorIndex + 1)];
   }
 
   ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
@@ -76,12 +112,12 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
     if (changedInputs.indexOf('svgIcon') != -1 || changedInputs.indexOf('svgSrc') != -1) {
       if (this.svgIcon) {
         const [namespace, iconName] = this._splitIconName(this.svgIcon);
-        this._mdIconRegistry.loadIconFromNamespaceByName(namespace, iconName).subscribe(
-            (svg: SVGElement) => this._setSvgElement(svg),
+        this._mdIconRegistry.getNamedSvgIcon(iconName, namespace).subscribe(
+            svg => this._setSvgElement(svg),
             (err: any) => console.log(`Error retrieving icon: ${err}`));
       } else if (this.svgSrc) {
-        this._mdIconRegistry.loadIconFromUrl(this.svgSrc).subscribe(
-            (svg: SVGElement) => this._setSvgElement(svg),
+        this._mdIconRegistry.getSvgIconFromUrl(this.svgSrc).subscribe(
+            svg => this._setSvgElement(svg),
             (err: any) => console.log(`Error retrieving icon: ${err}`));
       }
     }
diff --git a/src/demo-app/icon/assets/core-icon-set.svg b/src/demo-app/icon/assets/core-icon-set.svg
index 60c9e7b0ee33..ee86795a9a20 100644
--- a/src/demo-app/icon/assets/core-icon-set.svg
+++ b/src/demo-app/icon/assets/core-icon-set.svg
@@ -1,33 +1,33 @@
 <svg><defs>
-<g id="3d-rotation"><path d="M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z"/></g>
-<g id="accessibility"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/></g>
-<g id="account-balance"><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"/></g>
-<g id="account-balance-wallet"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></g>
-<g id="account-box"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/></g>
-<g id="account-child"><circle cx="12" cy="13.49" r="1.5"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 2.5c1.24 0 2.25 1.01 2.25 2.25S13.24 9 12 9 9.75 7.99 9.75 6.75 10.76 4.5 12 4.5zm5 10.56v2.5c-.45.41-.96.77-1.5 1.05v-.68c0-.34-.17-.65-.46-.92-.65-.62-1.89-1.02-3.04-1.02-.96 0-1.96.28-2.65.73l-.17.12-.21.17c.78.47 1.63.72 2.54.82l1.33.15c.37.04.66.36.66.75 0 .29-.16.53-.4.66-.28.15-.64.09-.95.09-.35 0-.69-.01-1.03-.05-.5-.06-.99-.17-1.46-.33-.49-.16-.97-.38-1.42-.64-.22-.13-.44-.27-.65-.43l-.31-.24c-.04-.02-.28-.18-.28-.23v-4.28c0-1.58 2.63-2.78 5-2.78s5 1.2 5 2.78v1.78z"/></g>
-<g id="account-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></g>
-<g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></g>
-<g id="add-box"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></g>
-<g id="add-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></g>
-<g id="add-circle-outline"><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></g>
-<g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"/></g>
-<g id="alarm"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></g>
-<g id="alarm-add"><path d="M7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm1-11h-2v3H8v2h3v3h2v-3h3v-2h-3V9z"/></g>
-<g id="alarm-off"><path d="M12 6c3.87 0 7 3.13 7 7 0 .84-.16 1.65-.43 2.4l1.52 1.52c.58-1.19.91-2.51.91-3.92 0-4.97-4.03-9-9-9-1.41 0-2.73.33-3.92.91L9.6 6.43C10.35 6.16 11.16 6 12 6zm10-.28l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM2.92 2.29L1.65 3.57 2.98 4.9l-1.11.93 1.42 1.42 1.11-.94.8.8C3.83 8.69 3 10.75 3 13c0 4.97 4.02 9 9 9 2.25 0 4.31-.83 5.89-2.2l2.2 2.2 1.27-1.27L3.89 3.27l-.97-.98zm13.55 16.1C15.26 19.39 13.7 20 12 20c-3.87 0-7-3.13-7-7 0-1.7.61-3.26 1.61-4.47l9.86 9.86zM8.02 3.28L6.6 1.86l-.86.71 1.42 1.42.86-.71z"/></g>
-<g id="alarm-on"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-1.46-5.47L8.41 12.4l-1.06 1.06 3.18 3.18 6-6-1.06-1.06-4.93 4.95z"/></g>
-<g id="android"><path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/></g>
-<g id="announcement"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"/></g>
-<g id="apps"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></g>
-<g id="archive"><path d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z"/></g>
-<g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></g>
-<g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"/></g>
-<g id="arrow-drop-down-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 12l-4-4h8l-4 4z"/></g>
-<g id="arrow-drop-up"><path d="M7 14l5-5 5 5z"/></g>
-<g id="cached"><path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"/></g>
-<g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></g>
-<g id="undo"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></g>
-<g id="redo"><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></g>
-<g id="content-copy"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></g>
-<g id="content-cut"><path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"/></g>
-<g id="content-paste"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/></g>
+<svg id="3d-rotation"><path d="M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z"/></svg>
+<svg id="accessibility"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/></svg>
+<svg id="account-balance"><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"/></svg>
+<svg id="account-balance-wallet"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
+<svg id="account-box"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/></svg>
+<svg id="account-child"><circle cx="12" cy="13.49" r="1.5"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 2.5c1.24 0 2.25 1.01 2.25 2.25S13.24 9 12 9 9.75 7.99 9.75 6.75 10.76 4.5 12 4.5zm5 10.56v2.5c-.45.41-.96.77-1.5 1.05v-.68c0-.34-.17-.65-.46-.92-.65-.62-1.89-1.02-3.04-1.02-.96 0-1.96.28-2.65.73l-.17.12-.21.17c.78.47 1.63.72 2.54.82l1.33.15c.37.04.66.36.66.75 0 .29-.16.53-.4.66-.28.15-.64.09-.95.09-.35 0-.69-.01-1.03-.05-.5-.06-.99-.17-1.46-.33-.49-.16-.97-.38-1.42-.64-.22-.13-.44-.27-.65-.43l-.31-.24c-.04-.02-.28-.18-.28-.23v-4.28c0-1.58 2.63-2.78 5-2.78s5 1.2 5 2.78v1.78z"/></svg>
+<svg id="account-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
+<svg id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+<svg id="add-box"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
+<svg id="add-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
+<svg id="add-circle-outline"><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+<svg id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"/></svg>
+<svg id="alarm"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>
+<svg id="alarm-add"><path d="M7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm1-11h-2v3H8v2h3v3h2v-3h3v-2h-3V9z"/></svg>
+<svg id="alarm-off"><path d="M12 6c3.87 0 7 3.13 7 7 0 .84-.16 1.65-.43 2.4l1.52 1.52c.58-1.19.91-2.51.91-3.92 0-4.97-4.03-9-9-9-1.41 0-2.73.33-3.92.91L9.6 6.43C10.35 6.16 11.16 6 12 6zm10-.28l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM2.92 2.29L1.65 3.57 2.98 4.9l-1.11.93 1.42 1.42 1.11-.94.8.8C3.83 8.69 3 10.75 3 13c0 4.97 4.02 9 9 9 2.25 0 4.31-.83 5.89-2.2l2.2 2.2 1.27-1.27L3.89 3.27l-.97-.98zm13.55 16.1C15.26 19.39 13.7 20 12 20c-3.87 0-7-3.13-7-7 0-1.7.61-3.26 1.61-4.47l9.86 9.86zM8.02 3.28L6.6 1.86l-.86.71 1.42 1.42.86-.71z"/></svg>
+<svg id="alarm-on"><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-1.46-5.47L8.41 12.4l-1.06 1.06 3.18 3.18 6-6-1.06-1.06-4.93 4.95z"/></svg>
+<svg id="android"><path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/></svg>
+<svg id="announcement"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"/></svg>
+<svg id="apps"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+<svg id="archive"><path d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z"/></svg>
+<svg id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+<svg id="arrow-drop-down"><path d="M7 10l5 5 5-5z"/></svg>
+<svg id="arrow-drop-down-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 12l-4-4h8l-4 4z"/></svg>
+<svg id="arrow-drop-up"><path d="M7 14l5-5 5 5z"/></svg>
+<svg id="cached"><path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"/></svg>
+<svg id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+<svg id="undo"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg>
+<svg id="redo"><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></svg>
+<svg id="content-copy"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
+<svg id="content-cut"><path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"/></svg>
+<svg id="content-paste"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/></svg>
 </defs></svg>
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
index cf439d97d8ff..6f13fd0c87ff 100644
--- a/src/demo-app/icon/icon-demo.ts
+++ b/src/demo-app/icon/icon-demo.ts
@@ -15,8 +15,8 @@ export class IconDemo {
 
   constructor(mdIconRegistry: MdIconRegistry) {
       mdIconRegistry
-          .addIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
-          .addIconSetInNamespace('core', '/demo-app/icon/assets/core-icon-set.svg')
-          .registerFontSet('fontawesome', 'fa');
+          .addSvgIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
+          .addSvgIconSetInNamespace('core', '/demo-app/icon/assets/core-icon-set.svg')
+          .registerFontClassAlias('fontawesome', 'fa');
   }
 }

From 062307e95c8a3922d9446ff933279a195744a714 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Sun, 17 Apr 2016 22:08:40 -0400
Subject: [PATCH 26/37] formatting fixes

---
 src/demo-app/icon/icon-demo.scss |  4 ++--
 src/demo-app/icon/icon-demo.ts   | 22 ++++++++++------------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/demo-app/icon/icon-demo.scss b/src/demo-app/icon/icon-demo.scss
index 176309cf06e4..25617ffeae3f 100644
--- a/src/demo-app/icon/icon-demo.scss
+++ b/src/demo-app/icon/icon-demo.scss
@@ -1,7 +1,7 @@
 md-icon {
-    color: purple;
+  color: purple;
 }
 
 md-icon.green {
-    color: green;
+  color: green;
 }
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
index 6f13fd0c87ff..f0ab0be3d71f 100644
--- a/src/demo-app/icon/icon-demo.ts
+++ b/src/demo-app/icon/icon-demo.ts
@@ -3,20 +3,18 @@ import {MdIcon} from '../../components/icon/icon';
 import {MdIconRegistry} from '../../components/icon/icon-registry';
 
 @Component({
-    selector: 'icon-demo',
-    templateUrl: 'demo-app/icon/icon-demo.html',
-    styleUrls: ['demo-app/icon/icon-demo.css'],
-    directives: [MdIcon],
-    viewProviders: [MdIconRegistry],
-    encapsulation: ViewEncapsulation.None,
+  selector: 'icon-demo',
+  templateUrl: 'demo-app/icon/icon-demo.html',
+  styleUrls: ['demo-app/icon/icon-demo.css'],
+  directives: [MdIcon],
+  viewProviders: [MdIconRegistry],
+  encapsulation: ViewEncapsulation.None,
 })
 export class IconDemo {
-  showAndroid = true;
-
   constructor(mdIconRegistry: MdIconRegistry) {
-      mdIconRegistry
-          .addSvgIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
-          .addSvgIconSetInNamespace('core', '/demo-app/icon/assets/core-icon-set.svg')
-          .registerFontClassAlias('fontawesome', 'fa');
+    mdIconRegistry
+        .addSvgIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
+        .addSvgIconSetInNamespace('core', '/demo-app/icon/assets/core-icon-set.svg')
+        .registerFontClassAlias('fontawesome', 'fa');
   }
 }

From d3682b771c701a6fef688eca21ada52b6962bb5a Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Sun, 17 Apr 2016 22:36:36 -0400
Subject: [PATCH 27/37] Fix tslint errors.

---
 src/components/icon/icon-registry.ts |  9 +++++----
 src/components/icon/icon.spec.ts     | 20 ++------------------
 src/components/icon/icon.ts          |  2 --
 3 files changed, 7 insertions(+), 24 deletions(-)

diff --git a/src/components/icon/icon-registry.ts b/src/components/icon/icon-registry.ts
index 7e48af41bd7e..50988b4cbe20 100644
--- a/src/components/icon/icon-registry.ts
+++ b/src/components/icon/icon-registry.ts
@@ -177,7 +177,7 @@ export class MdIconRegistry {
     if (iconSetConfigs) {
       return this._getSvgFromIconSetConfigs(name, this._iconSetConfigs.get(namespace));
     }
-    return Observable.throw(Error(`Unknown icon name: ${name} in namespace: ${namespace}`));
+    return Observable.throw(new MdIconNameNotFoundException(iconKey));
   }
 
   /**
@@ -249,10 +249,11 @@ export class MdIconRegistry {
    * tag matches the specified name. If found, copies the nested element to a new SVG element and
    * returns it. Returns null if no matching element is found.
    */
-  private _extractIconWithNameFromAnySet(iconName: string, setConfigs: SvgIconConfig[]): SVGElement {
+  private _extractIconWithNameFromAnySet(iconName: string, iconSetConfigs: SvgIconConfig[]):
+      SVGElement {
     // Iterate backwards, so icon sets added later have precedence.
-    for (let i = setConfigs.length - 1; i >= 0; i--) {
-      const config = setConfigs[i];
+    for (let i = iconSetConfigs.length - 1; i >= 0; i--) {
+      const config = iconSetConfigs[i];
       if (config.svgElement) {
         const foundIcon = this._extractSvgIconFromSet(config.svgElement, iconName, config);
         if (foundIcon) {
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 4c7b610436cf..2282f8e92d97 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -9,22 +9,13 @@ import {
 } from 'angular2/testing';
 import {
   HTTP_PROVIDERS,
-  BaseRequestOptions,
   Response,
   ResponseOptions,
-  Http,
   XHRBackend} from 'angular2/http';
-import {
-  MockBackend,
-  MockConnection} from 'angular2/http/testing';
+import {MockBackend} from 'angular2/http/testing';
 import {
   provide,
   Component} from 'angular2/core';
-import {By} from 'angular2/platform/browser';
-import {
-  TEST_BROWSER_PLATFORM_PROVIDERS,
-  TEST_BROWSER_APPLICATION_PROVIDERS
-} from 'angular2/platform/testing/browser';
 
 import {MdIcon} from './icon';
 import {MdIconRegistry} from './icon-registry';
@@ -191,7 +182,7 @@ export function main() {
           let svgElement: any;
           let pathElement: any;
 
-          testComponent.iconName= 'fido';
+          testComponent.iconName = 'fido';
           fixture.detectChanges();
           expect(mdIconElement.children.length).toBe(1);
           svgElement = mdIconElement.children[0];
@@ -203,7 +194,6 @@ export function main() {
           // The aria label should be taken from the icon name.
           expect(mdIconElement.getAttribute('aria-label')).toBe('fido');
 
-
           // Change the icon, and the SVG element should be replaced.
           testComponent.iconName = 'fluffy';
           fixture.detectChanges();
@@ -473,9 +463,3 @@ class MdIconFromSvgNameTestApp {
   ariaLabel: string = null;
   iconName = '';
 }
-
-
-// tests
-// modification of icon doesn't propagate
-// <svg> as icon set children
-// icon name not found
\ No newline at end of file
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 05eea52a0943..ae1c22bcce2c 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -3,9 +3,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  Directive,
   ElementRef,
-  HostBinding,
   Input,
   OnChanges,
   OnInit,

From 8e2ff62a8611a48193382dbdce8356bfc535766e Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Mon, 18 Apr 2016 01:39:52 -0400
Subject: [PATCH 28/37] Factor out common test assertions, and add tests for
 <svg> elements in icon sets.

---
 src/components/icon/icon.spec.ts | 194 ++++++++++++++++++++-----------
 src/components/icon/icon.ts      |  11 +-
 2 files changed, 132 insertions(+), 73 deletions(-)

diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 2282f8e92d97..5a415a4aa126 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -20,8 +20,30 @@ import {
 import {MdIcon} from './icon';
 import {MdIconRegistry} from './icon-registry';
 
+/** Returns the CSS classes assigned to an element as a sorted array. */
 const sortedClassNames = (elem: Element) => elem.className.split(' ').sort();
 
+/**
+ * Verifies that an element contains a single <svg> child element, and returns that child.
+ */
+const verifyAndGetSingleSvgChild = (element: any): any => {
+  expect(element.children.length).toBe(1);
+  const svgChild = element.children[0];
+  expect(svgChild.tagName.toLowerCase()).toBe('svg');
+  return svgChild;
+};
+
+/**
+ * Verifies that an element contains a single <path> child element whose "d" attribute has
+ * the specified value.
+ */
+const verifyPathChildElement = (element: any, attributeValue: string) => {
+  expect(element.children.length).toBe(1);
+  const pathElement = element.children[0];
+  expect(pathElement.tagName.toLowerCase()).toBe('path');
+  expect(pathElement.getAttribute('d')).toBe(attributeValue);
+};
+
 export function main() {
   describe('MdIcon', () => {
 
@@ -90,8 +112,8 @@ export function main() {
               body: `
                 <svg>
                   <defs>
-                    <svg id="left"><path d="left"></path></g>
-                    <svg id="right"><path d="right"></path></g>
+                    <svg id="left-arrow"><path d="left"></path></svg>
+                    <svg id="right-arrow"><path d="right"></path></svg>
                   </defs>
                 </svg>
               `,
@@ -132,41 +154,29 @@ export function main() {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           let svgElement: any;
-          let pathElement: any;
 
           testComponent.iconUrl = 'cat.svg';
           fixture.detectChanges();
           // An <svg> element should have been added as a child of <md-icon>.
-          expect(mdIconElement.children.length).toBe(1);
-          svgElement = mdIconElement.children[0];
-          expect(svgElement.tagName.toLowerCase()).toBe('svg');
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
           // Default attributes should be set.
           expect(svgElement.getAttribute('height')).toBe('100%');
           expect(svgElement.getAttribute('height')).toBe('100%');
           // Make sure SVG content is taken from response.
-          expect(svgElement.children.length).toBe(1);
-          pathElement = svgElement.children[0];
-          expect(pathElement.tagName.toLowerCase()).toBe('path');
-          expect(pathElement.getAttribute('d')).toBe('meow');
+          verifyPathChildElement(svgElement, 'meow');
 
           // Change the icon, and the SVG element should be replaced.
           testComponent.iconUrl = 'dog.svg';
           fixture.detectChanges();
-          expect(mdIconElement.children.length).toBe(1);
-          svgElement = mdIconElement.children[0];
-          expect(svgElement.tagName.toLowerCase()).toBe('svg');
-          expect(svgElement.children.length).toBe(1);
-          pathElement = svgElement.children[0];
-          expect(pathElement.tagName.toLowerCase()).toBe('path');
-          expect(pathElement.getAttribute('d')).toBe('woof');
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+          verifyPathChildElement(svgElement, 'woof');
 
           expect(httpRequestUrls).toEqual(['cat.svg', 'dog.svg']);
           // Using an icon from a previously loaded URL should not cause another HTTP request.
           testComponent.iconUrl = 'cat.svg';
           fixture.detectChanges();
-          expect(mdIconElement.children.length).toBe(1);
-          pathElement = mdIconElement.querySelector('svg path');
-          expect(pathElement.getAttribute('d')).toBe('meow');
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+          verifyPathChildElement(svgElement, 'meow');
           expect(httpRequestUrls).toEqual(['cat.svg', 'dog.svg']);
 
           done();
@@ -179,40 +189,28 @@ export function main() {
         return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
-          let svgElement: any;
-          let pathElement: any;
+          let svgElement: SVGElement;
 
           testComponent.iconName = 'fido';
           fixture.detectChanges();
-          expect(mdIconElement.children.length).toBe(1);
-          svgElement = mdIconElement.children[0];
-          expect(svgElement.tagName.toLowerCase()).toBe('svg');
-          expect(svgElement.children.length).toBe(1);
-          pathElement = svgElement.children[0];
-          expect(pathElement.tagName.toLowerCase()).toBe('path');
-          expect(pathElement.getAttribute('d')).toBe('woof');
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+          verifyPathChildElement(svgElement, 'woof');
           // The aria label should be taken from the icon name.
           expect(mdIconElement.getAttribute('aria-label')).toBe('fido');
 
           // Change the icon, and the SVG element should be replaced.
           testComponent.iconName = 'fluffy';
           fixture.detectChanges();
-          expect(mdIconElement.children.length).toBe(1);
-          svgElement = mdIconElement.children[0];
-          expect(svgElement.tagName.toLowerCase()).toBe('svg');
-          expect(svgElement.children.length).toBe(1);
-          pathElement = svgElement.children[0];
-          expect(pathElement.tagName.toLowerCase()).toBe('path');
-          expect(pathElement.getAttribute('d')).toBe('meow');
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+          verifyPathChildElement(svgElement, 'meow');
           expect(mdIconElement.getAttribute('aria-label')).toBe('fluffy');
 
           expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
           // Using an icon from a previously loaded URL should not cause another HTTP request.
           testComponent.iconName = 'fido';
           fixture.detectChanges();
-          expect(mdIconElement.children.length).toBe(1);
-          pathElement = mdIconElement.querySelector('svg path');
-          expect(pathElement.getAttribute('d')).toBe('woof');
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+          verifyPathChildElement(svgElement, 'woof');
           expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
 
           done();
@@ -225,39 +223,31 @@ export function main() {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           let svgElement: any;
-          let pathElement: any;
           let svgChild: any;
 
           testComponent.iconName = 'farm:pig';
           fixture.detectChanges();
+
           expect(mdIconElement.children.length).toBe(1);
-          svgElement = mdIconElement.children[0];
-          expect(svgElement.tagName.toLowerCase()).toBe('svg');
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
           expect(svgElement.children.length).toBe(1);
           svgChild = svgElement.children[0];
           // The first <svg> child should be the <g id="pig"> element.
           expect(svgChild.tagName.toLowerCase()).toBe('g');
           expect(svgChild.getAttribute('id')).toBe('pig');
-          expect(svgChild.children.length).toBe(1);
-          pathElement = svgChild.children[0];
-          expect(pathElement.tagName.toLowerCase()).toBe('path');
-          expect(pathElement.getAttribute('d')).toBe('oink');
+          verifyPathChildElement(svgChild, 'oink');
           // The aria label should be taken from the icon name (without the icon set portion).
           expect(mdIconElement.getAttribute('aria-label')).toBe('pig');
 
           // Change the icon, and the SVG element should be replaced.
           testComponent.iconName = 'farm:cow';
           fixture.detectChanges();
-          expect(mdIconElement.children.length).toBe(1);
-          svgElement = mdIconElement.children[0];
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
           svgChild = svgElement.children[0];
           // The first <svg> child should be the <g id="cow"> element.
           expect(svgChild.tagName.toLowerCase()).toBe('g');
           expect(svgChild.getAttribute('id')).toBe('cow');
-          expect(svgChild.children.length).toBe(1);
-          pathElement = svgChild.children[0];
-          expect(pathElement.tagName.toLowerCase()).toBe('path');
-          expect(pathElement.getAttribute('d')).toBe('moo');
+          verifyPathChildElement(svgChild, 'moo');
           expect(mdIconElement.getAttribute('aria-label')).toBe('cow');
 
           done();
@@ -272,24 +262,19 @@ export function main() {
           const testComponent = fixture.debugElement.componentInstance;
           const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
           let svgElement: any;
-          let pathElement: any;
           let svgChild: any;
 
           testComponent.iconName = 'farm:pig';
           fixture.detectChanges();
-          expect(mdIconElement.children.length).toBe(1);
-          svgElement = mdIconElement.children[0];
-          expect(svgElement.tagName.toLowerCase()).toBe('svg');
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
           expect(svgElement.children.length).toBe(1);
           svgChild = svgElement.children[0];
-          // The first <svg> child should be the <g id="pig"> element.
+          // The <svg> child should be the <g id="pig"> element.
           expect(svgChild.tagName.toLowerCase()).toBe('g');
           expect(svgChild.getAttribute('id')).toBe('pig');
           expect(svgChild.children.length).toBe(1);
-          pathElement = svgChild.children[0];
-          expect(pathElement.tagName.toLowerCase()).toBe('path');
-          expect(pathElement.getAttribute('d')).toBe('oink');
-          // The aria label should be taken from the icon name (without the icon set portion).
+          verifyPathChildElement(svgChild, 'oink');
+          // The aria label should be taken from the icon name (without the namespace).
           expect(mdIconElement.getAttribute('aria-label')).toBe('pig');
 
           // Both icon sets registered in the 'farm' namespace should have been fetched.
@@ -300,22 +285,99 @@ export function main() {
           // and no additional HTTP request should be made.
           testComponent.iconName = 'farm:cow';
           fixture.detectChanges();
-          expect(mdIconElement.children.length).toBe(1);
-          svgElement = mdIconElement.children[0];
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
           svgChild = svgElement.children[0];
           // The first <svg> child should be the <g id="cow"> element.
           expect(svgChild.tagName.toLowerCase()).toBe('g');
           expect(svgChild.getAttribute('id')).toBe('cow');
           expect(svgChild.children.length).toBe(1);
-          pathElement = svgChild.children[0];
-          expect(pathElement.tagName.toLowerCase()).toBe('path');
-          expect(pathElement.getAttribute('d')).toBe('moo moo');
+          verifyPathChildElement(svgChild, 'moo moo');
           expect(mdIconElement.getAttribute('aria-label')).toBe('cow');
           expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
 
           done();
         });
       });
+
+      it('should not wrap <svg> elements in icon sets in another svg tag', (done: () => void) => {
+        mdIconRegistry.addSvgIconSet('arrow-set.svg');
+        return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          let svgElement: any;
+
+          testComponent.iconName = 'left-arrow';
+          fixture.detectChanges();
+          // arrow-set.svg stores its icons as nested <svg> elements, so they should be used
+          // directly and not wrapped in an outer <svg> tag like the <g> elements in other sets.
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+          verifyPathChildElement(svgElement, 'left');
+          expect(mdIconElement.getAttribute('aria-label')).toBe('left-arrow');
+
+          done();
+        });
+      });
+
+      it('should return unmodified copies of icons from URLs', (done: () => void) => {
+        return builder.createAsync(MdIconFromSvgUrlTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          let svgElement: any;
+
+          testComponent.iconUrl = 'cat.svg';
+          fixture.detectChanges();
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+          verifyPathChildElement(svgElement, 'meow');
+          // Modify the SVG element by setting a viewBox attribute.
+          svgElement.setAttribute('viewBox', '0 0 100 100');
+
+          // Switch to a different icon.
+          testComponent.iconUrl = 'dog.svg';
+          fixture.detectChanges();
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+          verifyPathChildElement(svgElement, 'woof');
+
+          // Switch back to the first icon. The viewBox attribute should not be present.
+          testComponent.iconUrl = 'cat.svg';
+          fixture.detectChanges();
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+          verifyPathChildElement(svgElement, 'meow');
+          expect(svgElement.getAttribute('viewBox')).toBeFalsy();
+
+          done();
+        });
+      });
+
+      it('should return unmodified copies of icons from icon sets', (done: () => void) => {
+        mdIconRegistry.addSvgIconSet('arrow-set.svg');
+        return builder.createAsync(MdIconFromSvgNameTestApp).then((fixture) => {
+          const testComponent = fixture.debugElement.componentInstance;
+          const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
+          let svgElement: any;
+
+          testComponent.iconName = 'left-arrow';
+          fixture.detectChanges();
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+          verifyPathChildElement(svgElement, 'left');
+          // Modify the SVG element by setting a viewBox attribute.
+          svgElement.setAttribute('viewBox', '0 0 100 100');
+
+          // Switch to a different icon.
+          testComponent.iconName = 'right-arrow';
+          fixture.detectChanges();
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+          verifyPathChildElement(svgElement, 'right');
+
+          // Switch back to the first icon. The viewBox attribute should not be present.
+          testComponent.iconName = 'left-arrow';
+          fixture.detectChanges();
+          svgElement = verifyAndGetSingleSvgChild(mdIconElement);
+          verifyPathChildElement(svgElement, 'left');
+          expect(svgElement.getAttribute('viewBox')).toBeFalsy();
+
+          done();
+        });
+      });
     });
 
     describe('custom fonts', () => {
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index ae1c22bcce2c..cd73728681f1 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -11,12 +11,9 @@ import {
   SimpleChange,
   ViewEncapsulation,
 } from 'angular2/core';
-
 import {NgClass} from 'angular2/common';
 
-import {
-  MdIconRegistry,
-} from './icon-registry';
+import {MdIconRegistry} from './icon-registry';
 
 
 /**
@@ -46,9 +43,9 @@ import {
  *     <md-icon fontSet="myfont">sun</md-icon>
  *
  * - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the
- *   font, and the fontIcon input to specify the icon. (Typically the fontIcon will specify a class
- *   which causes the icon glyph to be displayed via a :before selector, for example
- *   <fontawesome URL>
+ *   font, and the fontIcon input to specify the icon. Typically the fontIcon will specify a
+ *   CSS class which causes the glyph to be displayed via a :before selector, as in
+ *   https://fortawesome.github.io/Font-Awesome/examples/
  *   Example:
  *     <md-icon fontSet="fa" fontIcon="alarm"></md-icon>
  */

From 4b02d2728e40ed0a4d7c1e58ba072173104dc1e9 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Mon, 18 Apr 2016 21:58:41 -0400
Subject: [PATCH 29/37] Fix tests for Edge and IE11 (element.children bad,
 element.childNodes good).

---
 src/components/icon/icon.spec.ts | 48 ++++++++++++++++----------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 5a415a4aa126..c5cd1ab1e992 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -27,21 +27,21 @@ const sortedClassNames = (elem: Element) => elem.className.split(' ').sort();
  * Verifies that an element contains a single <svg> child element, and returns that child.
  */
 const verifyAndGetSingleSvgChild = (element: any): any => {
-  expect(element.children.length).toBe(1);
-  const svgChild = element.children[0];
+  expect(element.childNodes.length).toBe(1);
+  const svgChild = element.childNodes[0];
   expect(svgChild.tagName.toLowerCase()).toBe('svg');
   return svgChild;
 };
 
 /**
- * Verifies that an element contains a single <path> child element whose "d" attribute has
+ * Verifies that an element contains a single <path> child element whose "id" attribute has
  * the specified value.
  */
 const verifyPathChildElement = (element: any, attributeValue: string) => {
-  expect(element.children.length).toBe(1);
-  const pathElement = element.children[0];
+  expect(element.childNodes.length).toBe(1);
+  const pathElement = element.childNodes[0];
   expect(pathElement.tagName.toLowerCase()).toBe('path');
-  expect(pathElement.getAttribute('d')).toBe(attributeValue);
+  expect(pathElement.getAttribute('id')).toBe(attributeValue);
 };
 
 export function main() {
@@ -73,13 +73,13 @@ export function main() {
           case 'cat.svg':
             connection.mockRespond(new Response(new ResponseOptions({
               status: 200,
-              body: '<svg><path d="meow"></path></svg>',
+              body: '<svg><path id="meow"></path></svg>',
             })));
             break;
           case 'dog.svg':
             connection.mockRespond(new Response(new ResponseOptions({
               status: 200,
-              body: '<svg><path d="woof"></path></svg>',
+              body: '<svg><path id="woof"></path></svg>',
             })));
             break;
           case 'farm-set-1.svg':
@@ -87,8 +87,8 @@ export function main() {
               status: 200,
               body: `
                 <svg>
-                  <g id="pig"><path d="oink"></path></g>
-                  <g id="cow"><path d="moo"></path></g>
+                  <g id="pig"><path id="oink"></path></g>
+                  <g id="cow"><path id="moo"></path></g>
                 </svg>
               `,
             })));
@@ -99,8 +99,8 @@ export function main() {
               body: `
                 <svg>
                   <defs>
-                    <g id="cow"><path d="moo moo"></path></g>
-                    <g id="sheep"><path d="baa"></path></g>
+                    <g id="cow"><path id="moo moo"></path></g>
+                    <g id="sheep"><path id="baa"></path></g>
                   </defs>
                 </svg>
               `,
@@ -112,8 +112,8 @@ export function main() {
               body: `
                 <svg>
                   <defs>
-                    <svg id="left-arrow"><path d="left"></path></svg>
-                    <svg id="right-arrow"><path d="right"></path></svg>
+                    <svg id="left-arrow"><path id="left"></path></svg>
+                    <svg id="right-arrow"><path id="right"></path></svg>
                   </defs>
                 </svg>
               `,
@@ -228,10 +228,10 @@ export function main() {
           testComponent.iconName = 'farm:pig';
           fixture.detectChanges();
 
-          expect(mdIconElement.children.length).toBe(1);
+          expect(mdIconElement.childNodes.length).toBe(1);
           svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-          expect(svgElement.children.length).toBe(1);
-          svgChild = svgElement.children[0];
+          expect(svgElement.childNodes.length).toBe(1);
+          svgChild = svgElement.childNodes[0];
           // The first <svg> child should be the <g id="pig"> element.
           expect(svgChild.tagName.toLowerCase()).toBe('g');
           expect(svgChild.getAttribute('id')).toBe('pig');
@@ -243,7 +243,7 @@ export function main() {
           testComponent.iconName = 'farm:cow';
           fixture.detectChanges();
           svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-          svgChild = svgElement.children[0];
+          svgChild = svgElement.childNodes[0];
           // The first <svg> child should be the <g id="cow"> element.
           expect(svgChild.tagName.toLowerCase()).toBe('g');
           expect(svgChild.getAttribute('id')).toBe('cow');
@@ -267,12 +267,12 @@ export function main() {
           testComponent.iconName = 'farm:pig';
           fixture.detectChanges();
           svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-          expect(svgElement.children.length).toBe(1);
-          svgChild = svgElement.children[0];
+          expect(svgElement.childNodes.length).toBe(1);
+          svgChild = svgElement.childNodes[0];
           // The <svg> child should be the <g id="pig"> element.
           expect(svgChild.tagName.toLowerCase()).toBe('g');
           expect(svgChild.getAttribute('id')).toBe('pig');
-          expect(svgChild.children.length).toBe(1);
+          expect(svgChild.childNodes.length).toBe(1);
           verifyPathChildElement(svgChild, 'oink');
           // The aria label should be taken from the icon name (without the namespace).
           expect(mdIconElement.getAttribute('aria-label')).toBe('pig');
@@ -281,16 +281,16 @@ export function main() {
           expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
 
           // Change the icon name to one that appears in both icon sets. The icon from the set that
-          // was registered last should be used (with 'd' attribute of 'moo moo' instead of 'moo'),
+          // was registered last should be used (with id attribute of 'moo moo' instead of 'moo'),
           // and no additional HTTP request should be made.
           testComponent.iconName = 'farm:cow';
           fixture.detectChanges();
           svgElement = verifyAndGetSingleSvgChild(mdIconElement);
-          svgChild = svgElement.children[0];
+          svgChild = svgElement.childNodes[0];
           // The first <svg> child should be the <g id="cow"> element.
           expect(svgChild.tagName.toLowerCase()).toBe('g');
           expect(svgChild.getAttribute('id')).toBe('cow');
-          expect(svgChild.children.length).toBe(1);
+          expect(svgChild.childNodes.length).toBe(1);
           verifyPathChildElement(svgChild, 'moo moo');
           expect(mdIconElement.getAttribute('aria-label')).toBe('cow');
           expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);

From 437ab0ce18cdbfa63be2747d10a2048f73297f5a Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Tue, 19 Apr 2016 18:31:21 -0400
Subject: [PATCH 30/37] In-progress updates for PR comments.

---
 src/components/icon/icon-registry.ts | 50 +++++++++++-----------------
 src/components/icon/icon.ts          | 32 ++++++++++++------
 2 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/components/icon/icon-registry.ts b/src/components/icon/icon-registry.ts
index 50988b4cbe20..37b6248e0986 100644
--- a/src/components/icon/icon-registry.ts
+++ b/src/components/icon/icon-registry.ts
@@ -31,6 +31,9 @@ class SvgIconConfig {
   }
 }
 
+/** Returns the cache key to use for an icon namespace and name. */
+const iconKey = (namespace: string, name: string) => namespace + ':' + name;
+
 /**
  * Service to register and display icons used by the <md-icon> component.
  * - Registers icon URLs by namespace and name.
@@ -51,19 +54,13 @@ export class MdIconRegistry {
    */
   private _iconSetConfigs = new Map<string, SvgIconConfig[]>();
 
-  /**
-   * Cache for icons loaded by direct URLs.
-   */
+  /** Cache for icons loaded by direct URLs. */
   private _cachedIconsByUrl = new Map<string, SVGElement>();
 
-  /**
-   * In-progress icon fetches. Used to coalesce multiple requests to the same URL.
-   */
+  /** In-progress icon fetches. Used to coalesce multiple requests to the same URL. */
   private _inProgressUrlFetches = new Map<string, Observable<string>>();
 
-  /**
-   * Map from font identifiers to their CSS class names. Used for icon fonts.
-   */
+  /** Map from font identifiers to their CSS class names. Used for icon fonts. */
   private _fontCssClassesByAlias = new Map<string, string>();
 
   /**
@@ -75,32 +72,24 @@ export class MdIconRegistry {
 
   constructor(private _http: Http) {}
 
-  /**
-   * Registers an icon by URL in the default namespace.
-   */
+  /** Registers an icon by URL in the default namespace. */
   addSvgIcon(iconName: string, url: string): this {
     return this.addSvgIconInNamespace('', iconName, url);
   }
 
-  /**
-   * Registers an icon by URL in the specified namespace.
-   */
+  /** Registers an icon by URL in the specified namespace. */
   addSvgIconInNamespace(namespace: string, iconName: string, url: string): this {
-    const iconKey = namespace + ':' + iconName;
-    this._svgIconConfigs.set(iconKey, new SvgIconConfig(url));
+    const key = iconKey(namespace, iconName);
+    this._svgIconConfigs.set(key, new SvgIconConfig(url));
     return this;
   }
 
-  /**
-   * Registers an icon set by URL in the default namespace.
-   */
+  /** Registers an icon set by URL in the default namespace. */
   addSvgIconSet(url: string): this {
     return this.addSvgIconSetInNamespace('', url);
   }
 
-  /**
-   * Registers an icon set by URL in the specified namespace.
-   */
+  /** Registers an icon set by URL in the specified namespace. */
   addSvgIconSetInNamespace(namespace: string, url: string): this {
     const config = new SvgIconConfig(url);
     if (this._iconSetConfigs.has(namespace)) {
@@ -168,16 +157,16 @@ export class MdIconRegistry {
    */
   getNamedSvgIcon(name: string, namespace = ''): Observable<SVGElement> {
     // Return (copy of) cached icon if possible.
-    const iconKey = namespace + ':' + name;
-    if (this._svgIconConfigs.has(iconKey)) {
-      return this._getSvgFromConfig(this._svgIconConfigs.get(iconKey));
+    const key = iconKey(namespace, name);
+    if (this._svgIconConfigs.has(key)) {
+      return this._getSvgFromConfig(this._svgIconConfigs.get(key));
     }
     // See if we have any icon sets registered for the namespace.
     const iconSetConfigs = this._iconSetConfigs.get(namespace);
     if (iconSetConfigs) {
       return this._getSvgFromIconSetConfigs(name, this._iconSetConfigs.get(namespace));
     }
-    return Observable.throw(new MdIconNameNotFoundException(iconKey));
+    return Observable.throw(new MdIconNameNotFoundException(key));
   }
 
   /**
@@ -190,8 +179,8 @@ export class MdIconRegistry {
     } else {
       // Fetch the icon from the config's URL, cache it, and return a copy.
       return this._loadSvgIconFromConfig(config)
-          .do((svg: SVGElement) => config.svgElement = svg)
-          .map((svg: SVGElement) => svg.cloneNode(true));
+          .do(svg => config.svgElement = svg)
+          .map(svg => svg.cloneNode(true));
     }
   }
 
@@ -226,7 +215,7 @@ export class MdIconRegistry {
                   console.log(`Loading icon set URL: ${iconSetConfig.url} failed: ${err}`);
                   return Observable.of(null);
                 })
-                .do((svg: SVGElement) => {
+                .do(svg => {
                   // Cache SVG element.
                   if (svg) {
                     iconSetConfig.svgElement = svg;
@@ -278,6 +267,7 @@ export class MdIconRegistry {
    * from it.
    */
   private _loadSvgIconSetFromConfig(config: SvgIconConfig): Observable<SVGElement> {
+      // TODO: Document that icons should only be loaded from trusted sources.
     return this._fetchUrl(config.url)
         .map((svgText) => this._svgElementFromString(svgText));
   }
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index cd73728681f1..bf7afa625877 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -1,7 +1,6 @@
 import {
   AfterContentChecked,
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ElementRef,
   Input,
@@ -12,10 +11,18 @@ import {
   ViewEncapsulation,
 } from 'angular2/core';
 import {NgClass} from 'angular2/common';
+import {BaseException} from 'angular2/src/facade/exceptions';
 
 import {MdIconRegistry} from './icon-registry';
 
 
+/** Exception thrown when an invalid icon name is passed to an md-icon component. */
+export class MdIconInvalidNameException extends BaseException {
+  constructor(iconName: string) {
+      super(`Invalid icon name: "${name}"`);
+  }
+}
+
 /**
  * Component to display an icon. It can be used in the following ways:
  * - Specify the svgSrc input to load an SVG icon from a URL. The SVG content is directly inlined
@@ -67,7 +74,7 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
   @Input() fontIcon: string;
   @Input() alt: string;
 
-  @Input('aria-label') ariaLabelFromParent: string = '';
+  @Input('aria-label') hostAriaLabel: string = '';
 
   private _previousFontSetClass: string;
   private _previousFontIconClass: string;
@@ -75,7 +82,6 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
   constructor(
       private _element: ElementRef,
       private _renderer: Renderer,
-      private _changeDetectorRef: ChangeDetectorRef,
       private _mdIconRegistry: MdIconRegistry) {
   }
 
@@ -85,20 +91,27 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
    * The separator for the two fields is ':'. If there is no separator, an empty
    * string is returned for the icon set and the entire value is returned for
    * the icon name. If the argument is falsy, returns an array of two empty strings.
+   * Throws a MdIconInvalidNameException if the name contains two or more ':' separators.
    * Examples:
    *   'social:cake' -> ['social', 'cake']
    *   'penguin' -> ['', 'penguin']
    *   null -> ['', '']
+   *   'a:b:c' -> (throws MdIconInvalidNameException)
    */
   private _splitIconName(iconName: string): [string, string] {
     if (!iconName) {
       return ['', ''];
     }
-    const separatorIndex = this.svgIcon.indexOf(':');
-    if (separatorIndex == -1) {
-      return ['', iconName];
+    const parts = iconName.split(':');
+    switch (parts.length) {
+      case 1:
+        // Use default namespace.
+        return ['', parts[0]];
+      case 2:
+        return <[string, string]>parts;
+      default:
+        throw new MdIconInvalidNameException(iconName);
     }
-    return [iconName.substring(0, separatorIndex), iconName.substring(separatorIndex + 1)];
   }
 
   ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
@@ -140,7 +153,6 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
       const ariaLabel = this._getAriaLabel();
       if (ariaLabel) {
         this._renderer.setElementAttribute(this._element.nativeElement, 'aria-label', ariaLabel);
-        this._changeDetectorRef.detectChanges();
       }
   }
 
@@ -149,7 +161,7 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
     // reasonable value from the alt attribute, font icon name, SVG icon name, or (for ligatures)
     // the text content of the directive.
     const label =
-        this.ariaLabelFromParent ||
+        this.hostAriaLabel ||
         this.alt ||
         this.fontIcon ||
         this._splitIconName(this.svgIcon)[1];
@@ -163,7 +175,7 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
         return text;
       }
     }
-    // Warn here?
+    // TODO: Warn here in dev mode.
     return null;
   }
 

From 364391a7b315f1549fd3bbf2e248ee5c0b60c24c Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Tue, 19 Apr 2016 19:18:14 -0400
Subject: [PATCH 31/37] More PR comments.

---
 src/components/icon/icon-registry.ts | 10 +++++-----
 src/components/icon/icon.spec.ts     |  8 ++++----
 src/components/icon/icon.ts          |  6 +++---
 src/demo-app/icon/icon-demo.scss     |  4 ++--
 src/demo-app/icon/icon-demo.ts       |  2 +-
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/icon/icon-registry.ts b/src/components/icon/icon-registry.ts
index 37b6248e0986..e28a84d1dfbe 100644
--- a/src/components/icon/icon-registry.ts
+++ b/src/components/icon/icon-registry.ts
@@ -4,7 +4,7 @@ import {Http} from 'angular2/http';
 import {Observable} from 'rxjs/Rx';
 
 
-/** Exception thrown when attmepting to load an icon with a name that cannot be found. */
+/** Exception thrown when attempting to load an icon with a name that cannot be found. */
 export class MdIconNameNotFoundException extends BaseException {
   constructor(iconName: string) {
       super(`Unable to find icon with the name "${name}"`);
@@ -12,7 +12,7 @@ export class MdIconNameNotFoundException extends BaseException {
 }
 
 /**
- * Exception thrown when attmepting to load SVG content that does not contain the expected
+ * Exception thrown when attempting to load SVG content that does not contain the expected
  * <svg> tag.
  */
 export class MdIconSvgTagNotFoundException extends BaseException {
@@ -122,7 +122,7 @@ export class MdIconRegistry {
    * Sets the CSS class name to be used for icon fonts when an <md-icon> component does not
    * have a fontSet input value, and is not loading an icon by name or URL.
    */
-  setDefaultFontSetClass(className: string) {
+  setDefaultFontSetClass(className: string): this {
     this._defaultFontSetClass = className;
     return this;
   }
@@ -164,7 +164,7 @@ export class MdIconRegistry {
     // See if we have any icon sets registered for the namespace.
     const iconSetConfigs = this._iconSetConfigs.get(namespace);
     if (iconSetConfigs) {
-      return this._getSvgFromIconSetConfigs(name, this._iconSetConfigs.get(namespace));
+      return this._getSvgFromIconSetConfigs(name, iconSetConfigs);
     }
     return Observable.throw(new MdIconNameNotFoundException(key));
   }
@@ -198,7 +198,7 @@ export class MdIconRegistry {
     // requested name.
     const namedIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs);
     if (namedIcon) {
-      // We could cache namedSvg in _svgIconConfigs, but since we have to make a copy every
+      // We could cache namedIcon in _svgIconConfigs, but since we have to make a copy every
       // time anyway, there's probably not much advantage compared to just always extracting
       // it from the icon set.
       return Observable.of(namedIcon);
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index c5cd1ab1e992..67262dabaad7 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -26,9 +26,9 @@ const sortedClassNames = (elem: Element) => elem.className.split(' ').sort();
 /**
  * Verifies that an element contains a single <svg> child element, and returns that child.
  */
-const verifyAndGetSingleSvgChild = (element: any): any => {
+const verifyAndGetSingleSvgChild = (element: SVGElement): any => {
   expect(element.childNodes.length).toBe(1);
-  const svgChild = element.childNodes[0];
+  const svgChild = <Element>element.childNodes[0];
   expect(svgChild.tagName.toLowerCase()).toBe('svg');
   return svgChild;
 };
@@ -37,9 +37,9 @@ const verifyAndGetSingleSvgChild = (element: any): any => {
  * Verifies that an element contains a single <path> child element whose "id" attribute has
  * the specified value.
  */
-const verifyPathChildElement = (element: any, attributeValue: string) => {
+const verifyPathChildElement = (element: Element, attributeValue: string) => {
   expect(element.childNodes.length).toBe(1);
-  const pathElement = element.childNodes[0];
+  const pathElement = <Element>element.childNodes[0];
   expect(pathElement.tagName.toLowerCase()).toBe('path');
   expect(pathElement.getAttribute('id')).toBe(attributeValue);
 };
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index bf7afa625877..07c856116fdb 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -184,10 +184,10 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
   }
 
   private _setSvgElement(svg: SVGElement) {
-    // Can we use Renderer here somehow?
     const layoutElement = this._element.nativeElement;
-    layoutElement.innerHTML = '';
-    layoutElement.appendChild(svg);
+    // Remove existing child nodes and add the new SVG element.
+    this._renderer.detachView(Array.from(layoutElement.childNodes));
+    this._renderer.projectNodes(layoutElement, [svg]);
   }
 
   private _updateFontIconClasses() {
diff --git a/src/demo-app/icon/icon-demo.scss b/src/demo-app/icon/icon-demo.scss
index 25617ffeae3f..27663d1390c7 100644
--- a/src/demo-app/icon/icon-demo.scss
+++ b/src/demo-app/icon/icon-demo.scss
@@ -1,7 +1,7 @@
-md-icon {
+md-icon-demo md-icon {
   color: purple;
 }
 
-md-icon.green {
+md-icon-demo md-icon.green {
   color: green;
 }
diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts
index f0ab0be3d71f..ae29dbedbd2b 100644
--- a/src/demo-app/icon/icon-demo.ts
+++ b/src/demo-app/icon/icon-demo.ts
@@ -3,7 +3,7 @@ import {MdIcon} from '../../components/icon/icon';
 import {MdIconRegistry} from '../../components/icon/icon-registry';
 
 @Component({
-  selector: 'icon-demo',
+  selector: 'md-icon-demo',
   templateUrl: 'demo-app/icon/icon-demo.html',
   styleUrls: ['demo-app/icon/icon-demo.css'],
   directives: [MdIcon],

From 6dc1af293b87cb8393a50aace6bfce5f8fd930b8 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Tue, 19 Apr 2016 20:18:19 -0400
Subject: [PATCH 32/37] Remove Renderer.detachView call since it doesn't work
 in IE11.

---
 src/components/icon/icon.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 07c856116fdb..8a295f54871b 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -186,7 +186,9 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
   private _setSvgElement(svg: SVGElement) {
     const layoutElement = this._element.nativeElement;
     // Remove existing child nodes and add the new SVG element.
-    this._renderer.detachView(Array.from(layoutElement.childNodes));
+    // We would use renderer.detachView(Array.from(layoutElement.childNodes)) here,
+    // but it fails in IE11.
+    layoutElement.innerHTML = '';
     this._renderer.projectNodes(layoutElement, [svg]);
   }
 

From 796d37f7f8a1d593db1b21e289c32ff42e36aad2 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Tue, 19 Apr 2016 22:55:25 -0400
Subject: [PATCH 33/37] comments

---
 src/components/icon/icon-registry.ts | 3 ++-
 src/components/icon/icon.ts          | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/icon/icon-registry.ts b/src/components/icon/icon-registry.ts
index e28a84d1dfbe..d9246074b4ab 100644
--- a/src/components/icon/icon-registry.ts
+++ b/src/components/icon/icon-registry.ts
@@ -7,7 +7,7 @@ import {Observable} from 'rxjs/Rx';
 /** Exception thrown when attempting to load an icon with a name that cannot be found. */
 export class MdIconNameNotFoundException extends BaseException {
   constructor(iconName: string) {
-      super(`Unable to find icon with the name "${name}"`);
+      super(`Unable to find icon with the name "${iconName}"`);
   }
 }
 
@@ -300,6 +300,7 @@ export class MdIconRegistry {
     // createElement('SVG') doesn't work as expected; the DOM ends up with
     // the correct nodes, but the SVG content doesn't render. Instead we
     // have to create an empty SVG node using innerHTML and append its content.
+    // Elements created using DOMParser.parseFromString have the same problem.
     // http://stackoverflow.com/questions/23003278/svg-innerhtml-in-firefox-can-not-display
     const svg = this._svgElementFromString('<svg></svg>');
     // Clone the node so we don't remove it from the parent icon set element.
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 8a295f54871b..44d4bd4b5047 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -187,7 +187,7 @@ export class MdIcon implements OnChanges, OnInit, AfterContentChecked {
     const layoutElement = this._element.nativeElement;
     // Remove existing child nodes and add the new SVG element.
     // We would use renderer.detachView(Array.from(layoutElement.childNodes)) here,
-    // but it fails in IE11.
+    // but it fails in IE11: https://github.com/angular/angular/issues/6327
     layoutElement.innerHTML = '';
     this._renderer.projectNodes(layoutElement, [svg]);
   }

From a4ea23eb37e7a92cb2f6b557d7c3db4aee1f6af4 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Tue, 19 Apr 2016 23:21:16 -0400
Subject: [PATCH 34/37] Move test SVGs to separate file.

---
 src/components/icon/fake-svgs.ts | 58 ++++++++++++++++++++++++++++++++
 src/components/icon/icon.spec.ts | 57 ++-----------------------------
 2 files changed, 61 insertions(+), 54 deletions(-)
 create mode 100644 src/components/icon/fake-svgs.ts

diff --git a/src/components/icon/fake-svgs.ts b/src/components/icon/fake-svgs.ts
new file mode 100644
index 000000000000..791996498b63
--- /dev/null
+++ b/src/components/icon/fake-svgs.ts
@@ -0,0 +1,58 @@
+import {
+  Response,
+  ResponseOptions} from 'angular2/http';
+
+/**
+ * Fake URLs and associated SVG documents used by tests.
+ */
+const FAKE_SVGS = (() => {
+  const svgs = new Map<string, string>();
+  svgs.set('cat.svg',
+      '<svg><path id="meow"></path></svg>');
+
+  svgs.set('dog.svg',
+      '<svg><path id="woof"></path></svg>');
+
+  svgs.set('farm-set-1.svg', `
+      <svg>
+        <defs>
+          <g id="pig"><path id="oink"></path></g>
+          <g id="cow"><path id="moo"></path></g>
+        </defs>
+      </svg>
+  `);
+
+  svgs.set('farm-set-2.svg', `
+      <svg>
+        <defs>
+          <g id="cow"><path id="moo moo"></path></g>
+          <g id="sheep"><path id="baa"></path></g>
+        </defs>
+      </svg>
+  `);
+
+  svgs.set('arrow-set.svg', `
+      <svg>
+        <defs>
+          <svg id="left-arrow"><path id="left"></path></svg>
+          <svg id="right-arrow"><path id="right"></path></svg>
+        </defs>
+      </svg>
+  `);
+
+  return svgs;
+})();
+
+/**
+ * Returns an HTTP response for a fake SVG URL.
+ */
+export function getFakeSvgHttpResponse(url: string) {
+  if (FAKE_SVGS.has(url)) {
+    return new Response(new ResponseOptions({
+      status: 200,
+      body: FAKE_SVGS.get(url),
+    }));
+  } else {
+    return new Response(new ResponseOptions({status: 404}));
+  }
+}
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 67262dabaad7..fbb58be72ddd 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -9,8 +9,6 @@ import {
 } from 'angular2/testing';
 import {
   HTTP_PROVIDERS,
-  Response,
-  ResponseOptions,
   XHRBackend} from 'angular2/http';
 import {MockBackend} from 'angular2/http/testing';
 import {
@@ -19,6 +17,7 @@ import {
 
 import {MdIcon} from './icon';
 import {MdIconRegistry} from './icon-registry';
+import {getFakeSvgHttpResponse} from './fake-svgs';
 
 /** Returns the CSS classes assigned to an element as a sorted array. */
 const sortedClassNames = (elem: Element) => elem.className.split(' ').sort();
@@ -63,63 +62,13 @@ export function main() {
         (tcb: TestComponentBuilder, mir: MdIconRegistry, mockBackend: MockBackend) => {
       builder = tcb;
       mdIconRegistry = mir;
-      // Set fake responses for various SVG URLs.
       // Keep track of requests so we can verify caching behavior.
+      // Return responses for the SVGs defined in fake-svgs.ts.
       httpRequestUrls = [];
       mockBackend.connections.subscribe((connection: any) => {
         const url = connection.request.url;
         httpRequestUrls.push(url);
-        switch (url) {
-          case 'cat.svg':
-            connection.mockRespond(new Response(new ResponseOptions({
-              status: 200,
-              body: '<svg><path id="meow"></path></svg>',
-            })));
-            break;
-          case 'dog.svg':
-            connection.mockRespond(new Response(new ResponseOptions({
-              status: 200,
-              body: '<svg><path id="woof"></path></svg>',
-            })));
-            break;
-          case 'farm-set-1.svg':
-            connection.mockRespond(new Response(new ResponseOptions({
-              status: 200,
-              body: `
-                <svg>
-                  <g id="pig"><path id="oink"></path></g>
-                  <g id="cow"><path id="moo"></path></g>
-                </svg>
-              `,
-            })));
-            break;
-          case 'farm-set-2.svg':
-            connection.mockRespond(new Response(new ResponseOptions({
-              status: 200,
-              body: `
-                <svg>
-                  <defs>
-                    <g id="cow"><path id="moo moo"></path></g>
-                    <g id="sheep"><path id="baa"></path></g>
-                  </defs>
-                </svg>
-              `,
-            })));
-            break;
-          case 'arrow-set.svg':
-            connection.mockRespond(new Response(new ResponseOptions({
-              status: 200,
-              body: `
-                <svg>
-                  <defs>
-                    <svg id="left-arrow"><path id="left"></path></svg>
-                    <svg id="right-arrow"><path id="right"></path></svg>
-                  </defs>
-                </svg>
-              `,
-            })));
-            break;
-        }
+        connection.mockRespond(getFakeSvgHttpResponse(url));
       });
     }));
 

From df6415bb3ba0ec776453a1129f7d957706981a40 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Wed, 20 Apr 2016 15:33:26 -0400
Subject: [PATCH 35/37] Use <md-icon> for menu icon.

---
 src/demo-app/demo-app.html | 2 +-
 src/demo-app/demo-app.scss | 2 +-
 src/demo-app/demo-app.ts   | 2 ++
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app.html
index 474c860682df..e7964b39bc58 100644
--- a/src/demo-app/demo-app.html
+++ b/src/demo-app/demo-app.html
@@ -22,7 +22,7 @@
   <div class="demo-root">
 
     <md-toolbar color="primary">
-      <i class="material-icons" (click)="start.open()">menu</i>
+      <md-icon (click)="start.open()">menu</md-icon>
       <div class="demo-toolbar">
         <h1>Angular Material 2 Demos</h1>
         <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
diff --git a/src/demo-app/demo-app.scss b/src/demo-app/demo-app.scss
index b4e456f75ec9..27fac1fffced 100644
--- a/src/demo-app/demo-app.scss
+++ b/src/demo-app/demo-app.scss
@@ -11,7 +11,7 @@
   }
 
   md-toolbar {
-    i {
+    md-icon {
       padding: 20px;
       cursor: pointer;
     }
diff --git a/src/demo-app/demo-app.ts b/src/demo-app/demo-app.ts
index 11ae591e8f07..9c099c50a3a3 100644
--- a/src/demo-app/demo-app.ts
+++ b/src/demo-app/demo-app.ts
@@ -12,6 +12,7 @@ import {Dir} from '../core/rtl/dir';
 import {MdButton} from '../components/button/button';
 import {MD_SIDENAV_DIRECTIVES} from '../components/sidenav/sidenav';
 import {MD_LIST_DIRECTIVES} from '../components/list/list';
+import {MdIcon} from '../components/icon/icon';
 import {MdToolbar} from '../components/toolbar/toolbar';
 import {PortalDemo} from './portal/portal-demo';
 import {ToolbarDemo} from './toolbar/toolbar-demo';
@@ -39,6 +40,7 @@ export class Home {}
     ROUTER_DIRECTIVES,
     Dir,
     MdButton,
+    MdIcon,
     MD_SIDENAV_DIRECTIVES,
     MD_LIST_DIRECTIVES,
     MdToolbar,

From 04b23fa558aaf4a6446223ddd3fa42f681a29bc7 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@google.com>
Date: Wed, 20 Apr 2016 15:48:17 -0400
Subject: [PATCH 36/37] Use watched:false in karma.config.ts.

---
 test/karma.config.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/karma.config.ts b/test/karma.config.ts
index 3a339df00ed5..e06e46a3b86a 100644
--- a/test/karma.config.ts
+++ b/test/karma.config.ts
@@ -29,9 +29,9 @@ export function config(config) {
       {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: false},
       {pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: false},
       'node_modules/reflect-metadata/Reflect.js',
-      {pattern: 'node_modules/angular2/bundles/angular2.dev.js', included: true, watched: true},
-      {pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true},
-      {pattern: 'node_modules/angular2/bundles/http.dev.js', included: true, watched: true},
+      {pattern: 'node_modules/angular2/bundles/angular2.dev.js', included: true, watched: false},
+      {pattern: 'node_modules/angular2/bundles/http.dev.js', included: true, watched: false},
+      {pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: false},
 
       {pattern: 'test/karma-test-shim.js', included: true, watched: true},
 

From 08e8cbdc6169de9bf33fcae7611ec87ebdb72454 Mon Sep 17 00:00:00 2001
From: Brian Nenninger <bnenning@gmail.com>
Date: Fri, 22 Apr 2016 20:51:04 -0400
Subject: [PATCH 37/37] PR comments for test component bindings and demo
 styles.

---
 src/components/icon/icon.spec.ts |  8 ++---
 src/demo-app/icon/icon-demo.html | 54 +++++++++++++++++---------------
 src/demo-app/icon/icon-demo.scss |  4 +--
 3 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index fbb58be72ddd..8405400fc807 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -434,7 +434,7 @@ class MdIconLigatureTestApp {
 
 @Component({
   selector: 'test-app',
-  template: `<md-icon aria-label="{{ariaLabel}}" alt="{{altText}}">{{iconName}}</md-icon>`,
+  template: `<md-icon [aria-label]="ariaLabel" [alt]="altText">{{iconName}}</md-icon>`,
   directives: [MdIcon],
 })
 class MdIconLigatureWithAriaBindingTestApp {
@@ -445,7 +445,7 @@ class MdIconLigatureWithAriaBindingTestApp {
 @Component({
   selector: 'test-app',
   template: `
-      <md-icon fontSet="{{fontSet}}" fontIcon="{{fontIcon}}" aria-label="{{ariaLabel}}"></md-icon>
+      <md-icon [fontSet]="fontSet" [fontIcon]="fontIcon" [aria-label]="ariaLabel"></md-icon>
   `,
   directives: [MdIcon],
 })
@@ -457,7 +457,7 @@ class MdIconCustomFontCssTestApp {
 
 @Component({
   selector: 'test-app',
-  template: `<md-icon svgSrc="{{iconUrl}}" aria-label="{{ariaLabel}}"></md-icon>`,
+  template: `<md-icon [svgSrc]="iconUrl" [aria-label]="ariaLabel"></md-icon>`,
   directives: [MdIcon],
 })
 class MdIconFromSvgUrlTestApp {
@@ -467,7 +467,7 @@ class MdIconFromSvgUrlTestApp {
 
 @Component({
   selector: 'test-app',
-  template: `<md-icon svgIcon="{{iconName}}" aria-label="{{ariaLabel}}"></md-icon>`,
+  template: `<md-icon [svgIcon]="iconName" [aria-label]="ariaLabel"></md-icon>`,
   directives: [MdIcon],
 })
 class MdIconFromSvgNameTestApp {
diff --git a/src/demo-app/icon/icon-demo.html b/src/demo-app/icon/icon-demo.html
index 1dc527be3927..744a68c44bae 100644
--- a/src/demo-app/icon/icon-demo.html
+++ b/src/demo-app/icon/icon-demo.html
@@ -1,31 +1,33 @@
-<p>
-  These are some icons.
-</p>
+<div class="demo-icon">
+  <p>
+    These are some icons.
+  </p>
 
-<p>
-  From URL:
-  <md-icon svgSrc="/demo-app/icon/assets/search-icon.svg"></md-icon>
-</p>
+  <p>
+    From URL:
+    <md-icon svgSrc="/demo-app/icon/assets/search-icon.svg"></md-icon>
+  </p>
 
-<p>
-  By name registered with MdIconProvider:
-  <md-icon svgIcon="thumb-up" class="green"></md-icon>
-  <md-icon svgIcon="thumb-up"></md-icon>
-</p>
+  <p>
+    By name registered with MdIconProvider:
+    <md-icon svgIcon="thumb-up" class="green"></md-icon>
+    <md-icon svgIcon="thumb-up"></md-icon>
+  </p>
 
-<p>
-  From icon set:
-  <md-icon svgIcon="core:alarm"></md-icon>
-  <md-icon svgIcon="core:accessibility"></md-icon>
-  <md-icon svgIcon="core:alarm"></md-icon>
-</p>
+  <p>
+    From icon set:
+    <md-icon svgIcon="core:alarm"></md-icon>
+    <md-icon svgIcon="core:accessibility"></md-icon>
+    <md-icon svgIcon="core:alarm"></md-icon>
+  </p>
 
-<p>
-  Ligature from Material Icons font:
-  <md-icon>home</md-icon>
-</p>
+  <p>
+    Ligature from Material Icons font:
+    <md-icon>home</md-icon>
+  </p>
 
-<p>
-  Custom icon font and CSS:
-  <md-icon fontSet="fontawesome" fontIcon="fa-birthday-cake"></md-icon>
-</p>
+  <p>
+    Custom icon font and CSS:
+    <md-icon fontSet="fontawesome" fontIcon="fa-birthday-cake"></md-icon>
+  </p>
+</div>
\ No newline at end of file
diff --git a/src/demo-app/icon/icon-demo.scss b/src/demo-app/icon/icon-demo.scss
index 27663d1390c7..7dddcd618e67 100644
--- a/src/demo-app/icon/icon-demo.scss
+++ b/src/demo-app/icon/icon-demo.scss
@@ -1,7 +1,7 @@
-md-icon-demo md-icon {
+.demo-icon md-icon {
   color: purple;
 }
 
-md-icon-demo md-icon.green {
+.demo-icon md-icon.green {
   color: green;
 }