diff --git a/demo/index.html b/demo/index.html
index 1955032..74cb58b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -23,7 +23,6 @@
   <link rel="import" href="../../iron-collapse/iron-collapse.html">
   <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../iron-icons/communication-icons.html">
-  <link rel="import" href="../../iron-icons/hardware-icons.html">
   <link rel="import" href="../../iron-icons/social-icons.html">
   <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
   <link rel="import" href="../../paper-button/paper-button.html">
@@ -223,7 +222,7 @@ <h3>Paper-cards can have expanded supporting text</h3>
               <paper-button>Share</paper-button>
               <paper-button>Explore</paper-button>
               <paper-icon-button
-                icon="hardware:keyboard-arrow-up"
+                icon="expand-more"
                 title="more info"
                 onclick="_toggle()"
                 style="float:right;">
@@ -235,8 +234,7 @@ <h3>Paper-cards can have expanded supporting text</h3>
                 function _toggle() {
                   var moreInfo = document.getElementById('more-info');
                   var iconButton = Polymer.dom(event).localTarget;
-                  iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-up'
-                                                    : 'hardware:keyboard-arrow-down';
+                  iconButton.icon = moreInfo.opened ? 'expand-more': 'expand-less';
                   moreInfo.toggle();
                 }
               </script>