Load svgs inline to be able to style their colours

bower.json

@@ -15,7 +15,6 @@
     "tests"
   ],
   "dependencies": {
-    "iron-icon": "polymerelements/iron-icon#~1.0.7",
     "polymer": "Polymer/polymer#^1.1.0"
   }
 }

lib/components/hero-icon.html

@@ -1,20 +1,20 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="hero-caption.html">
 
 <dom-module id="hero-icon">
   <template>
     <style>
-      :host {
-        --iron-icon-height: 40px;
-        --iron-icon-width: 40px;
-      }
-
       :host ::content div {
         margin-top: 10px;
       }
+
+      :host ::content .icon {
+        margin: 0 auto;
+        height: 40px;
+        width: 40px;
+      }
     </style>
-    <iron-icon src="{{path}}"></iron-icon>
+    <div class="icon"></div>
 
     <div>
       <hero-caption>
@@ -24,12 +24,23 @@
   </template>
 
   <script>
+    var fs = require('fs');
+    var path = require('path');
+
     Polymer({
       is: "hero-icon",
       properties: {
         path: {
           type: String
         }
+      },
+      ready: function() {
+        var iconElement = this.querySelector('.icon');
+        var imagePath = path.join(__dirname, this.path);
+        var contents = fs.readFileSync(imagePath, {
+          encoding: 'utf8'
+        });
+        iconElement.innerHTML = contents;
       }
     });
   </script>

lib/images/burn.svg

@@ -2,7 +2,7 @@
 <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="999.944px" height="999.986px" viewBox="500.028 0 999.944 999.986" enable-background="new 500.028 0 999.944 999.986"
+	 viewBox="500.028 0 999.944 999.986" enable-background="new 500.028 0 999.944 999.986"
 	 xml:space="preserve">
 <g>
 	<g>

lib/images/drive.svg

@@ -2,7 +2,7 @@
 <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="134.229px" height="134.229px" viewBox="0 0 134.229 134.229" enable-background="new 0 0 134.229 134.229"
+	 viewBox="0 0 134.229 134.229" enable-background="new 0 0 134.229 134.229"
 	 xml:space="preserve">
 <g>
 	<g>

lib/images/image.svg

@@ -2,7 +2,7 @@
 <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="41px" height="41px" viewBox="0 0 41 41" enable-background="new 0 0 41 41" xml:space="preserve">
+	 viewBox="0 0 41 41" enable-background="new 0 0 41 41" xml:space="preserve">
 <g>
 	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M20.5,0C31.822,0,41,9.178,41,20.5S31.822,41,20.5,41
 		S0,31.822,0,20.5S9.178,0,20.5,0z"/>