feat(icon): Add support to svg symbol icon set (#11162)

Add support for SVG icon sets with symbol elements.
SVG icon sprite with symbols is most commonly produced by:
svg-sprite-loader, webpack-svgstore-plugin, gulp-svg-sprites ...
This may consider also as backport, as angular material2 project support
this kind of sets.

This change is related to #8689 issue and
directly related to closed issue #1514

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>

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);
   }]);

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) {

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];
     }