diff --git a/dashboard-ui/components/fileorganizer/fileorganizer.template.html b/dashboard-ui/components/fileorganizer/fileorganizer.template.html
index 372a348f8e..0752cab4b6 100644
--- a/dashboard-ui/components/fileorganizer/fileorganizer.template.html
+++ b/dashboard-ui/components/fileorganizer/fileorganizer.template.html
@@ -1,5 +1,7 @@
 <div class="dialogHeader" style="margin:0 0 2em;">
-    <button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="arrow-back"></iron-icon></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
+        <i class="md-icon">arrow_back</i>
+    </button>
     <div class="dialogHeaderTitle">
     </div>
 </div>
@@ -13,7 +15,9 @@
             <label for="selectSeries" class="selectLabel">${LabelSeries}</label>
             <select id="selectSeries" data-mini="true" required="required"></select>
         </div>
-        <button type="button" is="paper-icon-button-light" id="btnNewSeries" title="${ButtonNew}"><iron-icon icon="add"></iron-icon></button>
+        <button type="button" is="paper-icon-button-light" id="btnNewSeries" class="autoSize" title="${ButtonNew}">
+            <i class="md-icon">add</i>
+        </button>
     </div>
     <div class="fldSelectSeriesFolder hide" style="margin: 1em 0 1em;">
         <div style="width:100%;display:inline-block;">
@@ -36,6 +40,9 @@
         <paper-checkbox type="checkbox" id="chkRememberCorrection">${OptionRememberOrganizeCorrection} <span class="extractedName" style="font-weight: bold; font-style: italic" /></paper-checkbox>
     </div>
     <br />
-    <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></button>
+    <button is="emby-button" type="submit" class="raised submit block">
+        <i class="md-icon">check</i>
+        <span>${ButtonOk}</span>
+    </button>
     <input id="hfResultId" type="hidden" />
 </form>
\ No newline at end of file
diff --git a/dashboard-ui/components/guestinviter/guestinviter.template.html b/dashboard-ui/components/guestinviter/guestinviter.template.html
index 8484ebec08..62d88a7079 100644
--- a/dashboard-ui/components/guestinviter/guestinviter.template.html
+++ b/dashboard-ui/components/guestinviter/guestinviter.template.html
@@ -1,5 +1,7 @@
 <div class="dialogHeader" style="margin:0 0 2em;">
-    <button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="arrow-back"></iron-icon></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
+        <i class="md-icon">arrow_back</i>
+    </button>
     <div class="dialogHeaderTitle">
         ${HeaderInviteUser}
     </div>
@@ -24,5 +26,8 @@
     </emby-collapsible>
     <p class="fieldDescription" style="margin-top:.5em;">${MessageGuestSharingPermissionsHelp}</p>
     <br />
-    <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSendInvitation}</span></button>
+    <button is="emby-button" type="submit" class="raised submit block">
+        <i class="md-icon">check</i>
+        <span>${ButtonSendInvitation}</span>
+    </button>
 </form>
\ No newline at end of file
diff --git a/dashboard-ui/components/imagedownloader/imagedownloader.js b/dashboard-ui/components/imagedownloader/imagedownloader.js
index b79cd606b4..e94afbbdd5 100644
--- a/dashboard-ui/components/imagedownloader/imagedownloader.js
+++ b/dashboard-ui/components/imagedownloader/imagedownloader.js
@@ -107,8 +107,8 @@
         if (showControls) {
             html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">';
 
-            html += '<button is="paper-icon-button-light" title="' + Globalize.translate('ButtonPreviousPage') + '" class="btnPreviousPage" ' + (startIndex ? '' : 'disabled') + '><iron-icon icon="arrow-back"></iron-icon></button>';
-            html += '<button is="paper-icon-button-light" title="' + Globalize.translate('ButtonNextPage') + '" class="btnNextPage" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><iron-icon icon="arrow-forward"></iron-icon></button>';
+            html += '<button is="paper-icon-button-light" title="' + Globalize.translate('ButtonPreviousPage') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="md-icon">arrow_back</i></button>';
+            html += '<button is="paper-icon-button-light" title="' + Globalize.translate('ButtonNextPage') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="md-icon">arrow_forward</i></button>';
             html += '</div>';
         }
 
@@ -223,7 +223,7 @@
             html += '</div>';
         }
 
-        html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage" raised data-imageprovider="' + image.ProviderName + '" data-imageurl="' + image.Url + '" data-imagetype="' + image.Type + '" title="' + Globalize.translate('ButtonDownload') + '"><iron-icon icon="cloud-download"></iron-icon></button>';
+        html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised data-imageprovider="' + image.ProviderName + '" data-imageurl="' + image.Url + '" data-imagetype="' + image.Type + '" title="' + Globalize.translate('ButtonDownload') + '"><i class="md-icon">cloud_download</i></button>';
 
         html += '</div>';
         html += '</div>';
diff --git a/dashboard-ui/components/imageuploader/imageuploader.template.html b/dashboard-ui/components/imageuploader/imageuploader.template.html
index 0f190f270f..b23da78e00 100644
--- a/dashboard-ui/components/imageuploader/imageuploader.template.html
+++ b/dashboard-ui/components/imageuploader/imageuploader.template.html
@@ -27,7 +27,10 @@
                     <option value="Thumb">${OptionThumb}</option>
                 </select>
             </div>
-            <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonUpload}</span></button>
+            <button is="emby-button" type="submit" class="raised submit block">
+                <i class="md-icon">check</i>
+                <span>${ButtonUpload}</span>
+            </button>
         </div>
     </div>
 </form>
\ No newline at end of file
diff --git a/dashboard-ui/components/itemidentifier/itemidentifier.template.html b/dashboard-ui/components/itemidentifier/itemidentifier.template.html
index f2f3d40a75..30ec130669 100644
--- a/dashboard-ui/components/itemidentifier/itemidentifier.template.html
+++ b/dashboard-ui/components/itemidentifier/itemidentifier.template.html
@@ -18,7 +18,10 @@
     </div>
 
     <p>
-        <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="search"></iron-icon><span>${ButtonSearch}</span></button>
+        <button is="emby-button" type="submit" class="raised submit block">
+            <i class="md-icon">search</i>
+            <span>${ButtonSearch}</span>
+        </button>
     </p>
 </form>
 <div class="identificationSearchResults" style="display:none; text-align: center;">
@@ -34,5 +37,8 @@
         <input type="checkbox" is="emby-checkbox" id="chkIdentifyReplaceImages" />
         <span>${OptionReplaceExistingImages}</span>
     </label>
