diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index 4e589c4a19..472585674e 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -1497,13 +1497,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 case 'Person':
                     return '<i class="cardImageIcon material-icons">person</i>';
                 case 'Movie':
-                    return '<i class="cardImageIcon material-icons">movie</i>'
+                    return '<i class="cardImageIcon material-icons">movie</i>';
                 case 'Series':
-                    return '<i class="cardImageIcon material-icons">tv</i>'
+                    return '<i class="cardImageIcon material-icons">tv</i>';
                 case 'Book':
-                    return '<i class="cardImageIcon material-icons">book</i>'
+                    return '<i class="cardImageIcon material-icons">book</i>';
                 case 'Folder':
-                    return '<i class="cardImageIcon material-icons">folder</i>'
+                    return '<i class="cardImageIcon material-icons">folder</i>';
             }
 
             if (options && options.defaultCardImageIcon) {
diff --git a/src/components/cardbuilder/chaptercardbuilder.js b/src/components/cardbuilder/chaptercardbuilder.js
index 75b940285f..02d583abc0 100644
--- a/src/components/cardbuilder/chaptercardbuilder.js
+++ b/src/components/cardbuilder/chaptercardbuilder.js
@@ -90,7 +90,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
         var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
 
         if (!imgUrl) {
-            cardImageContainer += '<i class="material-icons cardImageIcon">local_movies</i>';
+            cardImageContainer += '<i class="material-icons cardImageIcon local_movies"></i>';
         }
 
         var nameHtml = '';
diff --git a/src/components/channelmapper/channelmapper.js b/src/components/channelmapper/channelmapper.js
index 2b2de1870c..1b536f440b 100644
--- a/src/components/channelmapper/channelmapper.js
+++ b/src/components/channelmapper/channelmapper.js
@@ -84,7 +84,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
 
             html += "</div>";
             html += "</div>";
-            html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><i class="material-icons">mode_edit</i></button>';
+            html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><i class="material-icons mode_edit"></i></button>';
             return html += "</div>";
         }
 
diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js
index 06f7773cf6..b71f7bbb05 100644
--- a/src/components/directorybrowser/directorybrowser.js
+++ b/src/components/directorybrowser/directorybrowser.js
@@ -76,7 +76,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
         html += name;
         html += "</div>";
         html += "</div>";
-        html += '<i class="material-icons" style="font-size:inherit;">arrow_forward</i>';
+        html += '<i class="material-icons arrow_forward" style="font-size:inherit;"></i>';
         html += "</div>";
         return html;
     }
diff --git a/src/components/imagedownloader/imagedownloader.js b/src/components/imagedownloader/imagedownloader.js
index f984ce22a5..ce53b5cf0d 100644
--- a/src/components/imagedownloader/imagedownloader.js
+++ b/src/components/imagedownloader/imagedownloader.js
@@ -117,7 +117,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
             html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">';
 
             html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="material-icons arrow_back"></i></button>';
-            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="material-icons">arrow_forward</i></button>';
+            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="material-icons arrow_forward"></i></button>';
             html += '</div>';
         }
 
@@ -277,7 +277,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         if (enableFooterButtons) {
             html += '<div class="cardText cardTextCentered">';
 
-            html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="material-icons">cloud_download</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="material-icons cloud_download"></i></button>';
             html += '</div>';
         }
 
diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js
index f9f63c9b51..010af4a1df 100644
--- a/src/components/libraryoptionseditor/libraryoptionseditor.js
+++ b/src/components/libraryoptionseditor/libraryoptionseditor.js
@@ -58,7 +58,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
         for (var i = 0; i < plugins.length; i++) {
             var plugin = plugins[i];
             html += '<div class="listItem localReaderOption sortableOption" data-pluginname="' + plugin.Name + '">';
-            html += '<i class="listItemIcon material-icons">live_tv</i>';
+            html += '<i class="listItemIcon material-icons live_tv"></i>';
             html += '<div class="listItemBody">';
             html += '<h3 class="listItemBodyText">';
             html += plugin.Name;
diff --git a/src/components/metadataeditor/metadataeditor.js b/src/components/metadataeditor/metadataeditor.js
index 030fdc80ce..e8736258fa 100644
--- a/src/components/metadataeditor/metadataeditor.js
+++ b/src/components/metadataeditor/metadataeditor.js
@@ -477,7 +477,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             html += '</div>';
 
             if (formatString) {
-                html += '<button type="button" is="paper-icon-button-light" class="btnOpenExternalId align-self-flex-end" data-fieldid="' + id + '"><i class="material-icons">open_in_browser</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" class="btnOpenExternalId align-self-flex-end" data-fieldid="' + id + '"><i class="material-icons open_in_browser"></i></button>';
             }
             html += '</div>';
 
@@ -917,7 +917,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         for (var i = 0; i < items.length; i++) {
             html += '<div class="listItem">';
 
-            html += '<i class="material-icons listItemIcon" style="background-color:#333;">live_tv</i>';
+            html += '<i class="material-icons listItemIcon live_tv" style="background-color:#333;"></i>';
 
             html += '<div class="listItemBody">';
 
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index 11f14fdc8e..1ed220e069 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -266,7 +266,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 toggleRepeatButton.innerHTML = "<i class='material-icons'>repeat</i>";
                 toggleRepeatButton.classList.add("repeatButton-active");
             } else if ("RepeatOne" == repeatMode) {
-                toggleRepeatButton.innerHTML = "<i class='material-icons'>repeat_one</i>";
+                toggleRepeatButton.innerHTML = "<i class='material-icons repeat_one'></i>";
                 toggleRepeatButton.classList.add("repeatButton-active");
             } else {
                 toggleRepeatButton.innerHTML = "<i class='material-icons'>repeat</i>";
diff --git a/src/controllers/dashboard/notifications/notifications.js b/src/controllers/dashboard/notifications/notifications.js
index 466728210e..8f63753bf3 100644
--- a/src/controllers/dashboard/notifications/notifications.js
+++ b/src/controllers/dashboard/notifications/notifications.js
@@ -31,14 +31,14 @@ define(["loading", "libraryMenu", "globalize", "listViewStyle", "emby-button"],
                 }
                 itemHtml += '<a class="listItem listItem-border" is="emby-linkbutton" data-ripple="false" href="notificationsetting.html?type=' + notification.Type + '">';
                 if (notification.Enabled) {
-                    itemHtml += '<i class="listItemIcon material-icons">notifications_active</i>';
+                    itemHtml += '<i class="listItemIcon material-icons notifications_active"></i>';
                 } else {
-                    itemHtml += '<i class="listItemIcon material-icons" style="background-color:#999;">notifications_off</i>';
+                    itemHtml += '<i class="listItemIcon material-icons notifications_off" style="background-color:#999;"></i>';
                 }
                 itemHtml += '<div class="listItemBody">';
                 itemHtml += '<div class="listItemBodyText">' + notification.Name + "</div>";
                 itemHtml += "</div>";
-                itemHtml += '<button type="button" is="paper-icon-button-light"><i class="material-icons">mode_edit</i></button>';
+                itemHtml += '<button type="button" is="paper-icon-button-light"><i class="material-icons mode_edit"></i></button>';
                 itemHtml += "</a>";
                 return itemHtml;
             }).join("");
