diff --git a/docs/app/img/icons/sets/symbol-icons.svg b/docs/app/img/icons/sets/symbol-icons.svg
new file mode 100644
index 00000000000..2c415ce4bd9
--- /dev/null
+++ b/docs/app/img/icons/sets/symbol-icons.svg
@@ -0,0 +1,4 @@
+<svg>
+<symbol id="spinner" viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/><animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="3s" repeatCount="indefinite"/></path></symbol>
+<symbol id="angular" viewBox="-3.5 -3.5 165.908 175.75"><g transform="translate(-4.054,-4.375)"><polygon style="fill:#b3b3b3" points="153.4 137.8 166.5 29.46 83.24 0.875 0.554 29.98 13.62 138.3 83.33 176.6"/><polygon style="fill:#a6120d" points="158.2 35.72 83.05 10.09 83.05 167.5 146 132.6"/><polygon style="fill:#dd1b16" points="9.833 36.18 21.03 133.1 83.05 167.5 83.05 10.09"/><path style="fill:#f2f2f2" d="m103.7 93.87-20.69 9.675h-21.77l-10.25 25.7-19.07 0.3 51.13-113.7zm-2-4.87-18.51-36.73-15.22 36.1h15.08z"/><polygon style="fill:#b3b3b3" points="83.05 103.5 107.1 103.5 118.3 129.5 136.5 129.9 83.05 15.8 83.19 52.27 100.5 88.4 83.09 88.4"/></g></symbol>
+</svg>
\ No newline at end of file
diff --git a/src/components/icon/demoSvgIconSets/index.html b/src/components/icon/demoSvgIconSets/index.html
index fd84a2a9a05..6232abc3dbd 100644
--- a/src/components/icon/demoSvgIconSets/index.html
+++ b/src/components/icon/demoSvgIconSets/index.html
@@ -3,9 +3,11 @@
     <p>Display an icon from a pre-registered set of icons:</p>
 
     <p>
-      <md-icon md-svg-icon="alarm"         style="color: #0F0;"                        aria-label="Alarm Icon"></md-icon>
-      <md-icon md-svg-icon="social:cake"   style="color: #f00;width:60px;height:60px;" aria-label="Cake Icon"></md-icon>
-      <md-icon md-svg-icon="social:people" style="color: #00F;" class="s48"            aria-label="People Icon"></md-icon>
+      <md-icon md-svg-icon="alarm"          style="color: #0F0;"                        aria-label="Alarm Icon"></md-icon>
+      <md-icon md-svg-icon="social:cake"    style="color: #f00;width:60px;height:60px;" aria-label="Cake Icon"></md-icon>
+      <md-icon md-svg-icon="social:people"  style="color: #00F;" class="s48"            aria-label="People Icon"></md-icon>
+      <md-icon md-svg-icon="symbol:spinner" style="color: #f00;width:60px;height:60px;" aria-label="Spinner Icon"></md-icon>
+      <md-icon md-svg-icon="symbol:angular" class="s48"                                 aria-label="Angular Icon"></md-icon>
     </p>
 
 </div>
diff --git a/src/components/icon/demoSvgIconSets/script.js b/src/components/icon/demoSvgIconSets/script.js
index 2ebf6524c3a..b815a6d38a0 100644
--- a/src/components/icon/demoSvgIconSets/script.js
+++ b/src/components/icon/demoSvgIconSets/script.js
@@ -4,5 +4,6 @@ angular.module('appSvgIconSets', ['ngMaterial'])
   .config(['$mdIconProvider', function($mdIconProvider) {
     $mdIconProvider
       .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
+      .iconSet('symbol', 'img/icons/sets/symbol-icons.svg', 24)
       .defaultIconSet('img/icons/sets/core-icons.svg', 24);
   }]);
diff --git a/src/components/icon/icon.spec.js b/src/components/icon/icon.spec.js
index 29f7b313996..d847fbb46d3 100644
--- a/src/components/icon/icon.spec.js
+++ b/src/components/icon/icon.spec.js
@@ -406,6 +406,7 @@ describe('MdIcon service', function() {
       .icon('android'           , 'android.svg')
       .icon('c2'                , 'c2.svg')
       .iconSet('social'         , 'social.svg' )
+      .iconSet('symbol'         , 'symbol.svg' )
       .iconSet('emptyIconSet'   , 'emptyGroup.svg' )
       .defaultIconSet('core.svg');
 
@@ -419,6 +420,7 @@ describe('MdIcon service', function() {
 
     $templateCache.put('android.svg'    , '<svg><g id="android"></g></svg>');
     $templateCache.put('social.svg'     , '<svg><g id="s1"></g><g id="s2"></g></svg>');
+    $templateCache.put('symbol.svg'     , '<svg><symbol id="s1"></symbol><symbol id="s2" viewBox="0 0 32 32"></symbol></svg>');
     $templateCache.put('core.svg'       , '<svg><g id="c1"></g><g id="c2" class="core"></g></svg>');
     $templateCache.put('c2.svg'         , '<svg><g id="c2" class="override"></g></svg>');
     $templateCache.put('emptyGroup.svg' , '<svg></svg>');
@@ -464,6 +466,22 @@ describe('MdIcon service', function() {
         $scope.$digest();
       });
 
+      it('should append configured SVG icon from symbol', function() {
+        var expected = updateDefaults('<svg xmlns="http://www.w3.org/2000/svg"></svg>');
+        $mdIcon('symbol:s1').then(function(el) {
+          expect(el.outerHTML).toEqual(expected);
+        });
+        $scope.$digest();
+      });
+
+      it('should append configured SVG icon from symbol with viewBox', function() {
+        var expected = updateDefaults('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>');
+        $mdIcon('symbol:s2').then(function(el) {
+          expect(el.outerHTML).toEqual(expected);
+        });
+        $scope.$digest();
+      });
+
       it('should append configured SVG icon from default group', function() {
         var expected = updateDefaults('<svg xmlns="http://www.w3.org/2000/svg"><g id="c1"></g></svg>');
         $mdIcon('c1').then(function(el) {
diff --git a/src/components/icon/js/iconService.js b/src/components/icon/js/iconService.js
index ac8ce8d18da..266b6a9faf8 100644
--- a/src/components/icon/js/iconService.js
+++ b/src/components/icon/js/iconService.js
@@ -575,7 +575,14 @@ function MdIconService(config, $templateRequest, $q, $log, $mdUtil, $sce) {
    *  Define the Icon class
    */
   function Icon(el, config) {
-    if (el && el.tagName != 'svg') {
+    // If the node is a <symbol>, it won't be rendered so we have to convert it into <svg>.
+    if (el && el.tagName.toLowerCase() === 'symbol') {
+      var viewbox = el.getAttribute('viewBox');
+      el = angular.element('<svg xmlns="http://www.w3.org/2000/svg">').html(el.innerHTML)[0];
+      if (viewbox) el.setAttribute('viewBox', viewbox);
+    }
+
+    if (el && el.tagName.toLowerCase() !== 'svg') {
       el = angular.element('<svg xmlns="http://www.w3.org/2000/svg">').append(el.cloneNode(true))[0];
     }