-    <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSubmit}</span></button>
+    <button is="emby-button" type="submit" class="raised submit block">
+        <i class="md-icon">check</i>
+        <span>${ButtonSubmit}</span>
+    </button>
 </form>
diff --git a/dashboard-ui/components/metadataeditor/metadataeditor.template.html b/dashboard-ui/components/metadataeditor/metadataeditor.template.html
index 3674de94b2..f12e97e191 100644
--- a/dashboard-ui/components/metadataeditor/metadataeditor.template.html
+++ b/dashboard-ui/components/metadataeditor/metadataeditor.template.html
@@ -223,7 +223,7 @@
                 ${HeaderCountries}
             </h1>
             <button is="emby-button" type="button" class="raised btnAddTextItem submit mini" style="margin-left:1em;" title="${ButtonAdd}">
-                <iron-icon icon="add"></iron-icon>
+                <i class="md-icon">add</i>
                 <span>${ButtonAdd}</span>
             </button>
             <div class="paperList" id="listCountries"></div>
@@ -233,7 +233,7 @@
                 ${HeaderGenres}
             </h1>
             <button is="emby-button" type="button" class="raised btnAddTextItem submit mini" style="margin-left:1em;" title="${ButtonAdd}">
-                <iron-icon icon="add"></iron-icon>
+                <i class="md-icon">add</i>
                 <span>${ButtonAdd}</span>
             </button>
             <div class="paperList" id="listGenres"></div>
@@ -243,7 +243,7 @@
                 ${HeaderPeople}
             </h1>
             <button is="emby-button" type="button" id="btnAddPerson" class="raised btnAddPerson submit mini" style="margin-left:1em;" title="${ButtonAdd}">
-                <iron-icon icon="add"></iron-icon>
+                <i class="md-icon">add</i>
                 <span>${ButtonAdd}</span>
             </button>
             <div id="peopleList" class="paperList">
@@ -254,7 +254,7 @@
                 ${HeaderPlotKeywords}
             </h1>
             <button is="emby-button" type="button" class="raised btnAddTextItem submit mini" style="margin-left:1em;" title="${ButtonAdd}">
-                <iron-icon icon="add"></iron-icon>
+                <i class="md-icon">add</i>
                 <span>${ButtonAdd}</span>
             </button>
             <div class="paperList" id="listKeywords"></div>
@@ -264,7 +264,7 @@
                 ${HeaderStudios}
             </h1>
             <button is="emby-button" type="button" class="raised btnAddTextItem submit mini" style="margin-left:1em;" title="${ButtonAdd}">
-                <iron-icon icon="add"></iron-icon>
+                <i class="md-icon">add</i>
                 <span>${ButtonAdd}</span>
             </button>
             <div class="paperList" id="listStudios"></div>
@@ -274,7 +274,7 @@
                 ${HeaderTags}
             </h1>
             <button is="emby-button" type="button" class="raised btnAddTextItem submit mini" style="margin-left:1em;" title="${ButtonAdd}">
-                <iron-icon icon="add"></iron-icon>
+                <i class="md-icon">add</i>
                 <span>${ButtonAdd}</span>
             </button>
             <div class="paperList" id="listTags"></div>
@@ -302,7 +302,10 @@
             </div>
         </div>
         <br />
-        <button is="emby-button" type="submit" class="raised submit block btnSave"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
+        <button is="emby-button" type="submit" class="raised submit block btnSave">
+            <i class="md-icon">check</i>
+            <span>${ButtonSave}</span>
+        </button>
     </div>
     <br />
     <br />
diff --git a/dashboard-ui/components/metadataeditor/personeditor.template.html b/dashboard-ui/components/metadataeditor/personeditor.template.html
index 60b2d9bdd2..b19067f257 100644
--- a/dashboard-ui/components/metadataeditor/personeditor.template.html
+++ b/dashboard-ui/components/metadataeditor/personeditor.template.html
@@ -1,5 +1,7 @@
 <div class="dialogHeader" style="margin:0 0 2em;">
-    <button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="arrow-back"></iron-icon></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
+        <i class="md-icon">arrow_back</i>
+    </button>
     <div class="dialogHeaderTitle">
         ${ButtonEdit}
     </div>
@@ -8,7 +10,7 @@
 <form class="popupEditPersonForm" style="max-width: none;margin:0;">
 
     <div class="inputContainer">
-        <input type="text" is="emby-input" class="txtPersonName" required="required" label="${LabelName}"/>
+        <input type="text" is="emby-input" class="txtPersonName" required="required" label="${LabelName}" />
     </div>
 
     <div class="selectContainer">
@@ -23,8 +25,11 @@
         </select>
     </div>
     <div class="inputContainer">
-        <input is="emby-input" type="text" class="txtPersonRole" label="${LabelPersonRole}"/>
+        <input is="emby-input" type="text" class="txtPersonRole" label="${LabelPersonRole}" />
         <div class="fieldDescription">${LabelPersonRoleHelp}</div>
     </div>
-    <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></button>
+    <button is="emby-button" type="submit" class="raised submit block">
+        <i class="md-icon">check</i>
+        <span>${ButtonOk}</span>
+    </button>
 </form>
\ No newline at end of file
diff --git a/dashboard-ui/components/remotecontrol.js b/dashboard-ui/components/remotecontrol.js
index 3f93cd4952..a40e1363cf 100644
--- a/dashboard-ui/components/remotecontrol.js
+++ b/dashboard-ui/components/remotecontrol.js
@@ -371,14 +371,14 @@
             var toggleRepeatButton = context.querySelector('.repeatToggleButton');
 
             if (playState.RepeatMode == 'RepeatAll') {
-                toggleRepeatButton.icon = "repeat";
+                toggleRepeatButton.innerHTML = "<i class='md-icon'>repeat</i>";
                 toggleRepeatButton.classList.add('nowPlayingPageRepeatActive');
             }
             else if (playState.RepeatMode == 'RepeatOne') {
-                toggleRepeatButton.icon = "repeat-one";
+                toggleRepeatButton.innerHTML = "<i class='md-icon'>repeat_one</i>";
                 toggleRepeatButton.classList.add('nowPlayingPageRepeatActive');
             } else {
-                toggleRepeatButton.icon = "repeat";
+                toggleRepeatButton.innerHTML = "<i class='md-icon'>repeat</i>";
                 toggleRepeatButton.classList.remove('nowPlayingPageRepeatActive');
             }
 