diff --git a/src/controllers/devices.js b/src/controllers/devices.js
index 4ddb4d4d20..3fd2be983e 100644
--- a/src/controllers/devices.js
+++ b/src/controllers/devices.js
@@ -80,7 +80,7 @@ define(["loading", "dom", "libraryMenu", "globalize", "scripts/imagehelper", "hu
                 deviceHtml += '<div class="cardImage" style="background-image:url(\'' + iconUrl + "');background-size: auto 64%;background-position:center center;\">";
                 deviceHtml += "</div>";
             } else {
-                deviceHtml += '<i class="cardImageIcon material-icons">tablet_android</i>';
+                deviceHtml += '<i class="cardImageIcon material-icons tablet_android"></i>';
             }
 
             deviceHtml += "</a>";
diff --git a/src/controllers/dlnaprofiles.js b/src/controllers/dlnaprofiles.js
index eae529c538..e1719ea597 100644
--- a/src/controllers/dlnaprofiles.js
+++ b/src/controllers/dlnaprofiles.js
@@ -32,7 +32,7 @@ define(["jQuery", "globalize", "loading", "libraryMenu", "listViewStyle", "emby-
         for (var i = 0, length = profiles.length; i < length; i++) {
             var profile = profiles[i];
             html += '<div class="listItem listItem-border">';
-            html += '<i class="listItemIcon material-icons">live_tv</i>';
+            html += '<i class="listItemIcon material-icons live_tv"></i>';
             html += '<div class="listItemBody two-line">';
             html += "<a is='emby-linkbutton' style='padding:0;margin:0;' data-ripple='false' class='clearLink' href='dlnaprofile.html?id=" + profile.Id + "'>";
             html += "<div>" + profile.Name + "</div>";
diff --git a/src/scripts/editorsidebar.js b/src/scripts/editorsidebar.js
index 1a9b9775ef..b7cb4b5c57 100644
--- a/src/scripts/editorsidebar.js
+++ b/src/scripts/editorsidebar.js
@@ -49,7 +49,7 @@ define(["datetime", "jQuery", "material-icons"], function (datetime, $) {
         } else if (item.MediaType === "Audio") {
             htmlName += '<i class="material-icons metadataSidebarIcon">audiotrack</i>';
         } else if (item.Type === "TvChannel") {
-            htmlName += '<i class="material-icons metadataSidebarIcon">live_tv</i>';
+            htmlName += '<i class="material-icons metadataSidebarIcon live_tv"></i>';
         } else if (item.MediaType === "Photo") {
             htmlName += '<i class="material-icons metadataSidebarIcon">photo</i>';
         } else if (item.MediaType === "Book") {
diff --git a/src/scripts/librarybrowser.js b/src/scripts/librarybrowser.js
index 4aab16b2e3..bd8980aed2 100644
--- a/src/scripts/librarybrowser.js
+++ b/src/scripts/librarybrowser.js
@@ -92,7 +92,7 @@ define(["userSettings"], function (userSettings) {
 
                 if (showControls) {
                     html += '<button is="paper-icon-button-light" class="btnPreviousPage autoSize" ' + (startIndex ? "" : "disabled") + '><i class="material-icons arrow_back"></i></button>';
-                    html += '<button is="paper-icon-button-light" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? "disabled" : "") + '><i class="material-icons">arrow_forward</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? "disabled" : "") + '><i class="material-icons arrow_forward"></i></button>';
                 }
 
                 if (options.addLayoutButton) {
diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js
index 0abcf697b1..a1ca198d55 100644
--- a/src/scripts/librarymenu.js
+++ b/src/scripts/librarymenu.js
@@ -205,7 +205,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
             html += globalize.translate("HeaderAdmin");
             html += "</h3>";
             html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="dashboard.html"><i class="material-icons navMenuOptionIcon">dashboard</i><span class="navMenuOptionText">' + globalize.translate("TabDashboard") + "</span></a>";
-            html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder editorViewMenu" data-itemid="editor" href="edititemmetadata.html"><i class="material-icons navMenuOptionIcon">mode_edit</i><span class="navMenuOptionText">' + globalize.translate("Metadata") + "</span></a>";
+            html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder editorViewMenu" data-itemid="editor" href="edititemmetadata.html"><i class="material-icons navMenuOptionIcon mode_edit"></i><span class="navMenuOptionText">' + globalize.translate("Metadata") + "</span></a>";
             html += "</div>";
         }
 
@@ -219,7 +219,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
                 html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" data-itemid="selectserver" href="selectserver.html?showuser=1"><i class="material-icons navMenuOptionIcon">wifi</i><span class="navMenuOptionText">' + globalize.translate("ButtonSelectServer") + "</span></a>";
             }
 
-            html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder btnLogout" data-itemid="logout" href="#"><i class="material-icons navMenuOptionIcon">exit_to_app</i><span class="navMenuOptionText">' + globalize.translate("ButtonSignOut") + "</span></a>";
+            html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder btnLogout" data-itemid="logout" href="#"><i class="material-icons navMenuOptionIcon exit_to_app"></i><span class="navMenuOptionText">' + globalize.translate("ButtonSignOut") + "</span></a>";
             html += "</div>";
         }