fix(icon): improve error recovery and item caching

Merged additional unit tests and announce error methods
Improved caching of Icon items
- Only prepareIcon styles 1x
- Add xmlns name space attribute to SVG (if not present).
Restored simplified icon - demoBasic version
Resolved conflicts of different components using different default icon sets.

Closes #1477.

src/components/gridList/demoBasicUsage/index.html

@@ -1,18 +1,48 @@
-<div ng-app="gridListDemo" ng-controller="gridListDemoCtrl as vm">
+<div ng-controller="AppCtrl as appCtrl">
+  <md-grid-list
+        md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
+        md-row-height-gt-md="1:1" md-row-height="2:2"
+        md-gutter="12x" md-gutter-gt-sm="8px" >
 
-    <md-grid-list
-          md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
-          md-row-height-gt-md="1:1" md-row-height="4:3"
-          md-gutter="8px" md-gutter-gt-sm="4px" >
+    <md-grid-tile class="gray"
+        md-rowspan="3" md-colspan="2">
+      <md-grid-tile-footer>
+        <h3>#1: (3r x 2c)</h3>
+      </md-grid-tile-footer>
+    </md-grid-tile>
 
-        <md-grid-tile ng-repeat="tile in vm.tiles"
-                      md-rowspan="{{tile.span.row}}"
-                      md-colspan="{{tile.span.col}}"
-                      ng-class="tile.background" >
-            <md-icon md-svg-icon="{{tile.icon}}"></md-icon>
-            <md-grid-tile-footer><h3>{{tile.title}}</h3></md-grid-tile-footer>
-        </md-grid-tile>
+    <md-grid-tile class="green">
+      <md-grid-tile-footer>
+        <h3>#2: (1r x 1c)</h3>
+      </md-grid-tile-footer>
+    </md-grid-tile>
 
-      </md-grid-list>
+    <md-grid-tile class="yellow">
+      <md-grid-tile-footer>
+        <h3>#3: (1r x 1c)</h3>
+      </md-grid-tile-footer>
+    </md-grid-tile>
 
+    <md-grid-tile class="blue"
+        md-rowspan="2">
+      <md-grid-tile-footer>
+        <h3>#4: (2r x 1c)</h3>
+      </md-grid-tile-footer>
+    </md-grid-tile>
+
+    <md-grid-tile class="red"
+        md-rowspan="2" md-colspan="2">
+      <md-grid-tile-footer>
+        <h3>#5: (2r x 2c)</h3>
+      </md-grid-tile-footer>
+    </md-grid-tile>
+
+    <md-grid-tile class="green"
+        md-rowspan="2" >
+      <md-grid-tile-footer>
+        <h3>#6: (2r x 1c)</h3>
+      </md-grid-tile-footer>
+    </md-grid-tile>
+
+  </md-grid-list>
 </div>

src/components/gridList/demoBasicUsage/script.js

@@ -1,57 +1,3 @@
 
-angular
-  .module('gridListDemoApp', ['ngMaterial'])
-  .controller('gridListDemoCtrl', function($scope) {
-
-    this.tiles = buildGridModel({
-            icon : "avatar:svg-",
-            title: "Svg-",
-            background: ""
-          });
-
-    function buildGridModel(tileTmpl){
-      var it, results = [ ];
-
-      for (var j=0; j<11; j++) {
-
-        it = angular.extend({},tileTmpl);
-        it.icon  = it.icon + (j+1);
-        it.title = it.title + (j+1);
-        it.span  = { row : "1", col : "1" };
-
-        switch(j+1) {
-          case 1:
-            it.background = "red";
-            it.span.row = it.span.col = 2;
-            break;
-
-          case 2: it.background = "green";         break;
-          case 3: it.background = "darkBlue";      break;
-          case 4:
-            it.background = "blue";
-            it.span.col = 2;
-            break;
-
-          case 5:
-            it.background = "yellow";
-            it.span.row = it.span.col = 2;
-            break;
-
-          case 6: it.background = "pink";          break;
-          case 7: it.background = "darkBlue";      break;
-          case 8: it.background = "purple";        break;
-          case 9: it.background = "deepBlue";      break;
-          case 10: it.background = "lightPurple";  break;
-          case 11: it.background = "yellow";       break;
-        }
-
-        results.push(it);
-      }
-      return results;
-    }
-  })
-  .config( function( $mdIconProvider ){
-    $mdIconProvider
-      .iconSet("avatar", './icons/avatar-icons.svg')
-      .defaultIconSize(128);
-  });
+angular.module('gridListDemo1', ['ngMaterial'])
+.controller('AppCtrl', function($scope) {});