@@ -533,13 +533,13 @@
 
             if (info.isLocalPlayer) {
 
-                btnCast.querySelector('iron-icon').icon = 'cast';
+                btnCast.querySelector('i').innerHTML = 'cast';
                 btnCast.classList.remove('btnActiveCast');
                 context.querySelector('.nowPlayingSelectedPlayer').innerHTML = '';
 
             } else {
 
-                btnCast.querySelector('iron-icon').icon = 'cast-connected';
+                btnCast.querySelector('i').innerHTML = 'cast-connected';
                 btnCast.classList.add('btnActiveCast');
                 context.querySelector('.nowPlayingSelectedPlayer').innerHTML = info.deviceName || info.name;
             }
diff --git a/dashboard-ui/connectlogin.html b/dashboard-ui/connectlogin.html
index 1d12eebac1..adfd848a16 100644
--- a/dashboard-ui/connectlogin.html
+++ b/dashboard-ui/connectlogin.html
@@ -15,25 +15,37 @@
                 <input is="emby-input" type="password" id="txtManualPassword" required="required" label="${LabelPassword}" autocomplete="off" />
             </div>
             <br />
-            <button is="emby-button" type="submit" class="raised accent block"><iron-icon icon="check"></iron-icon><span>${ButtonSignIn}</span></button>
+            <button is="emby-button" type="submit" class="raised accent block">
+                <i class="md-icon">check</i>
+                <span>${ButtonSignIn}</span>
+            </button>
             <div class="forgotPassword">
                 <a href="https://emby.media/community/index.php?app=core&module=global&section=lostpass" target="_blank" class="clearLink">
-                    <button is="emby-button" type="button" class="raised cancel block"><iron-icon icon="close"></iron-icon><span>${ButtonForgotPassword}</span></button>
+                    <button is="emby-button" type="button" class="raised cancel block">
+                        <i class="md-icon">close</i>
+                        <span>${ButtonForgotPassword}</span>
+                    </button>
                 </a>
             </div>
             <div class="skip">
-                <button is="emby-button" type="button" class="raised cancel block btnSkipConnect"><iron-icon icon="close"></iron-icon><span>${ButtonSkip}</span></button>
+                <button is="emby-button" type="button" class="raised cancel block btnSkipConnect">
+                    <i class="md-icon">close</i>
+                    <span>${ButtonSkip}</span>
+                </button>
                 <div class="fieldDescription" style="text-align:center;">${TextConnectToServerManually}</div>
             </div>
 
             <div class="newUsers" style="margin-top: 2em;">
                 <h2 style="text-align: left;">${HeaderNewUsers}</h2>
                 <a href="https://emby.media/community/index.php?app=core&module=global&section=register" target="_blank" class="clearLink">
-                    <button is="emby-button" type="button" class="raised submit block btnSignupForConnect"><iron-icon icon="add"></iron-icon><span>${ButtonSignUp}</span></button>
+                    <button is="emby-button" type="button" class="raised submit block btnSignupForConnect">
+                        <i class="md-icon">add</i>
+                        <span>${ButtonSignUp}</span>
+                    </button>
                 </a>
             </div>
             <div class="terms hide fieldDescription" style="margin-top: 2em; color: #ccc;"></div>
-            <div class="hide tvAppInfo"><br /><br /><iron-icon icon="new-releases" style="color: #52B54B"></iron-icon> Try the new <a href="//tv.emby.media" target="_blank">Emby Theater at tv.emby.media</a>, a remote-friendly app designed for your TV or large screen monitor.</div>
+            <div class="hide tvAppInfo"><br /><br /><i class="md-icon" style="color: #52B54B">new_releases</i> Try the new <a href="//tv.emby.media" target="_blank">Emby Theater at tv.emby.media</a>, a remote-friendly app designed for your TV or large screen monitor.</div>
         </form>
 
         <form class="manualServerForm hide" style="margin: 0 auto;;">
@@ -53,8 +65,14 @@
             </div>
             <br />
 
-            <button is="emby-button" type="submit" class="raised accent block"><iron-icon icon="check"></iron-icon><span>${ButtonConnect}</span></button>
-            <button is="emby-button" type="button" class="raised cancel block btnCancelManualServer"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></button>
+            <button is="emby-button" type="submit" class="raised accent block">
+                <i class="md-icon">check</i>
+                <span>${ButtonConnect}</span>
+            </button>
+            <button is="emby-button" type="button" class="raised cancel block btnCancelManualServer">
+                <i class="md-icon">close</i>
+                <span>${ButtonCancel}</span>
+            </button>
         </form>
 
         <form class="signupForm hide" style="margin: 0 auto;">
@@ -81,8 +99,14 @@
             <div class="g-recaptcha" id="recaptchaWidget" data-sitekey="6Le2LAgTAAAAAK06Wvttt_yUnbISTy6q3Azqp9po" data-theme="dark"></div>
             <br />
 
-            <button is="emby-button" type="submit" class="raised accent block"><iron-icon icon="check"></iron-icon><span>${ButtonSignUp}</span></button>
-            <button is="emby-button" type="button" class="raised cancel block btnCancelSignup"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></button>
+            <button is="emby-button" type="submit" class="raised accent block">
+                <i class="md-icon">check</i>
+                <span>${ButtonSignUp}</span>
+            </button>
+            <button is="emby-button" type="button" class="raised cancel block btnCancelSignup">
+                <i class="md-icon">close</i>
+                <span>${ButtonCancel}</span>
+            </button>
         </form>
 
         <div class="welcomeContainer readOnlyContent hide" style="text-align: center; margin: 0 auto;">
@@ -93,7 +117,10 @@
                 <p style="margin: 2em 0;" class="embyIntroDownloadMessage"></p>
 
 
-                <button is="emby-button" type="button" class="raised accent block btnWelcomeNext iconRight"><iron-icon icon="arrow-forward"></iron-icon><span>${ButtonNext}</span></button>
+                <button is="emby-button" type="button" class="raised accent block btnWelcomeNext iconRight">
+                    <i class="md-icon">arrow_forward</i>
+                    <span>${ButtonNext}</span>
+                </button>
             </div>
         </div>
     </div>
diff --git a/dashboard-ui/css/nowplaying.css b/dashboard-ui/css/nowplaying.css
index 51edcd7b1d..7e3bfea503 100644
--- a/dashboard-ui/css/nowplaying.css
+++ b/dashboard-ui/css/nowplaying.css
@@ -91,9 +91,10 @@
     }
 }
 
-.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
-    width: 60px;
-    height: 60px;
+.nowPlayingPage .btnCommand i, .nowPlayingPage .btnPlayStateCommand i {
+    width: 44px;
+    height: 44px;
+    font-size: 44px;
 }
 
 
@@ -176,21 +177,6 @@
     }
 }
 
