diff --git a/bower.json b/bower.json
index dacfc29..d44ba0c 100644
--- a/bower.json
+++ b/bower.json
@@ -3,6 +3,7 @@
   "private": true,
   "dependencies": {
     "polymer": "Polymer/polymer#master",
-    "core-meta": "Polymer/core-meta#master"
+    "core-meta": "Polymer/core-meta#master",
+    "core-icon": "Polymer/core-icon#master"
   }
 }
diff --git a/core-iconset.html b/core-iconset.html
index 193daf1..a35d7da 100644
--- a/core-iconset.html
+++ b/core-iconset.html
@@ -215,18 +215,24 @@
        * @param {String} theme (optional) The name of the theme for the icon.
        * @param {Number} scale (optional, defaults to 1) A scaling factor 
        * with which the icon can be magnified.
+       * @return {Element} The icon element.
        */
       applyIcon: function(element, icon, scale) {
-         var offset = this.getOffset(icon);
-         scale = scale || 1;
-         if (element && offset) {
-           var style = element.style;
-           style.backgroundImage = 'url(' + this.src + ')';
-           style.backgroundPosition = (-offset.offsetX * scale + 'px') + 
-              ' ' + (-offset.offsetY * scale + 'px');
-           style.backgroundSize = scale === 1 ? 'auto' :
-              this.width * scale + 'px';
-         }
+        var offset = this.getOffset(icon);
+        scale = scale || 1;
+        if (element && offset) {
+          var icon = element._icon || document.createElement('div');
+          var style = icon.style;
+          style.backgroundImage = 'url(' + this.src + ')';
+          style.backgroundPosition = (-offset.offsetX * scale + 'px') + 
+             ' ' + (-offset.offsetY * scale + 'px');
+          style.backgroundSize = scale === 1 ? 'auto' :
+             this.width * scale + 'px';
+          if (icon.parentNode !== element) {
+            element.appendChild(icon);
+          }
+          return icon;
+        }
       }
 
     });
diff --git a/demo.html b/demo.html
index 32d63d0..82ea67a 100644
--- a/demo.html
+++ b/demo.html
@@ -15,6 +15,7 @@
 
   <script src="../platform/platform.js"></script>
   <link rel="import" href="core-iconset.html">
+  <link rel="import" href="../core-icon/core-icon.html">
 
 </head>
 <body unresolved>
@@ -24,72 +25,38 @@
       icons="location place starta stopb bus car train walk">
   </core-iconset>
 
-  <!-- 
-    Create an element that uses an iconset to display an icon.
-    By using iconset, the element can allow the set of available icons to be
-    easily changed by the user.
-
-    Here we're using the converntion 'iconset:icon' to specify a particular
-    iconset and an icon name within that set.
-   -->
-  <polymer-element name="icon-demo" attributes="icon">
-
-    <template>
-      <style>
-        :host {
-          display: inline-block;
-          margin: 2px;
-        }
-      </style>
-      <core-iconset id="meta"></core-iconset>
-      <content></content>
-    </template>
-
-    <script>
-
-      Polymer('icon-demo', {
-        
-        iconChanged: function() {
-          if (!this.icon) {
-            return;
-          }
-          var parts = this.icon.split(':');
-          var icon = parts.pop();
-          // find the iconSet for the name given via the icon property
-          var iconset = this.$.meta.byId(parts.pop());
-          if (iconset) {
-            // size the element as needed
-            this.style.height = this.style.width = iconset.iconSize + 'px';
-            // use iconset's applyAsBackground method to set the given icon
-            // as the element's background image.
-            iconset.applyIcon(this, icon);
-          }
-        }
-
-      });
-
-    </script>
-
-  </polymer-element>
+  <core-iconset id="my-icons-big" src="my-icons-big.png" width="192" iconSize="48"
+      icons="location place starta stopb bus car train walk">
+  </core-iconset>
 
   <!-- Now create a bunch of icons using our iconset -->
-  <icon-demo icon="my-icons:location"></icon-demo>
-  <icon-demo icon="my-icons:place"></icon-demo>
-  <icon-demo icon="my-icons:starta"></icon-demo>
-  <icon-demo icon="my-icons:stopb"></icon-demo>
-  <icon-demo icon="my-icons:bus"></icon-demo>
-  <icon-demo icon="my-icons:car"></icon-demo>
-  <icon-demo icon="my-icons:train"></icon-demo>
-  <icon-demo icon="my-icons:walk"></icon-demo>
+  <core-icon icon="my-icons:location"></core-icon>
+  <core-icon icon="my-icons:place"></core-icon>
+  <core-icon icon="my-icons:starta"></core-icon>
+  <core-icon icon="my-icons:stopb"></core-icon>
+  <core-icon icon="my-icons:bus"></core-icon>
+  <core-icon icon="my-icons:car"></core-icon>
+  <core-icon icon="my-icons:train"></core-icon>
+  <core-icon icon="my-icons:walk"></core-icon>
   <br>
   <!-- icons may also be specified by index -->
-  <icon-demo icon="my-icons:0"></icon-demo>
-  <icon-demo icon="my-icons:1"></icon-demo>
-  <icon-demo icon="my-icons:2"></icon-demo>
-  <icon-demo icon="my-icons:3"></icon-demo>
-  <icon-demo icon="my-icons:4"></icon-demo>
-  <icon-demo icon="my-icons:5"></icon-demo>
-  <icon-demo icon="my-icons:6"></icon-demo>
-  <icon-demo icon="my-icons:7"></icon-demo>
+  <style>
+    .embiggen core-icon {
+      width: 48px;
+      height: 48px;
+    }
+  </style>
+
+  <div class="embiggen">
+    <core-icon icon="my-icons-big:0"></core-icon>
+    <core-icon icon="my-icons-big:1"></core-icon>
+    <core-icon icon="my-icons-big:2"></core-icon>
+    <core-icon icon="my-icons-big:3"></core-icon>
+    <core-icon icon="my-icons-big:4"></core-icon>
+    <core-icon icon="my-icons-big:5"></core-icon>
+    <core-icon icon="my-icons-big:6"></core-icon>
+    <core-icon icon="my-icons-big:7"></core-icon>
+  </div>
+
  </body>
 </html>
diff --git a/my-icons-big.png b/my-icons-big.png
new file mode 100644
index 0000000..f019f3f
Binary files /dev/null and b/my-icons-big.png differ