src/components/gridList/demoBasicUsage/styles.css

@@ -0,0 +1,13 @@
+md-grid-list { margin: 8px; }
+.gray { background: #f5f5f5; }
+.green { background: #b9f6ca; }
+.yellow { background: #ffff8d; }
+.blue { background: #84ffff; }
+.purple { background: #b388ff; }
+.red { background: #ff8a80; }
+
+
+
+md-grid-tile {
+  transition: all 700ms ease-out 50ms;
+}

src/components/gridList/demoDynamicTiles/index.html

@@ -0,0 +1,18 @@
+<div ng-app="gridListDemo" ng-controller="gridListDemoCtrl as vm">
+
+    <md-grid-list
+          md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
+          md-row-height-gt-md="1:1" md-row-height="4:3"
+          md-gutter="8px" md-gutter-gt-sm="4px" >
+
+        <md-grid-tile ng-repeat="tile in vm.tiles"
+                      md-rowspan="{{tile.span.row}}"
+                      md-colspan="{{tile.span.col}}"
+                      ng-class="tile.background" >
+            <md-icon md-svg-icon="{{tile.icon}}"></md-icon>
+            <md-grid-tile-footer><h3>{{tile.title}}</h3></md-grid-tile-footer>
+        </md-grid-tile>
+
+      </md-grid-list>
+
+</div>

src/components/gridList/demoDynamicTiles/script.js

@@ -0,0 +1,55 @@
+
+angular
+  .module('gridListDemoApp', ['ngMaterial'])
+  .controller('gridListDemoCtrl', function($scope) {
+
+    this.tiles = buildGridModel({
+            icon : "avatar:svg-",
+            title: "Svg-",
+            background: ""
+          });
+
+    function buildGridModel(tileTmpl){
+      var it, results = [ ];
+
+      for (var j=0; j<11; j++) {
+
+        it = angular.extend({},tileTmpl);
+        it.icon  = it.icon + (j+1);
+        it.title = it.title + (j+1);
+        it.span  = { row : "1", col : "1" };
+
+        switch(j+1) {
+          case 1:
+            it.background = "red";
+            it.span.row = it.span.col = 2;
+            break;
+
+          case 2: it.background = "green";         break;
+          case 3: it.background = "darkBlue";      break;
+          case 4:
+            it.background = "blue";
+            it.span.col = 2;
+            break;
+
+          case 5:
+            it.background = "yellow";
+            it.span.row = it.span.col = 2;
+            break;
+
+          case 6: it.background = "pink";          break;
+          case 7: it.background = "darkBlue";      break;
+          case 8: it.background = "purple";        break;
+          case 9: it.background = "deepBlue";      break;
+          case 10: it.background = "lightPurple";  break;
+          case 11: it.background = "yellow";       break;
+        }
+
+        results.push(it);
+      }
+      return results;
+    }
+  })
+  .config( function( $mdIconProvider ){
+    $mdIconProvider.iconSet("avatar", './icons/avatar-icons.svg', 128);
+  });

src/components/icon/demoSvgIconSets/script.js

@@ -2,6 +2,7 @@
 angular.module('appSvgIconSets', ['ngMaterial'])
   .controller('DemoCtrl', function($scope) {})
   .config(function($mdIconProvider) {
-    $mdIconProvider.iconSet('social', 'img/icons/sets/social-icons.svg')
-                   .defaultIconSet('img/icons/sets/core-icons.svg');
+    $mdIconProvider
+      .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
+      .defaultIconSet('img/icons/sets/core-icons.svg', 24);
   });

src/components/icon/demoUsingTemplateCache/script.js

@@ -6,8 +6,9 @@ angular.module('appUsingTemplateCache', ['ngMaterial'])
     // Register icon IDs with sources. Future $mdIcon( <id> ) lookups
     // will load by url and retrieve the data via the $http and $templateCache
 
-    $mdIconProvider.iconSet('core', 'img/icons/sets/core-icons.svg')
-                   .icon('social:cake', 'img/icons/cake.svg');
+    $mdIconProvider
+      .iconSet('core', 'img/icons/sets/core-icons.svg',24)
+      .icon('social:cake', 'img/icons/cake.svg',24);
 
   })
   .run(function($http, $templateCache) {

src/components/icon/icon.spec.js → src/components/icon/iconDirective.spec.js

@@ -1,59 +1,84 @@
 describe('mdIcon directive', function() {
   var el;
+  var $scope;
+  var $compile;
+  var $q;
 
   beforeEach(module('material.core'));
-  beforeEach(module('material.components.icon',function($mdIconProvider){
-    $mdIconProvider
-      .icon('android'  , 'android.svg')
-      .iconSet('social', 'social.svg' )
-      .defaultIconSet('core.svg');
-  }));
+  beforeEach(module('material.components.icon'));
+
+  var mockIconSvc = function(id) {
+    var deferred = $q.defer();
+    switch(id) {
+      case 'android':
+        deferred.resolve('<svg><g id="android"></g></svg>');
+        break;
+      case 'cake':
+        deferred.resolve('<svg><g id="cake"></g></svg>');
+        break;
+      case 'android.svg':
+        deferred.resolve('<svg><g id="android"></g></svg>');
+        break;
+      case 'cake.svg':
+        deferred.resolve('<svg><g id="cake"></g></svg>');
+        break;
+    }
+    return deferred.promise;
+  }
 
-  beforeEach(inject(function($templateCache){
+  function make(html) {
+    var el;
+    el = $compile(html)($scope);
+    $scope.$digest();
+    return el;
+  }
 
-    $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('core.svg'   , '<svg><g id="c1"></g><g id="c2"></g></svg>');
+  beforeEach(function() {
+    module(function($provide) {
+      $provide.value('$mdIcon', mockIconSvc);
+    });
 
-  }));
+    inject(function($rootScope, _$compile_, _$q_){
+      $scope = $rootScope;
+      $compile = _$compile_;
+      $q = _$q_;
+    });
+  });
 
 
   describe('using md-font-icon=""', function() {
+
     it('should render correct HTML with md-font-icon value as class', function() {
       el = make( '<md-icon md-font-icon="android"></md-icon>');
       expect(el.html()).toEqual('<span class="md-font android" ng-class="fontIcon"></span>');
     });
-  });
 
+  });
 
   describe('using md-svg-icon=""', function() {
 
-    it('should append configured SVG single icon', function() {
-      el = make('<md-icon md-svg-icon="android"></md-icon>');
-      var expected = updateDefaults('<svg><g id="android"></g></svg>');
-      expect(el.html()).toEqual(expected);
-    });
-
-    it('should append configured SVG icon from named group', function() {
-      el = make('<md-icon md-svg-icon="social:s1"></md-icon>');
-      var expected = updateDefaults('<svg xmlns="http://www.w3.org/2000/svg"><g id="s1"></g></g></svg>');
-      expect(el.html()).toEqual(expected);
-    });
-
-    it('should append configured SVG icon from default group', function() {
-      el = make('<md-icon md-svg-icon="c1"></md-icon>');
-      var expected = updateDefaults('<svg xmlns="http://www.w3.org/2000/svg"><g id="c1"></g></g></svg>');
-      expect(el.html()).toEqual(expected);
+    it('should update mdSvgIcon when attribute value changes', function() {
+      $scope.iconName = 'android';
+      el = make('<md-icon md-svg-icon="{{ iconName }}"></md-icon>');
+      var iScope = el.isolateScope();
+      expect(iScope.svgIcon).toEqual('android');
+      $scope.iconName = 'cake';
+      $scope.$digest();
+      expect(iScope.svgIcon).toEqual('cake');
     });
 
   });
 
-
   describe('using md-svg-src=""', function() {
 
-    it('should append SVG from URL to md-icon', function() {
-      el = make('<md-icon md-svg-src="android.svg"></md-icon>');
-      expect(el.html()).toEqual( updateDefaults('<svg><g id="android"></g></svg>') );
+    it('should update mdSvgSrc when attribute value changes', function() {
+      $scope.url = 'android.svg';
+      el = make('<md-icon md-svg-src="{{ url }}"></md-icon>');
+      var iScope = el.isolateScope();
+      expect(iScope.svgSrc).toEqual('android.svg');
+      $scope.url = 'cake.svg';
+      $scope.$digest();
+      expect(iScope.svgSrc).toEqual('cake.svg');
     });
 
   });
@@ -100,33 +125,4 @@ describe('mdIcon directive', function() {
 
   });
 
-
-  function make(html) {
-    var el;
-    inject(function($compile, $rootScope) {
-      el = $compile(html)($rootScope);
-      $rootScope.$digest();
-    });
-
-    return el;
-  }
-
-  function updateDefaults(svg) {
-    svg = angular.element(svg);
-
-    svg.attr({
-      'fit'   : '',
-      'height': '100%',
-      'width' : '100%',
-      'preserveAspectRatio': 'xMidYMid meet',
-      'viewBox' : svg.attr('viewBox') || '0 0 24 24'
-    })
-    .css( {
-      'pointer-events' : 'none',
-      'display' : 'block'
-    });
-
-    return svg[0].outerHTML;
-  }
-
 });