fix(icon): add support for themes with md-primary, etc.

angular · Feb 12, 2015 · cdea9a2 · cdea9a2
1 parent a410421
commit cdea9a2
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 19 deletions.
diff --git a/src/components/icon/demoFontIcons/index.html b/src/components/icon/demoFontIcons/index.html
@@ -7,12 +7,14 @@
       <div class="preview-glyphs">
 
         <md-icon ng-repeat="size in sizes"
-                 md-font-icon="{{ font.name }}"
-                 ng-style="{color: font.color, 'font-size': size + 'px', height: size + 'px'}"
-                 alt="{{ font.name + size }}"
-                 class="step">
+                         md-font-icon="{{ font.name }}"
+                         ng-style="{color: !font.theme && font.color, 'font-size': size + 'px', height: size + 'px'}"
+                         ng-class="font.theme"
+                         alt="{{ font.name + size }}"
+                         class="step">
         </md-icon>
 
+
       </div>
 
       <div class="preview-scale">

diff --git a/src/components/icon/demoFontIcons/script.js b/src/components/icon/demoFontIcons/script.js
@@ -1,17 +1,26 @@
 
-angular.module('appDemoFontIcons', ['ngMaterial'])
-.controller('DemoCtrl', function( $scope ) {
-    // Create list of font-icon names with color overrides
-    var iconData = [
-          {name: 'icon-home'        , color: "#777" },
-          {name: 'icon-user-plus'   , color: "rgb(89, 226, 168)" },
-          {name: 'icon-google-plus2', color: "#A00" },
-          {name: 'icon-youtube4'    , color:"#00A" },
-          {name: 'icon-settings'    , color:"black" }
-        ];
+angular
+  .module('appDemoFontIcons', ['ngMaterial'])
+  .controller('DemoCtrl', function( $scope ) {
+      // Create list of font-icon names with color overrides
+      var iconData = [
+            {name: 'icon-home'        , color: "#777" },
+            {name: 'icon-user-plus'   , color: "rgb(89, 226, 168)" },
+            {name: 'icon-google-plus2', color: "#A00" },
+            {name: 'icon-youtube4'    , color:"#00A" },
+             // Use theming to color the font-icon
+            {name: 'icon-settings'    , color:"#A00", theme:"md-warn md-hue-5"}
+          ];
 
-    // Create a set of sizes...
-    $scope.sizes = [12, 21, 36, 48];
-    $scope.fonts = [].concat(iconData);
+      // Create a set of sizes...
+      $scope.sizes = [12, 21, 36, 48];
+      $scope.fonts = [].concat(iconData);
 
-});
+  })
+  .config(function($mdThemingProvider){
+    // Update the theme colors to use themes on font-icons
+    $mdThemingProvider.theme('default')
+          .primaryPalette("red")
+          .accentPalette('green')
+          .warnPalette('blue');
+  });
diff --git a/src/components/icon/iconDirective.js b/src/components/icon/iconDirective.js
@@ -42,7 +42,7 @@ angular.module('material.components.icon', [
  *  <md-icon md-svg-src="{{ getAndroid() }}" alt="android " ></md-icon>
  * </hljs>
  */
-function mdIconDirective($mdIcon, $mdAria ) {
+function mdIconDirective($mdIcon, $mdTheming, $mdAria ) {
   return {
     scope: {
       fontIcon: '@mdFontIcon',
@@ -63,6 +63,8 @@ function mdIconDirective($mdIcon, $mdAria ) {
    * Supports embedded SVGs, font-icons, & external SVGs
    */
   function postLink(scope, element, attr) {
+    $mdTheming(element);
+
     var ariaLabel = attr.alt || scope.fontIcon || scope.svgIcon;
     var attrName = attr.$normalize(attr.$attr.mdSvgIcon || attr.$attr.mdSvgSrc || '');