-@media (orientation: landscape) and (max-height: 400px) {
-    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
-        width: 60px;
-        height: 60px;
-    }
-}
-
-@media (orientation: portrait) and (max-height: 600px) {
-
-    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
-        width: 60px;
-        height: 60px;
-    }
-}
-
 .nowPlayingSelectedPlayer {
     display: inline-block;
     vertical-align: middle;
diff --git a/dashboard-ui/forgotpassword.html b/dashboard-ui/forgotpassword.html
index 4fc03ac7d3..4412dc7de4 100644
--- a/dashboard-ui/forgotpassword.html
+++ b/dashboard-ui/forgotpassword.html
@@ -13,9 +13,15 @@
                 </div>
 
                 <div>
-                    <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSubmit}</span></button>
+                    <button is="emby-button" type="submit" class="raised submit block">
+                        <i class="md-icon">check</i>
+                        <span>${ButtonSubmit}</span>
+                    </button>
 
-                    <button is="emby-button" type="button" class="raised cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></button>
+                    <button is="emby-button" type="button" class="raised cancel block btnCancel" onclick="history.back();">
+                        <i class="md-icon">close</i>
+                        <span>${ButtonCancel}</span>
+                    </button>
                 </div>
             </div>
         </form>
diff --git a/dashboard-ui/forgotpasswordpin.html b/dashboard-ui/forgotpasswordpin.html
index 80c0c21bb5..abd217a5dc 100644
--- a/dashboard-ui/forgotpasswordpin.html
+++ b/dashboard-ui/forgotpasswordpin.html
@@ -12,9 +12,15 @@
                 </div>
 
                 <div>
-                    <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSubmit}</span></button>
+                    <button is="emby-button" type="submit" class="raised submit block">
+                        <i class="md-icon">check</i>
+                        <span>${ButtonSubmit}</span>
+                    </button>
 
-                    <button is="emby-button" type="button" class="raised cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></button>
+                    <button is="emby-button" type="button" class="raised cancel block btnCancel" onclick="history.back();">
+                        <i class="md-icon">close</i>
+                        <span>${ButtonCancel}</span>
+                    </button>
                 </div>
             </div>
         </form>
diff --git a/dashboard-ui/home.html b/dashboard-ui/home.html
index 328619926a..76edae2586 100644
--- a/dashboard-ui/home.html
+++ b/dashboard-ui/home.html
@@ -10,7 +10,7 @@
         <div class="ui-bar-b readOnlyContent welcomeMessage hide" style="padding: 2em; border-radius: 10px; margin: 2em auto; font-weight: normal;">
             <h1 style="margin-top: 0;" class="tourHeader"></h1>
             <p>
-                <button is="emby-button" type="button" class="raised submit block btnTakeTour"><iron-icon icon="check"></iron-icon><span class="tourButtonText"></span></button>
+                <button is="emby-button" type="button" class="raised submit block btnTakeTour"><span class="tourButtonText"></span></button>
             </p>
         </div>
 
@@ -20,7 +20,10 @@
         <div class="homePageSection">
             <div>
                 <h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
-                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="NextUp"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></button>
+                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="NextUp">
+                    <i class="md-icon">sync</i>
+                    <span>${ButtonSync}</span>
+                </button>
             </div>
             <div id="nextUpItems" class="itemsContainer">
             </div>
diff --git a/dashboard-ui/itemlist.html b/dashboard-ui/itemlist.html
index 424108c85c..41c0c5cdf5 100644
--- a/dashboard-ui/itemlist.html
+++ b/dashboard-ui/itemlist.html
@@ -5,9 +5,9 @@
 
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
             <button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize hide"><i class="md-icon">add</i></button>
         </div>
         <div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
diff --git a/dashboard-ui/livetv.html b/dashboard-ui/livetv.html
index a28338b5e2..4fcf6fa9d4 100644
--- a/dashboard-ui/livetv.html
+++ b/dashboard-ui/livetv.html
@@ -48,7 +48,7 @@
     <div class="pageTabContent ehsContent" id="channelsTab" data-index="2">
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
         <div id="items" class="itemsContainer"></div>
     </div>
@@ -61,7 +61,10 @@
         <div id="latestRecordings" class="homePageSection hide">
             <div>
                 <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestRecordings}</h1>
-                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></button>
+                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Latest">
+                    <i class="md-icon">sync</i>
+                    <span>${ButtonSync}</span>
+                </button>
             </div>
             <div class="recordingItems itemsContainer"></div>
             <br />
diff --git a/dashboard-ui/login.html b/dashboard-ui/login.html
index 9b4928d2ae..91583de5a8 100644
--- a/dashboard-ui/login.html
+++ b/dashboard-ui/login.html
@@ -17,9 +17,15 @@
             </div>
 
             <br />
-            <button is="emby-button" type="submit" class="raised accent block"><iron-icon icon="check"></iron-icon><span>${ButtonSignIn}</span></button>
+            <button is="emby-button" type="submit" class="raised accent block">
+                <i class="md-icon">check</i>
+                <span>${ButtonSignIn}</span>
+            </button>
             <div style="margin-top:.5em;">
-                <button is="emby-button" type="button" class="raised cancel block btnCancel"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></button>
+                <button is="emby-button" type="button" class="raised cancel block btnCancel">
+                    <i class="md-icon">close</i>
+                    <span>${ButtonCancel}</span>
+                </button>
             </div>
             <br />
             <br />
@@ -34,16 +40,25 @@
             <br />
 
             <div class="readOnlyContent" style="margin: 2em auto 0;">
-                <button is="emby-button" type="button" class="raised cancel block btnManual"><iron-icon icon="lock"></iron-icon><span>${ButtonManualLogin}</span></button>
+                <button is="emby-button" type="button" class="raised cancel block btnManual">
+                    <i class="md-icon">lock</i>
+                    <span>${ButtonManualLogin}</span>
+                </button>
             </div>
         </div>
 
         <div class="readOnlyContent" style="margin: .5em auto 1em;">
-            <button is="emby-button" type="button" class="raised cancel block btnForgotPassword"><iron-icon icon="info"></iron-icon><span>${ButtonForgotPassword}</span></button>
+            <button is="emby-button" type="button" class="raised cancel block btnForgotPassword">
+                <i class="md-icon">info</i>
+                <span>${ButtonForgotPassword}</span>
+            </button>
 
             <div class="connectButtons hide">
                 <a href="selectserver.html" class="clearLink">
-                    <button is="emby-button" type="button" class="raised cancel block"><iron-icon icon="settings"></iron-icon><span>${ButtonChangeServer}</span></button>
+                    <button is="emby-button" type="button" class="raised cancel block">
+                        <i class="md-icon">settings</i>
+                        <span>${ButtonChangeServer}</span>
+                    </button>
                 </a>
             </div>
 
diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html
index 9a4b58f6e4..85749c7033 100644
--- a/dashboard-ui/movies.html
+++ b/dashboard-ui/movies.html
@@ -12,7 +12,10 @@
         <div id="resumableSection" class="homePageSection hide">
             <div>
                 <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
-                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Resume"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></button>
+                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Resume">
+                    <i class="md-icon">sync</i>
+                    <span>${ButtonSync}</span>
+                </button>
             </div>
 
             <div id="resumableItems" class="itemsContainer noautoinit">
@@ -22,7 +25,10 @@
         <div class="homePageSection">
             <div>
                 <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestMovies}</h1>
-                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></button>
+                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Latest">
+                    <i class="md-icon">sync</i>
+                    <span>${ButtonSync}</span>
+                </button>
             </div>
 
             <div id="recentlyAddedItems" class="itemsContainer noautoinit">
@@ -39,9 +45,9 @@
     <div class="pageTabContent ehsContent" id="moviesTab" data-index="1">
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
 
         <div class="alphaPicker alphabetPicker vertical">
@@ -56,8 +62,8 @@
     <div class="pageTabContent ehsContent" id="trailersTab" data-index="2">
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
 
         <div class="alphaPicker alphabetPicker vertical">
@@ -72,8 +78,8 @@
     <div class="pageTabContent ehsContent" id="collectionsTab" data-index="3">
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
             <button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><i class="md-icon">add</i></button>
         </div>
 
@@ -88,7 +94,7 @@
     </div>
     <div class="pageTabContent ehsContent" id="genresTab" data-index="4">
         <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
-            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
         </div>
         <div id="items" class="itemsContainer paddedItemsContainer"></div>
     </div>
diff --git a/dashboard-ui/music.html b/dashboard-ui/music.html
index 3e02eff7ae..2d4f188e1a 100644
--- a/dashboard-ui/music.html
+++ b/dashboard-ui/music.html
@@ -43,9 +43,9 @@
     <div class="pageTabContent pageTabContent ehsContent" id="albumsTab" data-index="1">
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
 
         <div class="alphaPicker alphabetPicker vertical">
@@ -60,8 +60,8 @@
     <div class="pageTabContent pageTabContent ehsContent" id="albumArtistsTab" data-index="2">
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
 
         <div class="alphaPicker alphabetPicker vertical">
@@ -76,8 +76,8 @@
     <div class="pageTabContent pageTabContent ehsContent" id="artistsTab" data-index="3">
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
 
         <div class="alphaPicker alphabetPicker vertical">
@@ -92,8 +92,8 @@
     <div class="pageTabContent pageTabContent ehsContent" id="songsTab" data-index="4">
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
 
         <div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
@@ -104,7 +104,7 @@
     </div>
     <div class="pageTabContent pageTabContent ehsContent" id="genresTab" data-index="5">
         <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
-            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
         </div>
         <div id="items" class="itemsContainer paddedItemsContainer"></div>
     </div>
diff --git a/dashboard-ui/mypreferencesdisplay.html b/dashboard-ui/mypreferencesdisplay.html
index b85df849e9..bb92df2ea6 100644
--- a/dashboard-ui/mypreferencesdisplay.html
+++ b/dashboard-ui/mypreferencesdisplay.html
@@ -77,7 +77,7 @@
                 <h1>
                     ${HeaderDisplay}
                 </h1>
-                <br/>
+                <br />
                 <div class="checkboxList">
                     <label>
                         <input type="checkbox" is="emby-checkbox" class="chkDisplayMissingEpisodes" />
@@ -89,7 +89,10 @@
                     </label>
                 </div>
             </div>
-            <button is="emby-button" type="submit" class="raised submit block btnSave hide"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
+            <button is="emby-button" type="submit" class="raised submit block btnSave hide">
+                <i class="md-icon">check</i>
+                <span>${ButtonSave}</span>
+            </button>
         </form>
     </div>
 </div>
\ No newline at end of file
diff --git a/dashboard-ui/mypreferenceshome.html b/dashboard-ui/mypreferenceshome.html
index aafba23c30..1cc73580d7 100644
--- a/dashboard-ui/mypreferenceshome.html
+++ b/dashboard-ui/mypreferenceshome.html
@@ -115,7 +115,10 @@
                 </label>
 
             </div>
-            <button is="emby-button" type="submit" class="raised submit block btnSave hide"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
+            <button is="emby-button" type="submit" class="raised submit block btnSave hide">
+                <i class="md-icon">check</i>
+                <span>${ButtonSave}</span>
+            </button>
         </form>
     </div>
 </div>
\ No newline at end of file
diff --git a/dashboard-ui/mypreferenceslanguages.html b/dashboard-ui/mypreferenceslanguages.html
index 1423d8578d..78587d5a8d 100644
--- a/dashboard-ui/mypreferenceslanguages.html
+++ b/dashboard-ui/mypreferenceslanguages.html
@@ -94,7 +94,10 @@
                 </div>
             </div>
 
-            <button is="emby-button" type="submit" class="raised submit block btnSave hide"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
+            <button is="emby-button" type="submit" class="raised submit block btnSave hide">
+                <i class="md-icon">check</i>
+                <span>${ButtonSave}</span>
+            </button>
         </form>
     </div>
 </div>
\ No newline at end of file
diff --git a/dashboard-ui/mysyncsettings.html b/dashboard-ui/mysyncsettings.html
index fbd2740bde..c98a960ff0 100644
--- a/dashboard-ui/mysyncsettings.html
+++ b/dashboard-ui/mysyncsettings.html
@@ -13,7 +13,9 @@
                     <div style="flex-grow:1;">
                         <input is="emby-input" id="txtSyncPath" class="txtSyncPath" label="${LabelSyncPath}" autocomplete="off" />
                     </div>
-                    <button type="button" is="paper-icon-button-light" id="btnSelectSyncPath"><iron-icon icon="search"></iron-icon></button>
+                    <button type="button" is="paper-icon-button-light" id="btnSelectSyncPath" class="autoSize">
+                        <i class="md-icon">search</i>
+                    </button>
                 </div>
             </div>
 
@@ -34,7 +36,10 @@
 
             <br />
             <br />
-            <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
+            <button is="emby-button" type="submit" class="raised submit block">
+                <i class="md-icon">check</i>
+                <span>${ButtonSave}</span>
+            </button>
         </form>
     </div>
 </div>
\ No newline at end of file
diff --git a/dashboard-ui/nowplaying.html b/dashboard-ui/nowplaying.html
index c5ee7bc41e..5c18a51ff1 100644
--- a/dashboard-ui/nowplaying.html
+++ b/dashboard-ui/nowplaying.html
@@ -3,10 +3,14 @@
     <div class="remoteControlContent">
 
         <div style="background: #080808;">
