From 6cb12f94bb23b98e9fc9c593c27f20b2781810a5 Mon Sep 17 00:00:00 2001
From: Sombriks <sombriks@gmail.com>
Date: Thu, 12 Jan 2017 09:55:39 -0300
Subject: [PATCH] add support for icons without ligatures (#330)

* ignoring a thing

* md-iconset had to become a boolean prop because :class=[themeClass, iconset] have aonther behavior, as can be seen in https://vuejs.org/v2/guide/class-and-style.html#ad

* icon font support proposal

* support for icon fonts without ligatures

* change iconset example
---
 .gitignore                         |  1 +
 docs/src/pages/components/Icon.vue | 41 +++++++++++++++++++++++++++++-
 src/components/mdIcon/mdIcon.vue   |  8 ++++--
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 153216e..9a6a2a1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 .DS_Store
 node_modules/
 npm-debug.log
+nbproject
diff --git a/docs/src/pages/components/Icon.vue b/docs/src/pages/components/Icon.vue
index 7ac2c88..b2a28dc 100644
--- a/docs/src/pages/components/Icon.vue
+++ b/docs/src/pages/components/Icon.vue
@@ -5,7 +5,7 @@
         <p>A system icon, or UI icon, symbolizes a command, file, device, or directory. System icons are also used to represent common actions like trash, print, and save.</p>
         <p>You can see the full list of icons on the <a href="https://material.io/icons/" target="_blank" rel="noopener">Material Icons</a> website. Replace the spaces in the icon name by underscores (for example, <code>arrow back</code> becomes <code>arrow_back</code>).</p>
         <p>Alternatively you can use your PNG or SVG icons using the <code>md-src</code> property.</p>
-
+        <p>The use of font icons without ligatures are suported too, although this approach lacks accessibility support.</p>
         <p>The following classes can be applied to change the color palette:</p>
         <ul class="md-body-2">
           <li><code>md-primary</code></li>
@@ -47,6 +47,11 @@
                 <md-table-cell><code>String</code></md-table-cell>
                 <md-table-cell>The src of the image file. Can be SVG icons too!</md-table-cell>
               </md-table-row>
+              <md-table-row>
+                <md-table-cell>md-iconset</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>The font icon set. Example: <code>md-iconset="fa fa-pencil"</code> for font awesome.</md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>
         </api-table>
@@ -133,6 +138,40 @@
           </div>
         </example-box>
 
+        <example-box card-title="Font Icons">
+          <!-- had a few trouble on making webpack accept font awesome and others,
+               therefore i'm using those cdn's' for the sake of a good example -->
+          <div slot="demo">
+            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
+            <div>This first example uses <a href="http://fontawesome.io/icons/" target="fa_icons">Font Awesome Icons</a></div>
+            <md-icon md-iconset="fa fa-home"></md-icon>
+            <md-icon md-iconset="fa fa-bars" class="md-size-2x md-primary"></md-icon>
+            <md-icon md-iconset="fa fa-users" class="md-size-3x md-accent"></md-icon>
+            <md-icon md-iconset="fa fa-clock-o" class="md-size-4x md-warn"></md-icon>  
+            <hr/>
+            <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
+            <div>This second example uses <a href="http://ionicons.com/" target="ion_icons">Ion Icons</a></div>
+            <md-icon md-iconset="ion-home"></md-icon>
+            <md-icon md-iconset="ion-navicon-round" class="md-size-2x md-primary"></md-icon>
+            <md-icon md-iconset="ion-person-stalker" class="md-size-3x md-accent"></md-icon>
+            <md-icon md-iconset="ion-clock" class="md-size-4x md-warn"></md-icon>         
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-icon md-iconset="fa fa-home"&gt;&lt;/md-icon&gt;
+              &lt;md-icon md-iconset="fa fa-bars" class="md-size-2x md-primary"&gt;&lt;/md-icon&gt;
+              &lt;md-icon md-iconset="fa fa-users" class="md-size-3x md-accent"&gt;&lt;/md-icon&gt;
+              &lt;md-icon md-iconset="fa fa-clock-o" class="md-size-4x md-warn"&gt;&lt;/md-icon&gt;  
+              &lt;hr/&gt;
+              &lt;md-icon md-iconset="ion-home"&gt;&lt;/md-icon&gt;
+              &lt;md-icon md-iconset="ion-navicon-round" class="md-size-2x md-primary"&gt;&lt;/md-icon&gt;
+              &lt;md-icon md-iconset="ion-person-stalker" class="md-size-3x md-accent"&gt;&lt;/md-icon&gt;
+              &lt;md-icon md-iconset="ion-clock" class="md-size-4x md-warn"&gt;&lt;/md-icon&gt;  
+            </code-block>
+          </div>
+        </example-box>
+
         <example-box card-title="Themes">
           <div slot="demo">
             <md-icon md-theme="light-blue" class="md-primary">home</md-icon>
diff --git a/src/components/mdIcon/mdIcon.vue b/src/components/mdIcon/mdIcon.vue
index 8e20641..d946708 100644
--- a/src/components/mdIcon/mdIcon.vue
+++ b/src/components/mdIcon/mdIcon.vue
@@ -3,7 +3,7 @@
 
   <md-image class="md-icon" :class="[themeClass]" :md-src="imageSrc" v-else-if="imageSrc"></md-image>
 
-  <i class="md-icon material-icons" :class="[themeClass]" v-else>
+  <i class="md-icon" :class="[themeClass, mdIconset]" :aria-hidden="!!mdIconset" v-else>
     <slot></slot>
   </i>
 </template>
@@ -17,7 +17,11 @@
 
   export default {
     props: {
-      mdSrc: String
+      mdSrc: String,
+      mdIconset: {
+        type: String,
+        default: 'material-icons'
+      }
     },
     data: () => ({
       svgContent: null,