feat(icons): add support for font-icons using ligatures

src/components/icon/demoFontIcons/script.js → src/components/icon/demoFontIconsWithClassnames/script.js

@@ -1,6 +1,6 @@
 
 angular
-  .module('appDemoFontIcons', ['ngMaterial'])
+  .module('appDemoFontIconsWithClassnames', ['ngMaterial'])
   .controller('DemoCtrl', function( $scope ) {
       // Create list of font-icon names with color overrides
       var iconData = [

src/components/icon/demoFontIcons/style.css → src/components/icon/demoFontIconsWithClassnames/style.css

@@ -1,11 +1,11 @@
 
-.appDemoFontIcons {
+.appDemoFontIconsWithClassnames {
     padding:25px;
     width: 100%;
 }
-.appDemoFontIcons,
-.appDemoFontIcons *:before,
-.appDemoFontIcons *:after {
+.appDemoFontIconsWithClassnames,
+.appDemoFontIconsWithClassnames *:before,
+.appDemoFontIconsWithClassnames *:after {
   box-sizing: border-box;
 }
 
@@ -18,7 +18,7 @@
       line-height:1;
       font-weight:normal;
       font-style:normal;
-      speak:none;
+
       text-decoration:inherit;
       text-transform:none;
       text-rendering:optimizeLegibility;

src/components/icon/demoFontIconsWithLigatures/index.html

@@ -0,0 +1,31 @@
+<div ng-controller="DemoCtrl" ng-cloak >
+
+  <p>
+    Display 4 Material Design font-icons using ligatures [instead of CSS names]; each with different sizes and colors<br/>
+  </p>
+
+  <!-- Display font icons from Icomoon.io: -->
+  <div class="glyph" ng-repeat="font in fonts" layout="row">
+    <div ng-repeat="it in sizes" flex layout-align="center center" style="text-align: center;" layout="column">
+      <div flex></div>
+      <div class="preview-glyphs">
+        <md-icon md-font-library="material-icons"
+            ng-style="{color: font.color}"
+            alt="{{ font.name }}"
+            class="step"
+            ng-class="it.size">
+          {{ font.name }}
+        </md-icon>
+      </div>
+    </div>
+  </div>
+
+  <p style="font-size:0.7em;padding-left: 25%">
+    <span style="color:darkblue; font-weight: bold">Cool Tip</span>:
+    Copy an icon and then paste in a text editor to see its textual name!
+  </p>
+
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+        rel="stylesheet">
+
+</div>

src/components/icon/demoFontIconsWithLigatures/script.js

@@ -0,0 +1,23 @@
+
+angular
+  .module('appDemoFontIconsWithLigatures', ['ngMaterial'])
+  .controller('DemoCtrl', function( $scope ) {
+      // Specify a list of font-icons with ligatures and color overrides
+      var iconData = [
+            {name: 'accessibility'  , color: "#777" },
+            {name: 'question_answer', color: "rgb(89, 226, 168)" },
+            {name: 'backup'         , color: "#A00" },
+            {name: 'email'          , color: "#00A" }
+          ];
+
+      $scope.fonts = [].concat(iconData);
+
+      // Create a set of sizes...
+      $scope.sizes = [
+        {size:"md-18",padding:0},
+        {size:"md-24",padding:2},
+        {size:"md-36",padding:6},
+        {size:"md-48",padding:10}
+      ];
+
+  });

src/components/icon/demoFontIconsWithLigatures/style.css

@@ -0,0 +1,73 @@
+
+.appDemoFontIconsWithLigatures {
+    padding:25px;
+    width: 100%;
+}
+.appDemoFontIconsWithLigatures,
+.appDemoFontIconsWithLigatures *:before,
+.appDemoFontIconsWithLigatures *:after {
+  box-sizing: border-box;
+}
+
+header {
+  overflow: hidden;
+}
+
+header h1 {
+  color: #888;
+  font-size: 36px;
+  font-weight: 300;
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 1200px;
+  min-width: 960px;
+  padding: 40px 40px;
+  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.glyph {
+  border-bottom: 1px dotted #ccc;
+  padding: 10px 0 20px;
+  margin-bottom: 20px;
+}
+
+.preview-scale,
+.preview-glyphs {
+  display: flex;
+  flex-direction: row;
+}
+
+.preview-scale {
+  color: #888;
+  font-size: 12px;
+  margin-top: 24px;
+}
+
+.step {
+  flex-grow: 1;
+  line-height: 0.5;
+}
+
+.usage { margin-top: 10px; }
+.usage input {
+  font-family: monospace;
+  text-align: center;
+}
+.usage .point { width: 150px; }
+.usage .class { width: 250px; }
+
+/* Rules for sizing the icon.*/
+.material-icons.md-18 { font-size: 18px; }
+.material-icons.md-24 { font-size: 24px; }
+.material-icons.md-36 { font-size: 36px; }
+.material-icons.md-48 { font-size: 48px; }
+
+/* Rules for using icons as black on a light background.*/
+.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
+.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
+
+/* Rules for using icons as white on a dark background.*/
+.material-icons.md-light { color: rgba(255, 255, 255, 1); }
+.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

src/components/icon/iconDirective.js

@@ -17,60 +17,167 @@ angular.module('material.components.icon', [
  * @restrict E
  *
  * @description
- * The `md-icon` directive is an markup element useful for showing an icon based on a font-face
- * or a SVG. Both external SVGs (via URLs) or cached SVG from icon sets can be
- * easily loaded and used.
+ * The `<md-icon />` directive is an markup element useful for showing an icon based on a font-icon
+ * or a SVG. Icons are view-only elements that should not be used directly as buttons; instead nest a `<md-icon />`
+ * inside a `md-button` to add hover and click features.
  *
+ * When using SVGs, both external SVGs (via URLs) or sets of SVGs [from icon sets] can be
+ * easily loaded and used.When use font-icons, developers must following three (3) simple steps:
+ *
+ * <ol>
+ * <li>Load the font library. e.g.<br/>
+ *    &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+ *    rel="stylesheet"&gt;
+ * </li>
+ * <li> Use either (a) font-icon class names or (b) font ligatures to render the font glyph by using its textual name</li>
+ * <li> Use &lt;md-icon md-font-icon="classname" /&gt; or <br/>
+ *     use &lt;md-icon md-font-library="library_style_name"&gt; textual_name &lt;/md-icon&gt; or <br/>
+ *     use &lt;md-icon md-font-library="library_style_name"&gt; numerical_character_reference &lt;/md-icon&gt;
+ * </li>
+ * </ol>
+ *
+ * Full details for these steps can be found:
+ *
+ * <ul>
+ * <li>http://google.github.io/material-design-icons/</li>
+ * <li>http://google.github.io/material-design-icons/#icon-font-for-the-web</li>
+ * </ul>
+ *
+ * The Material Design icon style <code>.material-icons</code> and the icon font references are published in
+ * Material Design Icons:
+ *
+ * <ul>
+ * <li>http://www.google.com/design/icons/</li>
+ * <li>https://www.google.com/design/icons/#ic_accessibility</li>
+ * </ul>
+ *
+ * <h2 id="material_design_icons">Material Design Icons</h2>
+ * Using the Material Design Icon-Selector, developers can easily and quickly search for a Material Design font-icon and
+ * determine its textual name and character reference code. Click on any icon to see the slide-up information
+ * panel with details regarding a SVG download or information on the font-icon usage.
+ *
+ * <a href="https://www.google.com/design/icons/#ic_accessibility" target="_blank" style="border-bottom:none;">
+ * <img src="https://cloud.githubusercontent.com/assets/210413/7902490/fe8dd14c-0780-11e5-98fb-c821cc6475e6.png"
+ *      alt="Material Design Icon-Selector" style="max-width:75%;padding-left:10%">
+ * </a>
+ *
+ * <span class="image_caption">
+ *  Click on the image above to link to the
+ *  <a href="https://www.google.com/design/icons/#ic_accessibility" target="_blank">Material Design Icon-Selector</a>.
+ * </span>
+ *
+ * @param {string} md-font-icon String name of CSS icon associated with the font-face will be used
+ * to render the icon. Requires the fonts and the named CSS styles to be preloaded.
+ * @param {string} md-font-library String name of CSS icon associated with the font-face will be used
+ * to render the icon. Requires the fonts and the named CSS styles to be preloaded.
  * @param {string} md-svg-src String URL [or expression ] used to load, cache, and display an external SVG.
  * @param {string} md-svg-icon String name used for lookup of the icon from the internal cache; interpolated strings or
  * expressions may also be used. Specific set names can be used with the syntax `<set name>:<icon name>`.<br/><br/>
  * To use icon sets, developers are required to pre-register the sets using the `$mdIconProvider` service.
- * @param {string} md-font-icon String name of CSS icon associated with the font-face will be used
- * to render the icon. Requires the fonts and the named CSS styles to be preloaded.
  * @param {string=} alt Labels icon for accessibility. If an empty string is provided, icon
  * will be hidden from accessibility layer with `aria-hidden="true"`. If there's no alt on the icon
  * nor a label on the parent element, a warning will be logged to the console.
  *
  * @usage
+ * When using SVGs:
  * <hljs lang="html">
- *  <md-icon md-font-icon="android"          alt="android " ></md-icon>
- *  <md-icon md-svg-icon="action:android"    alt="android " ></md-icon>
+ *
+ *  <!-- Icon ID; may contain optional icon set prefix; icons must registered using $mdIconProvider -->
+ *  <md-icon md-svg-icon="social:android"    alt="android " ></md-icon>
+ *
+ *  <!-- Icon urls; may be preloaded in templateCache -->
  *  <md-icon md-svg-src="/android.svg"       alt="android " ></md-icon>
  *  <md-icon md-svg-src="{{ getAndroid() }}" alt="android " ></md-icon>
+ *
  * </hljs>
+ *
+ * Use the <code>$mdIconProvider</code> to configure your application with
+ * svg iconsets.
+ *
+ * <hljs lang="js">
+ *  angular.module('appSvgIconSets', ['ngMaterial'])
+ *    .controller('DemoCtrl', function($scope) {})
+ *    .config(function($mdIconProvider) {
+ *      $mdIconProvider
+ *         .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
+ *         .defaultIconSet('img/icons/sets/core-icons.svg', 24);
+ *     });
+ * </hljs>
+ *
+ *
+ * When using Font Icons with classnames:
+ * <hljs lang="html">
+ *
+ *  <md-icon md-font-icon="android" alt="android" ></md-icon>
+ *  <md-icon md-font-icon="fa-magic" class="fa" alt="magic wand"></md-icon>
+ *
+ * </hljs>
+ *
+ * When using Font Icons with ligatures:
+ * <hljs lang="html">
+ *
+ *  <md-icon md-font-library="material-icons">face</md-icon>
+ *  <md-icon md-font-library="material-icons">#xE87C;</md-icon>
+ *  <md-icon md-font-library="material-icons" class="md-light md-48">face</md-icon>
+ *
+ * </hljs>
+ *
+ *
  */
-function mdIconDirective($mdIcon, $mdTheming, $mdAria ) {
+function mdIconDirective($mdIcon, $mdTheming, $mdAria, $interpolate ) {
+
   return {
     scope: {
+      fontLib: '@mdFontLibrary',
       fontIcon: '@mdFontIcon',
       svgIcon: '@mdSvgIcon',
       svgSrc: '@mdSvgSrc'
     },
     restrict: 'E',
+    transclude:true,
     template: getTemplate,
     link: postLink
   };
 
   function getTemplate(element, attr) {
-    return attr.mdFontIcon ? '<span class="md-font" ng-class="fontIcon"></span>' : '';
+    var hasAttrValue = function(key) { return attr[key] && attr[key].length      };
+    var attrValue    = function(key) { return hasAttrValue(key) ? attr[key] : '' };
+
+    // If using font-icons, transclude the ligature or NRCs
+    var tmpl = hasAttrValue('mdFontIcon')    ? '<span class="md-font {{classNames}}" ng-class="fontIcon"></span>' :
+               hasAttrValue('mdFontLibrary') ? '<span ng-transclude></span>' : '';
+
+    // Transpose the mdFontLibrary name to the list of classnames
+    // For example, Material Icons expects classnames like `.material-icons.md-48` instead of `.material-icons .md-48`
+
+    var names = (attrValue('mdFontLibrary')  + ' ' +  attrValue('class')).trim();
+    element.attr('class',names);
+
+    return $interpolate( tmpl )({ classNames: names });
   }
 
+
   /**
    * Directive postLink
    * Supports embedded SVGs, font-icons, & external SVGs
    */
   function postLink(scope, element, attr) {
     $mdTheming(element);
 
+    // If using a font-icon, then the textual name of the icon itself
+    // provides the aria-label.
+
     var ariaLabel = attr.alt || scope.fontIcon || scope.svgIcon;
     var attrName = attr.$normalize(attr.$attr.mdSvgIcon || attr.$attr.mdSvgSrc || '');
 
-    if (attr.alt != '' && !parentsHaveText()) {
-      $mdAria.expect(element, 'aria-label', ariaLabel);
-      $mdAria.expect(element, 'role', 'img');
-    } else {
-      // Hide from the accessibility layer.
-      $mdAria.expect(element, 'aria-hidden', 'true');
+    if ( !attr.mdFontLibrary ) {
+      if (attr.alt != '' && !parentsHaveText() ) {
+        $mdAria.expect(element, 'aria-label', ariaLabel);
+        $mdAria.expect(element, 'role', 'img');
+      } else {
+        // Hide from the accessibility layer.
+        $mdAria.expect(element, 'aria-hidden', 'true');
+      }
     }
 
     if (attrName) {