-            <button is="paper-icon-button-light" style="position: absolute; top: .5em; left: .5em; z-index: 1;" tabindex="-1" class="btnExitRemoteControl"><iron-icon icon="arrow-back"></iron-icon></button>
+            <button is="paper-icon-button-light" style="position: absolute; top: .5em; left: .5em; z-index: 1;" tabindex="-1" class="btnExitRemoteControl autoSize">
+                <i class="md-icon">arrow_back</i>
+            </button>
             <div style="float: right; position: absolute; top: .5em; right: .5em; text-align: right;" class="topRightContainer">
                 <span class="nowPlayingSelectedPlayer"></span>
-                <button is="paper-icon-button-light" class="nowPlayingCastIcon" style="vertical-align: middle; z-index: 1;" tabindex="-1"><iron-icon icon="cast"></iron-icon></button>
+                <button is="paper-icon-button-light" class="nowPlayingCastIcon autoSize" style="vertical-align: middle; z-index: 1;" tabindex="-1">
+                    <i class="md-icon">cast</i>
+                </button>
             </div>
         </div>
 
@@ -33,60 +37,60 @@
 
                     <div>
 
-                        <button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand" title="${ButtonPreviousTrack}">
-                            <iron-icon icon="skip-previous"></iron-icon>
+                        <button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
+                            <i class="md-icon">skip_previous</i>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnPause btnPlayStateCommand" title="${ButtonPause}">
-                            <iron-icon icon="pause"></iron-icon>
+                        <button is="paper-icon-button-light" class="btnPause btnPlayStateCommand autoSize" title="${ButtonPause}">
+                            <i class="md-icon">pause</i>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnPlay btnPlayStateCommand" title="${ButtonPlay}">
-                            <iron-icon icon="play-arrow"></iron-icon>
+                        <button is="paper-icon-button-light" class="btnPlay btnPlayStateCommand autoSize" title="${ButtonPlay}">
+                            <i class="md-icon">play_arrow</i>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnStop" title="${ButtonStop}">
-                            <iron-icon icon="stop"></iron-icon>
+                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnStop autoSize" title="${ButtonStop}">
+                            <i class="md-icon">stop</i>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack" title="${ButtonNextTrack}">
-                            <iron-icon icon="skip-next"></iron-icon>
+                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
+                            <i class="md-icon">skip_next</i>
                         </button>
                     </div>
                     <div class="buttonsRow2">
 
-                        <button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand" title="${ButtonAudioTracks}" data-command="GoToSearch">
-                            <iron-icon icon="audiotrack"></iron-icon>
+                        <button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
+                            <i class="md-icon">audiotrack</i>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand" title="${ButtonSubtitles}" data-command="GoToSearch">
-                            <iron-icon icon="closed-caption"></iron-icon>
+                        <button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
+                            <i class="md-icon">closed_caption</i>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnChapters videoButton btnPlayStateCommand" title="${ButtonScenes}" data-command="GoToSearch">
-                            <iron-icon icon="movie"></iron-icon>
+                        <button is="paper-icon-button-light" class="btnChapters videoButton btnPlayStateCommand autoSize" title="${ButtonScenes}" data-command="GoToSearch">
+                            <i class="md-icon">movie</i>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnToggleFullscreen videoButton btnPlayStateCommand" title="${ButtonFullscreen}" data-command="ToggleFullscreen">
-                            <iron-icon icon="fullscreen"></iron-icon>
+                        <button is="paper-icon-button-light" class="btnToggleFullscreen videoButton btnPlayStateCommand autoSize" title="${ButtonFullscreen}" data-command="ToggleFullscreen">
+                            <i class="md-icon">fullscreen</i>
                         </button>
                     </div>
                     <div>
 
-                        <button is="paper-icon-button-light" class="btnCommand repeatToggleButton" title="${ButtonRepeat}" data-command="SetRepeatMode">
-                            <iron-icon icon="repeat"></iron-icon>
+                        <button is="paper-icon-button-light" class="btnCommand repeatToggleButton autoSize" title="${ButtonRepeat}" data-command="SetRepeatMode">
+                            <i class="md-icon">repeat</i>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnCommand volumeButton" title="${ButtonMute}" data-command="ToggleMute">
-                            <iron-icon icon="volume-off"></iron-icon>
+                        <button is="paper-icon-button-light" class="btnCommand volumeButton autoSize" title="${ButtonMute}" data-command="ToggleMute">
+                            <i class="md-icon">volume_off</i>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnCommand volumeButton" title="${ButtonVolumeDown}" data-command="VolumeDown">
-                            <iron-icon icon="volume-down"></iron-icon>
+                        <button is="paper-icon-button-light" class="btnCommand volumeButton autoSize" title="${ButtonVolumeDown}" data-command="VolumeDown">
+                            <i class="md-icon">volume_down</i>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnCommand volumeButton" title="${ButtonVolumeUp}" data-command="VolumeUp">
-                            <iron-icon icon="volume-up"></iron-icon>
+                        <button is="paper-icon-button-light" class="btnCommand volumeButton autoSize" title="${ButtonVolumeUp}" data-command="VolumeUp">
+                            <i class="md-icon">volume_up</i>
                         </button>
                     </div>
                     <div class="nowPlayingPageUserDataButtons" style="margin-top:1em;">
@@ -97,54 +101,54 @@
         <div class="pageTabContent ehsContent" id="controlsTab" data-index="1">
             <div style="text-align:center;">
                 <div>
-                    <button is="paper-icon-button-light" class="btnArrowUp btnCommand" title="${ButtonArrowUp}" data-command="MoveUp">
-                        <iron-icon icon="keyboard-arrow-up"></iron-icon>
+                    <button is="paper-icon-button-light" class="btnArrowUp btnCommand autoSize" title="${ButtonArrowUp}" data-command="MoveUp">
+                        <i class="md-icon">keyboard_arrow_up</i>
                     </button>
                 </div>
                 <div>
-                    <button is="paper-icon-button-light" class="btnArrowLeft btnCommand" title="${ButtonArrowLeft}" data-command="MoveLeft">
-                        <iron-icon icon="keyboard-arrow-left"></iron-icon>
+                    <button is="paper-icon-button-light" class="btnArrowLeft btnCommand autoSize" title="${ButtonArrowLeft}" data-command="MoveLeft">
+                        <i class="md-icon">keyboard_arrow_left</i>
                     </button>
 
-                    <button is="paper-icon-button-light" class="btnOk btnCommand" title="${ButtonOk}" data-command="Select">
-                        <iron-icon icon="check"></iron-icon>
+                    <button is="paper-icon-button-light" class="btnOk btnCommand autoSize" title="${ButtonOk}" data-command="Select">
+                        <i class="md-icon">check</i>
                     </button>
 
-                    <button is="paper-icon-button-light" class="btnArrowRight btnCommand" title="${ButtonArrowRight}" data-command="MoveRight">
-                        <iron-icon icon="keyboard-arrow-right"></iron-icon>
+                    <button is="paper-icon-button-light" class="btnArrowRight btnCommand autoSize" title="${ButtonArrowRight}" data-command="MoveRight">
+                        <i class="md-icon">keyboard_arrow_right</i>
                     </button>
                 </div>
                 <div>
-                    <button is="paper-icon-button-light" class="btnArrowDown btnCommand" title="${ButtonArrowDown}" data-command="MoveDown">
-                        <iron-icon icon="keyboard-arrow-down"></iron-icon>
+                    <button is="paper-icon-button-light" class="btnArrowDown btnCommand autoSize" title="${ButtonArrowDown}" data-command="MoveDown">
+                        <i class="md-icon">keyboard_arrow_down</i>
                     </button>
                 </div>
                 <div>
-                    <button is="paper-icon-button-light" class="btnBack btnCommand" title="${ButtonBack}" data-command="Back">
-                        <iron-icon icon="arrow-back"></iron-icon>
+                    <button is="paper-icon-button-light" class="btnBack btnCommand autoSize" title="${ButtonBack}" data-command="Back">
+                        <i class="md-icon">arrow_back</i>
                     </button>
 
-                    <button is="paper-icon-button-light" class="btnInfo btnCommand" title="${ButtonInfo}" data-command="ToggleContextMenu">
-                        <iron-icon icon="info"></iron-icon>
+                    <button is="paper-icon-button-light" class="btnInfo btnCommand autoSize" title="${ButtonInfo}" data-command="ToggleContextMenu">
+                        <i class="md-icon">info</i>
                     </button>
                 </div>
                 <br />
                 <div>
-                    <button is="paper-icon-button-light" class="btnGoHome btnCommand" title="${ButtonHome}" data-command="GoHome">
-                        <iron-icon icon="home"></iron-icon>
+                    <button is="paper-icon-button-light" class="btnGoHome btnCommand autoSize" title="${ButtonHome}" data-command="GoHome">
+                        <i class="md-icon">home</i>
                     </button>
 
-                    <button is="paper-icon-button-light" class="btnShowSearch btnCommand" title="${ButtonSearch}" data-command="GoToSearch">
-                        <iron-icon icon="search"></iron-icon>
+                    <button is="paper-icon-button-light" class="btnShowSearch btnCommand autoSize" title="${ButtonSearch}" data-command="GoToSearch">
+                        <i class="md-icon">search</i>
                     </button>
                 </div>
                 <div>
-                    <button is="paper-icon-button-light" class="bthShowSettings btnCommand" title="${ButtonSettings}" data-command="GoToSettings">
-                        <iron-icon icon="settings"></iron-icon>
+                    <button is="paper-icon-button-light" class="bthShowSettings btnCommand autoSize" title="${ButtonSettings}" data-command="GoToSettings">
+                        <i class="md-icon">settings</i>
                     </button>
 
-                    <button is="paper-icon-button-light" class="btnScreenshot btnCommand" title="${ButtonTakeScreenshot}" data-command="TakeScreenshot">
-                        <iron-icon icon="videocam"></iron-icon>
+                    <button is="paper-icon-button-light" class="btnScreenshot btnCommand autoSize" title="${ButtonTakeScreenshot}" data-command="TakeScreenshot">
+                        <i class="md-icon">videocam</i>
                     </button>
                 </div>
             </div>
diff --git a/dashboard-ui/scripts/editorsidebar.js b/dashboard-ui/scripts/editorsidebar.js
index e187138051..286eda3ea0 100644
--- a/dashboard-ui/scripts/editorsidebar.js
+++ b/dashboard-ui/scripts/editorsidebar.js
@@ -1,4 +1,4 @@
-define(['datetime', 'jQuery'], function (datetime, $) {
+define(['datetime', 'jQuery', 'material-icons'], function (datetime, $) {
 
     function getNode(item, folderState, selected) {
 
@@ -60,7 +60,7 @@
         var htmlName = "<div class='" + cssClass + "'>";
 
         if (item.LockData) {
-            htmlName += '<iron-icon icon="lock" style="height:18px"></iron-icon>';
+            htmlName += '<i class="md-icon">lock</i>';
         }
 
         htmlName += name;
diff --git a/dashboard-ui/scripts/livetvseriestimers.js b/dashboard-ui/scripts/livetvseriestimers.js
index 3acf8226a8..52306a44e1 100644
--- a/dashboard-ui/scripts/livetvseriestimers.js
+++ b/dashboard-ui/scripts/livetvseriestimers.js
@@ -79,7 +79,7 @@
 
             html += '</paper-item-body>';
 
-            html += '<button type="button" is="paper-icon-button-light" data-seriestimerid="' + timer.Id + '" title="' + Globalize.translate('ButtonCancelSeries') + '" class="btnCancelSeries"><iron-icon icon="cancel"></iron-icon></button>';
+            html += '<button type="button" is="paper-icon-button-light" data-seriestimerid="' + timer.Id + '" title="' + Globalize.translate('ButtonCancelSeries') + '" class="btnCancelSeries autoSize"><i class="md-icon">cancel</i></button>';
 
             html += '</paper-icon-item>';
         }
diff --git a/dashboard-ui/scripts/registrationservices.js b/dashboard-ui/scripts/registrationservices.js
index 16a81bdcde..5ae5120ab4 100644
--- a/dashboard-ui/scripts/registrationservices.js
+++ b/dashboard-ui/scripts/registrationservices.js
@@ -93,7 +93,8 @@
         require(['dialogHelper', 'paper-fab', 'paper-item-body', 'paper-icon-item', 'emby-button'], function (dialogHelper) {
 
             var dlg = dialogHelper.createDialog({
-                size: 'fullscreen-border'
+                size: 'fullscreen-border',
+                removeOnClose: true
             });
 
             dlg.classList.add('ui-body-b');
@@ -122,8 +123,8 @@
 
             html += '<br/>';
 
-            html += '<a class="clearLink" href="http://emby.media/premiere" target="_blank"><button is="emby-button" type="button" class="raised submit block" autoFocus><iron-icon icon="check"></iron-icon><span>' + Globalize.translate('ButtonBecomeSupporter') + '</span></button></a>';
-            html += '<button is="emby-button" type="button" class="raised subdued block btnCancelSupporterInfo" style="background:#444;"><iron-icon icon="close"></iron-icon><span>' + Globalize.translate('ButtonClosePlayVideo') + '</span></button>';
+            html += '<a class="clearLink" href="http://emby.media/premiere" target="_blank"><button is="emby-button" type="button" class="raised submit block" autoFocus><i class="md-icon">check</i><span>' + Globalize.translate('ButtonBecomeSupporter') + '</span></button></a>';
+            html += '<button is="emby-button" type="button" class="raised subdued block btnCancelSupporterInfo" style="background:#444;"><i class="md-icon">close</i><span>' + Globalize.translate('ButtonClosePlayVideo') + '</span></button>';
 
             html += '</div>';
 
@@ -133,15 +134,19 @@
             // Has to be assigned a z-index after the call to .open() 
             dlg.addEventListener('close', function (e) {
                 appStorage.setItem(supporterPlaybackKey, new Date().getTime());
-                dlg.parentNode.removeChild(dlg);
                 resolve();
             });
 
             dialogHelper.open(dlg);
 
-            $('.btnCancelSupporterInfo').on('click', function () {
+            var onCancelClick = function () {
                 dialogHelper.close(dlg);
-            });
+            };
+            var i, length;
+            var elems = dlg.querySelectorAll('.btnCancelSupporterInfo');
+            for (i = 0, length = elems.length; i < length; i++) {
+                elems[i].addEventListener('click', onCancelClick);
+            }
         });
     }
 
diff --git a/dashboard-ui/selectserver.html b/dashboard-ui/selectserver.html
index 168c943d9a..ce1dd80b3b 100644
--- a/dashboard-ui/selectserver.html
+++ b/dashboard-ui/selectserver.html
@@ -6,7 +6,12 @@
 
             <div style="margin:1em 0 .5em;padding-left:5px;">
                 <h1 style="display:inline-block;vertical-align:middle;margin: 0;">${HeaderSelectServer}</h1>
-                <a href="https://github.com/MediaBrowser/Wiki/wiki/Emby%20Connect" target="_blank" class="clearLink" style="margin-top:0;display:inline-block;vertical-align:middle;margin-left:1em;"><button is="emby-button" type="button" class="raised secondary mini"><iron-icon icon="info"></iron-icon><span>${ButtonHelp}</span></button></a>
+                <a href="https://github.com/MediaBrowser/Wiki/wiki/Emby%20Connect" target="_blank" class="clearLink" style="margin-top: 0; display: inline-block; vertical-align: middle; margin-left: 1em;">
+                    <button is="emby-button" type="button" class="raised secondary mini">
+                        <i class="md-icon">info</i>
+                        <span>${ButtonHelp}</span>
+                    </button>
+                </a>
             </div>
 
             <div class="serverList paperList"></div>
@@ -17,11 +22,21 @@
             </div>
 
             <div class="addServer" style="margin:0 0 1em;">
-                <a href="connectlogin.html?mode=manualserver" class="clearLink"><button is="emby-button" type="button" class="raised cancel block"><iron-icon icon="add"></iron-icon><span>${ButtonAddServer}</span></button></a>
+                <a href="connectlogin.html?mode=manualserver" class="clearLink">
+                    <button is="emby-button" type="button" class="raised cancel block">
+                        <i class="md-icon">add</i>
+                        <span>${ButtonAddServer}</span>
+                    </button>
+                </a>
             </div>
 
             <div class="connectLogin" style="margin:1em 0;display:none;">
-                <a href="connectlogin.html?mode=connect" class="clearLink"><button is="emby-button" type="button" class="raised accent block"><iron-icon icon="check"></iron-icon><span>${ButtonSignInWithConnect}</span></button></a>
+                <a href="connectlogin.html?mode=connect" class="clearLink">
+                    <button is="emby-button" type="button" class="raised accent block">
+                        <i class="md-icon">check</i>
+                        <span>${ButtonSignInWithConnect}</span>
+                    </button>
+                </a>
             </div>
 
             <div class="invitationSection" style="display:none;">
diff --git a/dashboard-ui/syncactivity.html b/dashboard-ui/syncactivity.html
index 30d4e43190..d0ad8fcd28 100644
--- a/dashboard-ui/syncactivity.html
+++ b/dashboard-ui/syncactivity.html
@@ -17,7 +17,10 @@
                 </div>
             </div>
             <div style="text-align:right;">
-                <button is="emby-button" type="button" class="raised btnSync subdued"><iron-icon icon="sync"></iron-icon><span>${ButtonConvertMedia}</span></button>
+                <button is="emby-button" type="button" class="raised btnSync subdued">
+                    <i class="md-icon">sync</i>
+                    <span>${ButtonConvertMedia}</span>
+                </button>
                 <progress max="100" min="0" style="width:100px;display:none;" class="syncProgress"></progress>
             </div>
             <br />
diff --git a/dashboard-ui/tv.html b/dashboard-ui/tv.html
index 9bff4b0faa..3390550d63 100644
--- a/dashboard-ui/tv.html
+++ b/dashboard-ui/tv.html
@@ -13,7 +13,10 @@
         <div id="resumableSection" class="homePageSection">
             <div>
                 <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderResume}</h1>
-                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Resume"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></button>
+                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Resume">
+                    <i class="md-icon">sync</i>
+                    <span>${ButtonSync}</span>
+                </button>
             </div>
 
             <div id="resumableItems" class="itemsContainer noautoinit">
@@ -23,7 +26,10 @@
         <div class="homePageSection">
             <div>
                 <h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
-                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="NextUp"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></button>
+                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="NextUp">
+                    <i class="md-icon">sync</i>
+                    <span>${ButtonSync}</span>
+                </button>
             </div>
             <div id="nextUpItems" class="itemsContainer">
             </div>
@@ -34,7 +40,10 @@
         <div class="homePageSection">
             <div>
                 <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestEpisodes}</h1>
-                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></button>
+                <button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Latest">
+                    <i class="md-icon">sync</i>
+                    <span>${ButtonSync}</span>
+                </button>
             </div>
             <div id="latestEpisodes" class="itemsContainer">
             </div>
@@ -53,9 +62,9 @@
     <div class="pageTabContent ehsContent" id="seriesTab" data-index="3">
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
 
         <div class="alphaPicker alphabetPicker vertical">
@@ -70,9 +79,9 @@
     <div class="pageTabContent ehsContent" id="episodesTab" data-index="4">
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
-            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
         <div class="itemsContainer">
         </div>
@@ -82,7 +91,7 @@
     </div>
     <div class="pageTabContent ehsContent" id="genresTab" data-index="5">
         <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
-            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
         </div>
         <div id="items" class="itemsContainer paddedItemsContainer"></div>
     </div>