diff --git a/src/components/accessschedule/accessschedule.template.html b/src/components/accessschedule/accessschedule.template.html
index 8c01d35962..50d172ae49 100644
--- a/src/components/accessschedule/accessschedule.template.html
+++ b/src/components/accessschedule/accessschedule.template.html
@@ -1,5 +1,7 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
+        <i class="md-icon">arrow_back</i>
+    </button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderAccessSchedule}
     </h3>
@@ -36,4 +38,4 @@
             </div>
         </form>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/actionsheet/actionsheet.js b/src/components/actionsheet/actionsheet.js
index 46a7cedf1e..d4e6b61c8a 100644
--- a/src/components/actionsheet/actionsheet.js
+++ b/src/components/actionsheet/actionsheet.js
@@ -158,7 +158,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu
         }
 
         if (layoutManager.tv) {
-            html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
         }
 
         // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
@@ -357,4 +357,4 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu
     return {
         show: show
     };
-});
\ No newline at end of file
+});
diff --git a/src/components/alphapicker/alphapicker.js b/src/components/alphapicker/alphapicker.js
index ac2ea9e676..b9d31be5dd 100644
--- a/src/components/alphapicker/alphapicker.js
+++ b/src/components/alphapicker/alphapicker.js
@@ -67,8 +67,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
 
         html += '<div class="' + rowClassName + '">';
         if (options.mode === 'keyboard') {
-            // space_bar icon
-            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">&#xE256;</i></button>';
+            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">space_bar</i></button>';
         } else {
             letters = ['#'];
             html += mapLetters(letters, vertical).join('');
@@ -78,8 +77,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
         html += mapLetters(letters, vertical).join('');
 
         if (options.mode === 'keyboard') {
-            // backspace icon
-            html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">&#xE14A;</i></button>';
+            html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">backspace</i></button>';
             html += '</div>';
 
             letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -320,4 +318,4 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
     };
 
     return AlphaPicker;
-});
\ No newline at end of file
+});
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index 6e9340e1b8..3b7516309c 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -758,7 +758,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             if (isOuterFooter && options.cardLayout && layoutManager.mobile) {
 
                 if (options.cardFooterAside !== 'none') {
-                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="md-icon">&#xE5D3;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="md-icon">more_horiz</i></button>';
                 }
             }
 
@@ -1315,15 +1315,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 var btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction';
 
                 if (options.centerPlayButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="md-icon cardOverlayButtonIcon">&#xE037;</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="md-icon cardOverlayButtonIcon">play_arrow</i></button>';
                 }
 
                 if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="md-icon cardOverlayButtonIcon">&#xE037;</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="md-icon cardOverlayButtonIcon">play_arrow</i></button>';
                 }
 
                 if (options.overlayMoreButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon">&#xE5D3;</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon">more_horiz</i></button>';
                 }
             }
 
@@ -1456,7 +1456,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
 
             if (playbackManager.canPlay(item)) {
-                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE037;</i></button>';
+                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">play_arrow</i></button>';
             }
 
             html += '<div class="cardOverlayButton-br">';
@@ -1465,7 +1465,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
             if (itemHelper.canMarkPlayed(item)) {
                 require(['emby-playstatebutton']);
-                html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE5CA;</i></button>';
+                html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">check</i></button>';
             }
 
             if (itemHelper.canRate(item)) {
@@ -1473,10 +1473,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 var likes = userData.Likes == null ? '' : userData.Likes;
 
                 require(['emby-ratingbutton']);
-                html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE87D;</i></button>';
+                html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">favorite</i></button>';
             }
 
-            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE5D3;</i></button>';
+            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">more_horiz</i></button>';
 
             html += '</div>';
             html += '</div>';
@@ -1489,10 +1489,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 return '<i class="cardImageIcon md-icon">' + imageHelper.getLibraryIcon(item.CollectionType) + '</i>'
             }
             if (item.Type === 'MusicAlbum') {
-                return '<i class="cardImageIcon md-icon">&#xE019;</i>';
+                return '<i class="cardImageIcon md-icon">album</i>';
             }
             if (item.Type === 'MusicArtist' || item.Type === 'Person') {
-                return '<i class="cardImageIcon md-icon">&#xE7FD;</i>';
+                return '<i class="cardImageIcon md-icon">person</i>';
             }
             if (options.defaultCardImageIcon) {
                 return '<i class="cardImageIcon md-icon">' + options.defaultCardImageIcon + '</i>';
@@ -1584,7 +1584,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                     indicatorsElem = ensureIndicators(card, indicatorsElem);
                     indicatorsElem.appendChild(playedIndicator);
                 }
-                playedIndicator.innerHTML = '<i class="md-icon indicatorIcon">&#xE5CA;</i>';
+                playedIndicator.innerHTML = '<i class="md-icon indicatorIcon">check</i>';
             } else {
 
                 playedIndicator = card.querySelector('.playedIndicator');
@@ -1665,7 +1665,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 var icon = cell.querySelector('.timerIndicator');
                 if (!icon) {
                     var indicatorsElem = ensureIndicators(cell);
-                    indicatorsElem.insertAdjacentHTML('beforeend', '<i class="md-icon timerIndicator indicatorIcon">&#xE061;</i>');
+                    indicatorsElem.insertAdjacentHTML('beforeend', '<i class="md-icon timerIndicator indicatorIcon">fiber_manual_record</i>');
                 }
                 cell.setAttribute('data-timerid', newTimerId);
             }
diff --git a/src/components/cardbuilder/peoplecardbuilder.js b/src/components/cardbuilder/peoplecardbuilder.js
index e0a5050dc5..5d34d29e6e 100644
--- a/src/components/cardbuilder/peoplecardbuilder.js
+++ b/src/components/cardbuilder/peoplecardbuilder.js
@@ -10,7 +10,7 @@ define(['cardBuilder'], function (cardBuilder) {
             cardFooterAside: 'none',
             showPersonRoleOrType: true,
             cardCssClass: 'personCard',
-            defaultCardImageIcon: '&#xE7FD;'
+            defaultCardImageIcon: 'person'
         });
         cardBuilder.buildCards(items, options);
     }
@@ -19,4 +19,4 @@ define(['cardBuilder'], function (cardBuilder) {
         buildPeopleCards: buildPeopleCards
     };
 
-});
\ No newline at end of file
+});
diff --git a/src/components/channelmapper/channelmapper.js b/src/components/channelmapper/channelmapper.js
index 841a6a81af..0247f79a55 100644
--- a/src/components/channelmapper/channelmapper.js
+++ b/src/components/channelmapper/channelmapper.js
@@ -127,7 +127,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
             var html = "";
             var title = globalize.translate("MapChannels");
             html += '<div class="formDialogHeader">';
-            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
             html += '<h3 class="formDialogHeaderTitle">';
             html += title;
             html += "</h3>";
diff --git a/src/components/collectioneditor/collectioneditor.js b/src/components/collectioneditor/collectioneditor.js
index ccb1cdc286..a91594556e 100644
--- a/src/components/collectioneditor/collectioneditor.js
+++ b/src/components/collectioneditor/collectioneditor.js
@@ -243,13 +243,13 @@ define(['dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManage
         var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
 
         html += '<div class="formDialogHeader">';
-        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
         html += '<h3 class="formDialogHeaderTitle">';
         html += title;
         html += '</h3>';
 
         if (appHost.supports('externallinks')) {
-            html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><i class="md-icon">&#xE88E;</i><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
+            html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><i class="md-icon">info</i><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
         }
 
         html += '</div>';
@@ -284,4 +284,4 @@ define(['dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManage
     };
 
     return CollectionEditor;
-});
\ No newline at end of file
+});
diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js
index 9a3aed1045..ef51ce45b5 100644
--- a/src/components/directorybrowser/directorybrowser.js
+++ b/src/components/directorybrowser/directorybrowser.js
@@ -265,7 +265,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
 
                     var html = "";
                     html += '<div class="formDialogHeader">';
-                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
                     html += '<h3 class="formDialogHeaderTitle">';
                     html += options.header || Globalize.translate("HeaderSelectPath");
                     html += "</h3>";
diff --git a/src/components/emby-checkbox/emby-checkbox.js b/src/components/emby-checkbox/emby-checkbox.js
index 1721bf3ca7..d6276e826c 100644
--- a/src/components/emby-checkbox/emby-checkbox.js
+++ b/src/components/emby-checkbox/emby-checkbox.js
@@ -54,7 +54,7 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
             outlineClass += ' ' + customClass;
         }
 
-        var checkedIcon = this.getAttribute('data-checkedicon') || '&#xE5CA;';
+        var checkedIcon = this.getAttribute('data-checkedicon') || 'check';
         var uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
         var checkHtml = '<i class="md-icon checkboxIcon checkboxIcon-checked">' + checkedIcon + '</i>';
         var uncheckedHtml = '<i class="md-icon checkboxIcon checkboxIcon-unchecked">' + uncheckedIcon + '</i>';
diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.js b/src/components/emby-scrollbuttons/emby-scrollbuttons.js
index 37638a1b89..deec96d9a2 100644
--- a/src/components/emby-scrollbuttons/emby-scrollbuttons.js
+++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.js
@@ -7,7 +7,7 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
 
     function getScrollButtonHtml(direction) {
         var html = '';
-        var icon = direction === 'left' ? '&#xE5CB;' : '&#xE5CC;';
+        var icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
 
         html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
         html += '<i class="md-icon">' + icon + '</i>';
@@ -175,4 +175,4 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
         prototype: EmbyScrollButtonsPrototype,
         extends: 'div'
     });
-});
\ No newline at end of file
+});
diff --git a/src/components/emby-select/emby-select.js b/src/components/emby-select/emby-select.js
index 3cf4d6774d..248e7ce570 100644
--- a/src/components/emby-select/emby-select.js
+++ b/src/components/emby-select/emby-select.js
@@ -144,7 +144,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe
         this.parentNode.insertBefore(label, this);
 
         if (this.classList.contains('emby-select-withcolor')) {
-            this.parentNode.insertAdjacentHTML('beforeend', '<div class="selectArrowContainer"><div style="visibility:hidden;">0</div><i class="selectArrow md-icon">&#xE313;</i></div>');
+            this.parentNode.insertAdjacentHTML('beforeend', '<div class="selectArrowContainer"><div style="visibility:hidden;">0</div><i class="selectArrow md-icon">keyboard_arrow_down</i></div>');
         }
     };
 
diff --git a/src/components/favoriteitems.js b/src/components/favoriteitems.js
index c84d84f585..17129ea54e 100644
--- a/src/components/favoriteitems.js
+++ b/src/components/favoriteitems.js
@@ -136,7 +136,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += globalize.translate(section.name);
                     html += "</h2>";
-                    html += '<i class="md-icon">&#xE5CC;</i>';
+                    html += '<i class="md-icon">chevron_right</i>';
                     html += "</a>";
                 } else {
                     html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";
diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js
index 2f18223d41..f2196bf632 100644
--- a/src/components/filtermenu/filtermenu.js
+++ b/src/components/filtermenu/filtermenu.js
@@ -279,7 +279,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                 var html = '';
 
                 html += '<div class="formDialogHeader">';
-                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
                 html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>';
 
                 html += '</div>';
@@ -347,4 +347,4 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
     };
 
     return FilterMenu;
-});
\ No newline at end of file
+});
diff --git a/src/components/guide/guide-settings.template.html b/src/components/guide/guide-settings.template.html
index 605c408a85..d85b4a71b9 100644
--- a/src/components/guide/guide-settings.template.html
+++ b/src/components/guide/guide-settings.template.html
@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${Settings}
     </h3>
@@ -65,4 +65,4 @@
         </div>
 
     </form>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js
index 1e9484caf8..c8ed31df0f 100644
--- a/src/components/guide/guide.js
+++ b/src/components/guide/guide.js
@@ -416,7 +416,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             var status;
 
             if (item.Type === 'SeriesTimer') {
-                return '<i class="md-icon programIcon seriesTimerIcon">&#xE062;</i>';
+                return '<i class="md-icon programIcon seriesTimerIcon">fiber_smart_record</i>';
             } else if (item.TimerId || item.SeriesTimerId) {
 
                 status = item.Status || 'Cancelled';
@@ -430,13 +430,13 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             if (item.SeriesTimerId) {
 
                 if (status !== 'Cancelled') {
-                    return '<i class="md-icon programIcon seriesTimerIcon">&#xE062;</i>';
+                    return '<i class="md-icon programIcon seriesTimerIcon">fiber_smart_record</i>';
                 }
 
-                return '<i class="md-icon programIcon seriesTimerIcon seriesTimerIcon-inactive">&#xE062;</i>';
+                return '<i class="md-icon programIcon seriesTimerIcon seriesTimerIcon-inactive">fiber_smart_record</i>';
             }
 
-            return '<i class="md-icon programIcon timerIcon">&#xE061;</i>';
+            return '<i class="md-icon programIcon timerIcon">fiber_manual_record</i>';
         }
 
         function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
@@ -550,7 +550,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
                     html += '<div class="' + guideProgramNameClass + '">';
 
-                    html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon md-icon">&#xE314;</i></div>';
+                    html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon md-icon">keyboard_arrow_left</i></div>';
 
                     html += '<div class="guideProgramNameText">' + program.Name;
 
@@ -1106,7 +1106,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
                 var icon = cell.querySelector('.timerIcon');
                 if (!icon) {
-                    cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon md-icon programIcon">&#xE061;</i>');
+                    cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon md-icon programIcon">fiber_manual_record</i>');
                 }
 
                 if (newTimerId) {
@@ -1267,4 +1267,4 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
     });
 
     return Guide;
-});
\ No newline at end of file
+});
diff --git a/src/components/guide/tvguide.template.html b/src/components/guide/tvguide.template.html
index 8778fcd3f7..7edffec6d1 100644
--- a/src/components/guide/tvguide.template.html
+++ b/src/components/guide/tvguide.template.html
@@ -10,7 +10,7 @@
     <div class="guide-headerTimeslots">
         <div class="guide-channelTimeslotHeader">
             <button is="paper-icon-button-light" type="button" class="btnGuideViewSettings">
-                <i class="md-icon btnGuideViewSettingsIcon">&#xE5D3;</i>
+                <i class="md-icon btnGuideViewSettingsIcon">more_horiz</i>
             </button>
         </div>
         <div class="timeslotHeaders scrollX guideScroller"></div>
@@ -30,9 +30,9 @@
 
 <div class="guideOptions hide">
     <button is="paper-icon-button-light" type="button" class="btnPreviousPage">
-        <i class="md-icon">&#xE5C4;</i>
+        <i class="md-icon">arrow_back</i>
     </button>
     <button is="paper-icon-button-light" type="button" class="btnNextPage">
-        <i class="md-icon">&#xE5C8;</i>
+        <i class="md-icon">arrow_forward</i>
     </button>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/homescreensettings/homescreensettings.js b/src/components/homescreensettings/homescreensettings.js
index dc7769be36..5b966327eb 100644
--- a/src/components/homescreensettings/homescreensettings.js
+++ b/src/components/homescreensettings/homescreensettings.js
@@ -149,7 +149,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
             currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">';
 
-            currentHtml += '<i class="md-icon listItemIcon">&#xE2C8;</i>';
+            currentHtml += '<i class="md-icon listItemIcon">folder_open</i>';
 
             currentHtml += '<div class="listItemBody">';
 
@@ -159,8 +159,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
             currentHtml += '</div>';
 
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="md-icon">&#xE316;</i></button>';
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="md-icon">&#xE313;</i></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="md-icon">keyboard_arrow_up</i></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="md-icon">keyboard_arrow_down</i></button>';
 
             currentHtml += '</div>';
 
@@ -539,4 +539,4 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     };
 
     return HomeScreenSettings;
-});
\ No newline at end of file
+});
diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js
index 0c92f34e3d..3f86e16796 100644
--- a/src/components/homesections/homesections.js
+++ b/src/components/homesections/homesections.js
@@ -260,7 +260,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += globalize.translate('LatestFromLibrary', parent.Name);
             html += '</h2>';
-            html += '<i class="md-icon">&#xE5CC;</i>';
+            html += '<i class="md-icon">chevron_right</i>';
             html += '</a>';
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', parent.Name) + '</h2>';
@@ -608,7 +608,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += globalize.translate('HeaderOnNow');
                     html += '</h2>';
-                    html += '<i class="md-icon">&#xE5CC;</i>';
+                    html += '<i class="md-icon">chevron_right</i>';
                     html += '</a>';
 
                 } else {
@@ -683,7 +683,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += globalize.translate('HeaderNextUp');
             html += '</h2>';
-            html += '<i class="md-icon">&#xE5CC;</i>';
+            html += '<i class="md-icon">chevron_right</i>';
             html += '</a>';
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>';
diff --git a/src/components/imagedownloader/imagedownloader.js b/src/components/imagedownloader/imagedownloader.js
index ed0539bdda..7bd5159a17 100644
--- a/src/components/imagedownloader/imagedownloader.js
+++ b/src/components/imagedownloader/imagedownloader.js
@@ -116,7 +116,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         if (showControls) {
             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="md-icon">&#xE5C4;</i></button>';
+            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="md-icon">arrow_back</i></button>';
             html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="md-icon">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="md-icon">&#xE2C0;</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="md-icon">cloud_download</i></button>';
             html += '</div>';
         }
 
diff --git a/src/components/imagedownloader/imagedownloader.template.html b/src/components/imagedownloader/imagedownloader.template.html
index 2adc573de6..c192fad299 100644
--- a/src/components/imagedownloader/imagedownloader.template.html
+++ b/src/components/imagedownloader/imagedownloader.template.html
@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${Search}
     </h3>
diff --git a/src/components/imageeditor/imageeditor.template.html b/src/components/imageeditor/imageeditor.template.html
index e25dc8789b..3524f449de 100644
--- a/src/components/imageeditor/imageeditor.template.html
+++ b/src/components/imageeditor/imageeditor.template.html
@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderEditImages}
     </h3>
@@ -12,10 +12,10 @@
             <div class="imageEditor-buttons first-imageEditor-buttons">
                 <h2 style="margin:0;">${Images}</h2>
                 <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
-                    <i class="md-icon">&#xE8B6;</i>
+                    <i class="md-icon">search</i>
                 </button>
                 <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
             </div>
             <div id="images" class="itemsContainer vertical-wrap">
@@ -27,10 +27,10 @@
             <div class="imageEditor-buttons">
                 <h2 style="margin:0;">${Backdrops}</h2>
                 <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
-                    <i class="md-icon">&#xE8B6;</i>
+                    <i class="md-icon">search</i>
                 </button>
                 <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Backdrop">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
             </div>
             <div id="backdrops" class="itemsContainer vertical-wrap">
@@ -42,10 +42,10 @@
             <div class="imageEditor-buttons">
                 <h2 style="margin: 0;">${Screenshots}</h2>
                 <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot">
-                    <i class="md-icon">&#xE8B6;</i>
+                    <i class="md-icon">search</i>
                 </button>
                 <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Screenshot">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
             </div>
             <div id="screenshots" class="itemsContainer vertical-wrap">
diff --git a/src/components/imageoptionseditor/imageoptionseditor.template.html b/src/components/imageoptionseditor/imageoptionseditor.template.html
index a247c773e7..9bb1f8426b 100644
--- a/src/components/imageoptionseditor/imageoptionseditor.template.html
+++ b/src/components/imageoptionseditor/imageoptionseditor.template.html
@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderImageOptions}
     </h3>
@@ -75,4 +75,4 @@
 
         </form>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/imageuploader/imageuploader.template.html b/src/components/imageuploader/imageuploader.template.html
index 90d9cf0def..b33355945a 100644
--- a/src/components/imageuploader/imageuploader.template.html
+++ b/src/components/imageuploader/imageuploader.template.html
@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderUploadImage}
     </h3>
@@ -14,7 +14,7 @@
                 <h2 style="margin:0;">${HeaderAddUpdateImage}</h2>
 
                 <button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
-                    <i class="md-icon">&#xE2C7;</i>
+                    <i class="md-icon">folder</i>
                     <span>${Browse}</span>
                 </button>
             </div>
diff --git a/src/components/indicators/indicators.js b/src/components/indicators/indicators.js
index 2e8d28523e..8deedef6c8 100644
--- a/src/components/indicators/indicators.js
+++ b/src/components/indicators/indicators.js
@@ -90,7 +90,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
             }
 
             if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
-                return '<div class="playedIndicator indicator"><i class="md-icon indicatorIcon">&#xE5CA;</i></div>';
+                return '<div class="playedIndicator indicator"><i class="md-icon indicatorIcon">check</i></div>';
             }
         }
 
@@ -119,7 +119,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
         var status;
 
         if (item.Type === 'SeriesTimer') {
-            return '<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>';
+            return '<i class="md-icon timerIndicator indicatorIcon">fiber_smart_record</i>';
         } else if (item.TimerId || item.SeriesTimerId) {
             status = item.Status || 'Cancelled';
         } else if (item.Type === 'Timer') {
@@ -130,20 +130,20 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
 
         if (item.SeriesTimerId) {
             if (status !== 'Cancelled') {
-                return '<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>';
+                return '<i class="md-icon timerIndicator indicatorIcon">fiber_smart_record</i>';
             }
 
-            return '<i class="md-icon timerIndicator timerIndicator-inactive indicatorIcon">&#xE062;</i>';
+            return '<i class="md-icon timerIndicator timerIndicator-inactive indicatorIcon">fiber_smart_record</i>';
         }
 
-        return '<i class="md-icon timerIndicator indicatorIcon">&#xE061;</i>';
+        return '<i class="md-icon timerIndicator indicatorIcon">fiber_manual_record</i>';
     }
 
     function getSyncIndicator(item) {
         if (item.SyncPercent === 100) {
-            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon">&#xE2C4;</i></div>';
+            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon">file_download</i></div>';
         } else if (item.SyncPercent != null) {
-            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="md-icon indicatorIcon">&#xE2C4;</i></div>';
+            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="md-icon indicatorIcon">file_download</i></div>';
         }
 
         return '';
@@ -151,13 +151,13 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
 
     function getTypeIndicator(item) {
         if (item.Type === 'Video') {
-            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">&#xE04B;</i></div>';
+            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">videocam</i></div>';
         }
         if (item.Type === 'Folder' || item.Type === 'PhotoAlbum') {
-            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">&#xE2C7;</i></div>';
+            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">folder</i></div>';
         }
         if (item.Type === 'Photo') {
-            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">&#xE410;</i></div>';
+            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">photo</i></div>';
         }
 
         return '';
@@ -232,4 +232,4 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
         getTypeIndicator: getTypeIndicator,
         getMissingIndicator: getMissingIndicator
     };
-});
\ No newline at end of file
+});
diff --git a/src/components/itemMediaInfo/itemMediaInfo.template.html b/src/components/itemMediaInfo/itemMediaInfo.template.html
index 7e011b4cf4..a947a55d2e 100644
--- a/src/components/itemMediaInfo/itemMediaInfo.template.html
+++ b/src/components/itemMediaInfo/itemMediaInfo.template.html
@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderMediaInfo}
     </h3>
diff --git a/src/components/itemidentifier/itemidentifier.template.html b/src/components/itemidentifier/itemidentifier.template.html
index 9750bab57d..0081b543a4 100644
--- a/src/components/itemidentifier/itemidentifier.template.html
+++ b/src/components/itemidentifier/itemidentifier.template.html
@@ -1,6 +1,6 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="md-icon">&#xE5C4;</i>
+        <i class="md-icon">arrow_back</i>
     </button>
     <h3 class="formDialogHeaderTitle">
         ${Identify}
diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js
index 974cb0ab09..94535deb6f 100644
--- a/src/components/listview/listview.js
+++ b/src/components/listview/listview.js
@@ -262,9 +262,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             }
 
             if (!clickEntireItem && options.dragHandle) {
-                //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="md-icon">&#xE25D;</i></button>';
+                //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="md-icon">drag_handle</i></button>';
                 // Firefox and Edge are not allowing the button to be draggable
-                html += '<i class="listViewDragHandle md-icon listItemIcon listItemIcon-transparent">&#xE25D;</i>';
+                html += '<i class="listViewDragHandle md-icon listItemIcon listItemIcon-transparent">drag_handle</i>';
             }
 
             if (options.image !== false) {
@@ -298,7 +298,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
 
                 if (playOnImageClick) {
-                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="md-icon listItemImageButton-icon">&#xE037;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="md-icon listItemImageButton-icon">play_arrow</i></button>';
                 }
 
                 var progressHtml = indicators.getProgressBarHtml(item, {
@@ -427,7 +427,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             html += '<div class="' + cssClass + '">';
 
-            var moreIcon = '&#xE5D3;';
+            var moreIcon = 'more_horiz';
 
             html += getTextLinesHtml(textlines, isLargeStyle);
 
@@ -474,7 +474,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             if (!clickEntireItem) {
 
                 if (options.addToListButton) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="md-icon">&#xE03B;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="md-icon">playlist_add</i></button>';
                 }
 
                 if (options.moreButton !== false) {
@@ -482,7 +482,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
 
                 if (options.infoButton) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="md-icon">&#xE88F;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="md-icon">info_outline</i></button>';
                 }
 
                 if (options.rightButtons) {
@@ -497,11 +497,11 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                     var likes = userData.Likes == null ? '' : userData.Likes;
 
                     if (itemHelper.canMarkPlayed(item)) {
-                        html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon">&#xE5CA;</i></button>';
+                        html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon">check</i></button>';
                     }
 
                     if (itemHelper.canRate(item)) {
-                        html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">&#xE87D;</i></button>';
+                        html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">favorite</i></button>';
                     }
 
                     html += '</span>';
diff --git a/src/components/mediainfo/mediainfo.js b/src/components/mediainfo/mediainfo.js
index 0fb4a1e7be..04df34685d 100644
--- a/src/components/mediainfo/mediainfo.js
+++ b/src/components/mediainfo/mediainfo.js
@@ -6,7 +6,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         var status;
 
         if (item.Type === 'SeriesTimer') {
-            return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">&#xE062;</i>';
+            return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
         } else if (item.TimerId || item.SeriesTimerId) {
 
             status = item.Status || 'Cancelled';
@@ -20,13 +20,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         if (item.SeriesTimerId) {
 
             if (status !== 'Cancelled') {
-                return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">&#xE062;</i>';
+                return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
             }
 
-            return '<i class="md-icon mediaInfoItem mediaInfoIconItem">&#xE062;</i>';
+            return '<i class="md-icon mediaInfoItem mediaInfoIconItem">fiber_smart_record</i>';
         }
 
-        return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">&#xE061;</i>';
+        return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_manual_record</i>';
     }
 
     function getProgramInfoHtml(item, options) {
@@ -393,7 +393,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         if (rating) {
             html += '<div class="starRatingContainer mediaInfoItem">';
 
-            html += '<i class="md-icon starIcon">&#xE838;</i>';
+            html += '<i class="md-icon starIcon">star</i>';
             html += rating;
             html += '</div>';
         }
@@ -647,4 +647,4 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         getMediaInfoStats: getMediaInfoStats,
         getResolutionText: getResolutionText
     };
-});
\ No newline at end of file
+});
diff --git a/src/components/medialibrarycreator/medialibrarycreator.template.html b/src/components/medialibrarycreator/medialibrarycreator.template.html
index 76b37a8f52..c7073bc9f2 100644
--- a/src/components/medialibrarycreator/medialibrarycreator.template.html
+++ b/src/components/medialibrarycreator/medialibrarycreator.template.html
@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
 </div>
 
@@ -40,4 +40,4 @@
     <button is="emby-button" type="button" class="raised btnSubmit button-submit block formDialogFooterItem">
         <span>${ButtonOk}</span>
     </button>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/medialibraryeditor/medialibraryeditor.template.html b/src/components/medialibraryeditor/medialibraryeditor.template.html
index 40238bf06e..dd13df4ca5 100644
--- a/src/components/medialibraryeditor/medialibraryeditor.template.html
+++ b/src/components/medialibraryeditor/medialibraryeditor.template.html
@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle"></h3>
 </div>
 
@@ -34,4 +34,4 @@
     <button is="emby-button" type="button" class="raised btnSubmit button-submit block formDialogFooterItem">
         <span>${ButtonOk}</span>
     </button>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/metadataeditor/metadataeditor.template.html b/src/components/metadataeditor/metadataeditor.template.html
index bb6e0bbcbd..d44136c6b6 100644
--- a/src/components/metadataeditor/metadataeditor.template.html
+++ b/src/components/metadataeditor/metadataeditor.template.html
@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>
@@ -184,7 +184,7 @@
                     ${Genres}
                 </h2>
                 <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
                 <div class="paperList" id="listGenres"></div>
             </div>
@@ -193,7 +193,7 @@
                     ${People}
                 </h2>
                 <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
                 <div id="peopleList" class="paperList">
                 </div>
@@ -203,7 +203,7 @@
                     ${Studios}
                 </h2>
                 <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
                 <div class="paperList" id="listStudios"></div>
             </div>
@@ -212,7 +212,7 @@
                     ${Tags}
                 </h2>
                 <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">&#xE145;</i>
+                    <i class="md-icon">add</i>
                 </button>
                 <div class="paperList" id="listTags"></div>
             </div>
diff --git a/src/components/metadataeditor/personeditor.template.html b/src/components/metadataeditor/personeditor.template.html
index 6a808db1f4..75b011aa73 100644
--- a/src/components/metadataeditor/personeditor.template.html
+++ b/src/components/metadataeditor/personeditor.template.html
@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>
@@ -35,4 +35,4 @@
         </div>
 
     </form>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/multiselect/multiselect.js b/src/components/multiselect/multiselect.js
index 8a5858b770..6b2906cb0a 100644
--- a/src/components/multiselect/multiselect.js
+++ b/src/components/multiselect/multiselect.js
@@ -129,7 +129,7 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
             html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><i class="md-icon">close</i></button>';
             html += '<h1 class="itemSelectionCount"></h1>';
 
-            var moreIcon = "&#xE5D3;";
+            var moreIcon = "more_horiz";
             html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><i class="md-icon">' + moreIcon + '</i></button>';
 
             selectionCommandsPanel.innerHTML = html;
diff --git a/src/components/nowplayingbar/nowplayingbar.js b/src/components/nowplayingbar/nowplayingbar.js
index d7be482c52..37a1a32f56 100644
--- a/src/components/nowplayingbar/nowplayingbar.js
+++ b/src/components/nowplayingbar/nowplayingbar.js
@@ -42,31 +42,31 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         // The onclicks are needed due to the return false above
         html += '<div class="nowPlayingBarCenter">';
 
-        html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><i class="md-icon">&#xE045;</i></button>';
+        html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><i class="md-icon">skip_previous</i></button>';
 
-        html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">&#xE034;</i></button>';
+        html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">pause</i></button>';
 
         html += '<button is="paper-icon-button-light" class="stopButton mediaButton"><i class="md-icon">stop</i></button>';
-        html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><i class="md-icon">&#xE044;</i></button>';
+        html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><i class="md-icon">skip_next</i></button>';
 
         html += '<div class="nowPlayingBarCurrentTime"></div>';
         html += '</div>';
 
         html += '<div class="nowPlayingBarRight">';
 
-        html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><i class="md-icon">&#xE050;</i></button>';
+        html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><i class="md-icon">volume_up</i></button>';
 
         html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:9em;vertical-align:middle;display:inline-flex;">';
         html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarVolumeSlider"/>';
         html += '</div>';
 
-        html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><i class="md-icon">&#xE040;</i></button>';
+        html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><i class="md-icon">repeat</i></button>';
 
         html += '<div class="nowPlayingBarUserDataButtons">';
         html += '</div>';
 
-        html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">&#xE034;</i></button>';
-        html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><i class="md-icon">&#xE05F;</i></button>';
+        html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">pause</i></button>';
+        html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><i class="md-icon">playlist_play</i></button>';
 
         html += '</div>';
         html += '</div>';
@@ -400,9 +400,9 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         }
 
         if (isMuted) {
-            muteButton.querySelector('i').innerHTML = '&#xE04F;';
+            muteButton.querySelector('i').innerHTML = 'volume_off';
         } else {
-            muteButton.querySelector('i').innerHTML = '&#xE050;';
+            muteButton.querySelector('i').innerHTML = 'volume_up';
         }
 
         if (progressElement) {
@@ -571,7 +571,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
                     var userData = item.UserData || {};
                     var likes = userData.Likes == null ? '' : userData.Likes;
 
-                    nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">&#xE87D;</i></button>';
+                    nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">favorite</i></button>';
                 });
 
             }
diff --git a/src/components/playback/brightnessosd.js b/src/components/playback/brightnessosd.js
index c949743bec..b2bf9d4106 100644
--- a/src/components/playback/brightnessosd.js
+++ b/src/components/playback/brightnessosd.js
@@ -11,7 +11,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     function getOsdElementHtml() {
         var html = '';
 
-        html += '<i class="md-icon iconOsdIcon">&#xE1AC;</i>';
+        html += '<i class="md-icon iconOsdIcon">brightness_high</i>';
 
         html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner brightnessOsdProgressInner"></div></div>';
 
@@ -102,11 +102,11 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
 
         if (iconElement) {
             if (brightness >= 80) {
-                iconElement.innerHTML = '&#xE1AC;';
+                iconElement.innerHTML = 'brightness_high';
             } else if (brightness >= 20) {
-                iconElement.innerHTML = '&#xE1AE;';
+                iconElement.innerHTML = 'brightness_medium';
             } else {
-                iconElement.innerHTML = '&#xE1AD;';
+                iconElement.innerHTML = 'brightness_low';
             }
         }
         if (progressElement) {
@@ -161,4 +161,4 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
 
     bindToPlayer(playbackManager.getCurrentPlayer());
 
-});
\ No newline at end of file
+});
diff --git a/src/components/playback/playerSelectionMenu.js b/src/components/playback/playerSelectionMenu.js
index 7e4352bcb7..97e6e46230 100644
--- a/src/components/playback/playerSelectionMenu.js
+++ b/src/components/playback/playerSelectionMenu.js
@@ -63,17 +63,17 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
         switch (deviceType) {
 
             case 'smartphone':
-                return '&#xE32C;';
+                return 'smartphone';
             case 'tablet':
-                return '&#xE32F;';
+                return 'tablet';
             case 'tv':
-                return '&#xE333;';
+                return 'tv';
             case 'cast':
-                return '&#xE307;';
+                return 'cast';
             case 'desktop':
-                return '&#xE30A;';
+                return 'computer';
             default:
-                return '&#xE333;';
+                return 'tv';
         }
     }
 
@@ -317,4 +317,4 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
     return {
         show: showPlayerSelection
     };
-});
\ No newline at end of file
+});
diff --git a/src/components/playback/volumeosd.js b/src/components/playback/volumeosd.js
index c7a3438d54..b622cc18b1 100644
--- a/src/components/playback/volumeosd.js
+++ b/src/components/playback/volumeosd.js
@@ -11,7 +11,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     function getOsdElementHtml() {
         var html = '';
 
-        html += '<i class="md-icon iconOsdIcon">&#xE050;</i>';
+        html += '<i class="md-icon iconOsdIcon">volume_up</i>';
 
         html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner"></div></div>';
 
@@ -101,7 +101,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     function updatePlayerVolumeState(isMuted, volume) {
 
         if (iconElement) {
-            iconElement.innerHTML = isMuted ? '&#xE04F;' : '&#xE050;';
+            iconElement.innerHTML = isMuted ? 'volume_off' : 'volume_up';
         }
         if (progressElement) {
             progressElement.style.width = (volume || 0) + '%';
@@ -155,4 +155,4 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
 
     bindToPlayer(playbackManager.getCurrentPlayer());
 
-});
\ No newline at end of file
+});
diff --git a/src/components/playlisteditor/playlisteditor.js b/src/components/playlisteditor/playlisteditor.js
index 0379e56347..4738211a5e 100644
--- a/src/components/playlisteditor/playlisteditor.js
+++ b/src/components/playlisteditor/playlisteditor.js
@@ -258,7 +258,7 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
         var title = globalize.translate('HeaderAddToPlaylist');
 
         html += '<div class="formDialogHeader">';
-        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
         html += '<h3 class="formDialogHeaderTitle">';
         html += title;
         html += '</h3>';
@@ -295,4 +295,4 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
     };
 
     return PlaylistEditor;
-});
\ No newline at end of file
+});
diff --git a/src/components/prompt/prompt.template.html b/src/components/prompt/prompt.template.html
index 200c98b116..b1e7f580f0 100644
--- a/src/components/prompt/prompt.template.html
+++ b/src/components/prompt/prompt.template.html
@@ -1,6 +1,6 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="md-icon">&#xE5C4;</i>
+        <i class="md-icon">arrow_back</i>
     </button>
     <h3 class="formDialogHeaderTitle"></h3>
 </div>
@@ -22,4 +22,4 @@
 
         </form>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/recordingcreator/recordingbutton.js b/src/components/recordingcreator/recordingbutton.js
index f51f8f2766..a32803e107 100644
--- a/src/components/recordingcreator/recordingbutton.js
+++ b/src/components/recordingcreator/recordingbutton.js
@@ -30,7 +30,7 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
             this.refresh(options.itemId, options.serverId);
         }
         var button = options.button;
-        button.querySelector('i').innerHTML = '&#xE061;';
+        button.querySelector('i').innerHTML = 'fiber_manual_record';
 
         var clickFn = onRecordingButtonClick.bind(this);
         this.clickFn = clickFn;
@@ -45,7 +45,7 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
         var status;
 
         if (item.Type === 'SeriesTimer') {
-            return '&#xE062;';
+            return 'fiber_smart_record';
         } else if (item.TimerId || item.SeriesTimerId) {
 
             status = item.Status || 'Cancelled';
@@ -53,17 +53,17 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
 
             status = item.Status;
         } else {
-            return '&#xE061;';
+            return 'fiber_manual_record';
         }
 
         if (item.SeriesTimerId) {
 
             if (status !== 'Cancelled') {
-                return '&#xE062;';
+                return 'fiber_smart_record';
             }
         }
 
-        return '&#xE061;';
+        return 'fiber_manual_record';
     }
 
     RecordingButton.prototype.refresh = function (serverId, itemId) {
@@ -110,4 +110,4 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
     };
 
     return RecordingButton;
-});
\ No newline at end of file
+});
diff --git a/src/components/recordingcreator/recordingcreator.template.html b/src/components/recordingcreator/recordingcreator.template.html
index 386aa149cc..2a2840aecc 100644
--- a/src/components/recordingcreator/recordingcreator.template.html
+++ b/src/components/recordingcreator/recordingcreator.template.html
@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle"></h3>
 </div>
 <div class="formDialogContent smoothScrollY">
@@ -28,4 +28,4 @@
             </button>
         </div>
     </form>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/recordingcreator/recordingeditor.template.html b/src/components/recordingcreator/recordingeditor.template.html
index e36dda3f57..6b853704f3 100644
--- a/src/components/recordingcreator/recordingeditor.template.html
+++ b/src/components/recordingcreator/recordingeditor.template.html
@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderRecordingOptions}
     </h3>
@@ -43,4 +43,4 @@
 
         </form>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/recordingcreator/recordingfields.template.html b/src/components/recordingcreator/recordingfields.template.html
index 76ea5cee25..622b0d62e7 100644
--- a/src/components/recordingcreator/recordingfields.template.html
+++ b/src/components/recordingcreator/recordingfields.template.html
@@ -2,7 +2,7 @@
     <div class="recordSeriesContainer recordingFields-buttons flex align-items-center hide">
         <div>
             <button is="emby-button" type="button" class="raised recordingButton seriesRecordingButton">
-                <i class="md-icon recordingIcon">&#xE062;</i>
+                <i class="md-icon recordingIcon">fiber_smart_record</i>
                 <span class="buttonText">${RecordSeries}</span>
             </button>
         </div>
@@ -14,7 +14,7 @@
     <div class="recordingFields-buttons flex align-items-center">
         <div>
             <button is="emby-button" type="button" class="raised recordingButton singleRecordingButton">
-                <i class="md-icon recordingIcon">&#xE061;</i>
+                <i class="md-icon recordingIcon">fiber_manual_record</i>
                 <span class="buttonText">${Record}</span>
             </button>
         </div>
@@ -22,4 +22,4 @@
             <span class="manageButtonText">${Settings}</span>
         </button>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/recordingcreator/seriesrecordingeditor.template.html b/src/components/recordingcreator/seriesrecordingeditor.template.html
index 54133ebbbb..c2e8ebd0ed 100644
--- a/src/components/recordingcreator/seriesrecordingeditor.template.html
+++ b/src/components/recordingcreator/seriesrecordingeditor.template.html
@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderSeriesOptions}
     </h3>
@@ -75,4 +75,4 @@
 
         </form>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/refreshdialog/refreshdialog.js b/src/components/refreshdialog/refreshdialog.js
index 6650170960..30074b4d0b 100644
--- a/src/components/refreshdialog/refreshdialog.js
+++ b/src/components/refreshdialog/refreshdialog.js
@@ -123,7 +123,7 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager'
         var title = globalize.translate('RefreshMetadata');
 
         html += '<div class="formDialogHeader">';
-        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
         html += '<h3 class="formDialogHeaderTitle">';
         html += title;
         html += '</h3>';
@@ -172,4 +172,4 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager'
     };
 
     return RefreshDialog;
-});
\ No newline at end of file
+});
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index 562ea7ea35..59bb2c5cc4 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -135,7 +135,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
             apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
                 var userData = fullItem.UserData || {};
                 var likes = null == userData.Likes ? "" : userData.Likes;
-                context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="md-icon">&#xE87D;</i></button>';
+                context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="md-icon">favorite</i></button>';
             });
         } else {
             backdrop.clear();
@@ -291,10 +291,10 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
 
             if (isMuted) {
                 view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute"));
-                view.querySelector(".buttonMute i").innerHTML = "&#xE04F;";
+                view.querySelector(".buttonMute i").innerHTML = "volume_off";
             } else {
                 view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute"));
-                view.querySelector(".buttonMute i").innerHTML = "&#xE050;";
+                view.querySelector(".buttonMute i").innerHTML = "volume_up";
             }
 
             if (progressElement) {
@@ -361,7 +361,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                     action: "setplaylistindex",
                     enableUserDataButtons: false,
                     rightButtons: [{
-                        icon: "&#xE15D;",
+                        icon: "remove_circle_outline",
                         title: globalize.translate("ButtonRemove"),
                         id: "remove"
                     }],
diff --git a/src/components/search/searchfields.template.html b/src/components/search/searchfields.template.html
index cb6f11499a..bad808cb7e 100644
--- a/src/components/search/searchfields.template.html
+++ b/src/components/search/searchfields.template.html
@@ -1,7 +1,7 @@
 <div class="searchFieldsInner flex align-items-center justify-content-center">
-    <i class="searchfields-icon md-icon">&#xE8B6;</i>
+    <i class="searchfields-icon md-icon">search</i>
     <div class="inputContainer flex-grow" style="margin-bottom: 0;">
         <input is="emby-input" class="searchfields-txtSearch" type="text" data-keyboard="false" placeholder="${Search}" autocomplete="off" maxlength="40" autofocus />
     </div>
 </div>
-<div class="alphaPicker align-items-center hide"></div>
\ No newline at end of file
+<div class="alphaPicker align-items-center hide"></div>
diff --git a/src/components/sortmenu/sortmenu.js b/src/components/sortmenu/sortmenu.js
index da2fcdaa7c..d4f75a0806 100644
--- a/src/components/sortmenu/sortmenu.js
+++ b/src/components/sortmenu/sortmenu.js
@@ -66,7 +66,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                 var html = '';
 
                 html += '<div class="formDialogHeader">';
-                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
                 html += '<h3 class="formDialogHeaderTitle">${Sort}</h3>';
 
                 html += '</div>';
@@ -121,4 +121,4 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
     };
 
     return SortMenu;
-});
\ No newline at end of file
+});
diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js
index b79bf4ba1a..964aa81789 100644
--- a/src/components/subtitleeditor/subtitleeditor.js
+++ b/src/components/subtitleeditor/subtitleeditor.js
@@ -281,7 +281,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
             html += '</div>';
 
             if (!layoutManager.tv) {
-                html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnDownload listItemButton"><i class="md-icon">&#xE2C4;</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnDownload listItemButton"><i class="md-icon">file_download</i></button>';
             }
 
             html += '</' + tagName + '>';
diff --git a/src/components/subtitleeditor/subtitleeditor.template.html b/src/components/subtitleeditor/subtitleeditor.template.html
index 7891564449..dc8ae25701 100644
--- a/src/components/subtitleeditor/subtitleeditor.template.html
+++ b/src/components/subtitleeditor/subtitleeditor.template.html
@@ -1,8 +1,8 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <h3 class="formDialogHeaderTitle">${Subtitles}</h3>
 
-    <a is="emby-linkbutton" data-autohide="true" class="button-link btnHelp flex align-items-center" href="https://docs.jellyfin.org/general/server/media/subtitles.html" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="${Help}"><i class="md-icon">&#xE88E;</i><span style="margin-left:.25em;">${Help}</span></a>
+    <a is="emby-linkbutton" data-autohide="true" class="button-link btnHelp flex align-items-center" href="https://docs.jellyfin.org/general/server/media/subtitles.html" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="${Help}"><i class="md-icon">info</i><span style="margin-left:.25em;">${Help}</span></a>
 
 </div>
 <div class="formDialogContent smoothScrollY">
@@ -28,4 +28,4 @@
             ${NoSubtitleSearchResultsFound}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/tabbedview/itemstab.js b/src/components/tabbedview/itemstab.js
index 7381232fc9..33eddb6ec5 100644
--- a/src/components/tabbedview/itemstab.js
+++ b/src/components/tabbedview/itemstab.js
@@ -188,7 +188,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
             return;
         }
 
-        btnSortIcon.innerHTML = values.sortOrder === 'Descending' ? '&#xE5DB;' : '&#xE5D8;';
+        btnSortIcon.innerHTML = values.sortOrder === 'Descending' ? 'arrow_downward' : 'arrow_upward';
     }
 
     function bindAll(elems, eventName, fn) {
@@ -592,4 +592,4 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
     };
 
     return ItemsTab;
-});
\ No newline at end of file
+});
diff --git a/src/components/tunerpicker.js b/src/components/tunerpicker.js
index 96bfc71dff..3882f2e85a 100644
--- a/src/components/tunerpicker.js
+++ b/src/components/tunerpicker.js
@@ -128,7 +128,7 @@ define(["dialogHelper", "dom", "layoutManager", "connectionManager", "globalize"
             dlg.classList.add("formDialog");
             var html = "";
             html += '<div class="formDialogHeader">';
-            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
             html += '<h3 class="formDialogHeaderTitle">';
             html += globalize.translate("HeaderLiveTvTunerSetup");
             html += "</h3>";
diff --git a/src/components/userdatabuttons/emby-ratingbutton.js b/src/components/userdatabuttons/emby-ratingbutton.js
index 190424d44d..84ae780de5 100644
--- a/src/components/userdatabuttons/emby-ratingbutton.js
+++ b/src/components/userdatabuttons/emby-ratingbutton.js
@@ -62,7 +62,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
         if (isFavorite) {
 
             if (icon) {
-                icon.innerHTML = '&#xE87D;';
+                icon.innerHTML = 'favorite';
                 icon.classList.add('ratingbutton-icon-withrating');
             }
 
@@ -71,27 +71,27 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
         } else if (likes) {
 
             if (icon) {
-                icon.innerHTML = '&#xE87D;';
+                icon.innerHTML = 'favorite';
                 icon.classList.remove('ratingbutton-icon-withrating');
-                //icon.innerHTML = '&#xE8DC;';
+                //icon.innerHTML = 'thumb_up';
             }
             button.classList.remove('ratingbutton-withrating');
 
         } else if (likes === false) {
 
             if (icon) {
-                icon.innerHTML = '&#xE87D;';
+                icon.innerHTML = 'favorite';
                 icon.classList.remove('ratingbutton-icon-withrating');
-                //icon.innerHTML = '&#xE8DB;';
+                //icon.innerHTML = 'thumb_down';
             }
             button.classList.remove('ratingbutton-withrating');
 
         } else {
 
             if (icon) {
-                icon.innerHTML = '&#xE87D;';
+                icon.innerHTML = 'favorite';
                 icon.classList.remove('ratingbutton-icon-withrating');
-                //icon.innerHTML = '&#xE8DD;';
+                //icon.innerHTML = 'thumbs_up_down';
             }
             button.classList.remove('ratingbutton-withrating');
         }
@@ -199,4 +199,4 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby
         prototype: EmbyRatingButtonPrototype,
         extends: 'button'
     });
-});
\ No newline at end of file
+});
diff --git a/src/components/userdatabuttons/userdatabuttons.js b/src/components/userdatabuttons/userdatabuttons.js
index ea88565015..1c00e50caf 100644
--- a/src/components/userdatabuttons/userdatabuttons.js
+++ b/src/components/userdatabuttons/userdatabuttons.js
@@ -105,9 +105,9 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
 
             if (itemHelper.canMarkPlayed(item)) {
                 if (userData.Played) {
-                    html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass + ' btnUserDataOn', iconCssClass, '&#xE5CA;', tooltipPlayed, style);
+                    html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass + ' btnUserDataOn', iconCssClass, 'check', tooltipPlayed, style);
                 } else {
-                    html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass, iconCssClass, '&#xE5CA;', tooltipPlayed, style);
+                    html += getUserDataButtonHtml('markPlayed', itemId, serverId, btnCssClass, iconCssClass, 'check', tooltipPlayed, style);
                 }
             }
         }
@@ -131,9 +131,9 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
         var tooltipFavorite = globalize.translate('Favorite');
         if (userData.IsFavorite) {
 
-            html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData btnUserDataOn', iconCssClass, '&#xE87D;', tooltipFavorite, style);
+            html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData btnUserDataOn', iconCssClass, 'favorite', tooltipFavorite, style);
         } else {
-            html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData', iconCssClass, '&#xE87D;', tooltipFavorite, style);
+            html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData', iconCssClass, 'favorite', tooltipFavorite, style);
         }
 
         return html;
@@ -248,4 +248,4 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
         getIconsHtml: getIconsHtml
     };
 
-});
\ No newline at end of file
+});
diff --git a/src/components/viewsettings/viewsettings.js b/src/components/viewsettings/viewsettings.js
index 5195598d99..e3c75c6293 100644
--- a/src/components/viewsettings/viewsettings.js
+++ b/src/components/viewsettings/viewsettings.js
@@ -77,7 +77,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
                 var html = '';
 
                 html += '<div class="formDialogHeader">';
-                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
+                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
                 html += '<h3 class="formDialogHeaderTitle">${Settings}</h3>';
 
                 html += '</div>';
@@ -143,4 +143,4 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
     };
 
     return ViewSettings;
-});
\ No newline at end of file
+});
diff --git a/src/controllers/availableplugins.js b/src/controllers/availableplugins.js
index 62131456da..1679fec5e7 100644
--- a/src/controllers/availableplugins.js
+++ b/src/controllers/availableplugins.js
@@ -103,7 +103,7 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-button", "emby
             html += '<div class="cardImage coveredImage" style="background-image:url(\'' + plugin.thumbImage + "');\">";
             html += "</div>";
         } else {
-            html += '<i class="cardImageIcon md-icon">&#xE2C7;</i>';
+            html += '<i class="cardImageIcon md-icon">folder</i>';
         }
 
         html += "</a>";
diff --git a/src/controllers/dashboardpage.js b/src/controllers/dashboardpage.js
index 231e398620..699c80c80a 100644
--- a/src/controllers/dashboardpage.js
+++ b/src/controllers/dashboardpage.js
@@ -303,12 +303,12 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
                 html += '<div class="sessionCardButtons flex align-items-center justify-content-center">';
                 var btnCssClass;
                 btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== connectionManager.deviceId() ? "" : " hide";
-                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><i class="md-icon">&#xE034;</i></button>';
-                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionStop paper-icon-button-light ' + btnCssClass + '"><i class="md-icon">&#xE047;</i></button>';
+                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><i class="md-icon">pause</i></button>';
+                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionStop paper-icon-button-light ' + btnCssClass + '"><i class="md-icon">stop</i></button>';
                 btnCssClass = session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length ? "" : " hide";
-                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionInfo paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("ViewPlaybackInfo") + '"><i class="md-icon">&#xE88E;</i></button>';
+                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionInfo paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("ViewPlaybackInfo") + '"><i class="md-icon">info</i></button>';
                 btnCssClass = session.ServerId && -1 !== session.SupportedCommands.indexOf("DisplayMessage") && session.DeviceId !== connectionManager.deviceId() ? "" : " hide";
-                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionSendMessage paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("SendMessage") + '"><i class="md-icon">&#xE0C9;</i></button>';
+                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionSendMessage paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("SendMessage") + '"><i class="md-icon">message</i></button>';
                 html += "</div>";
                 html += '<div class="sessionNowPlayingStreamInfo" style="padding:.5em 0 1em;">';
                 html += DashboardPage.getSessionNowPlayingStreamInfo(session);
@@ -564,9 +564,9 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             }
 
             if (session.PlayState && session.PlayState.IsPaused) {
-                btnSessionPlayPause.querySelector("i").innerHTML = "&#xE037;";
+                btnSessionPlayPause.querySelector("i").innerHTML = "play_arrow";
             } else {
-                btnSessionPlayPause.querySelector("i").innerHTML = "&#xE034;";
+                btnSessionPlayPause.querySelector("i").innerHTML = "pause";
             }
 
             row.querySelector(".sessionNowPlayingStreamInfo").innerHTML = DashboardPage.getSessionNowPlayingStreamInfo(session);
diff --git a/src/controllers/devices.js b/src/controllers/devices.js
index 2ab64a53b5..897282a0ef 100644
--- a/src/controllers/devices.js
+++ b/src/controllers/devices.js
@@ -89,7 +89,7 @@ define(["loading", "dom", "libraryMenu", "globalize", "scripts/imagehelper", "hu
 
             if (canEdit || canDelete(device.Id)) {
                 deviceHtml += '<div style="text-align:right; float:right;padding-top:5px;">';
-                deviceHtml += '<button type="button" is="paper-icon-button-light" data-id="' + device.Id + '" title="' + globalize.translate("Menu") + '" class="btnDeviceMenu"><i class="md-icon">&#xE5D3;</i></button>';
+                deviceHtml += '<button type="button" is="paper-icon-button-light" data-id="' + device.Id + '" title="' + globalize.translate("Menu") + '" class="btnDeviceMenu"><i class="md-icon">more_horiz</i></button>';
                 deviceHtml += "</div>";
             }
 
diff --git a/src/controllers/favorites.js b/src/controllers/favorites.js
index 25ca59da97..0bfe3c4550 100644
--- a/src/controllers/favorites.js
+++ b/src/controllers/favorites.js
@@ -177,7 +177,7 @@ define(["appRouter", "cardBuilder", "dom", "globalize", "connectionManager", "ap
             var leadingButtons = layoutManager.tv ? [{
                 name: globalize.translate("All"),
                 id: "more",
-                icon: "&#xE87D;",
+                icon: "favorite",
                 routeUrl: getRouteUrl(section, serverId)
             }] : null;
             var lines = 0;
@@ -248,7 +248,7 @@ define(["appRouter", "cardBuilder", "dom", "globalize", "connectionManager", "ap
                 html += '<h2 class="sectionTitle sectionTitle-cards">';
                 html += globalize.translate(section.name);
                 html += "</h2>";
-                html += '<i class="md-icon">&#xE5CC;</i>';
+                html += '<i class="md-icon">chevron_right</i>';
                 html += "</a>";
             }
 
diff --git a/src/controllers/installedplugins.js b/src/controllers/installedplugins.js
index 86ac813de2..c18673738e 100644
--- a/src/controllers/installedplugins.js
+++ b/src/controllers/installedplugins.js
@@ -47,7 +47,7 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
             html += '<div class="cardImage coveredImage" style="background-image:url(\'' + plugin.ImageUrl + "');\">";
             html += "</div>";
         } else {
-            html += '<i class="cardImageIcon md-icon">&#xE2C7;</i>';
+            html += '<i class="cardImageIcon md-icon">folder</i>';
         }
 
         html += configPageUrl ? "</a>" : "</div>";
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index 3f8dc59b7f..e086ace309 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -1733,7 +1733,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         html += '<h2 class="sectionTitle sectionTitle-cards">';
         html += "<span>" + type.name + "</span>";
         html += "</h2>";
-        html += '<button class="btnAddToCollection sectionTitleButton" type="button" is="paper-icon-button-light" style="margin-left:1em;"><i class="md-icon" icon="add">&#xE145;</i></button>';
+        html += '<button class="btnAddToCollection sectionTitleButton" type="button" is="paper-icon-button-light" style="margin-left:1em;"><i class="md-icon" icon="add">add</i></button>';
         html += "</div>";
         html += '<div is="emby-itemscontainer" class="itemsContainer collectionItemsContainer vertical-wrap padded-left padded-right">';
         var shape = "MusicAlbum" == type.type ? getSquareShape(false) : getPortraitShape(false);
@@ -2069,7 +2069,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         bindAll(view, ".btnCancelTimer", "click", onCancelTimerClick);
         bindAll(view, ".btnDeleteItem", "click", onDeleteClick);
         bindAll(view, ".btnDownload", "click", onDownloadClick);
-        view.querySelector(".btnMoreCommands i").innerHTML = "&#xE5D3;";
+        view.querySelector(".btnMoreCommands i").innerHTML = "more_horiz";
         view.querySelector(".trackSelections").addEventListener("submit", onTrackSelectionsSubmit);
         view.querySelector(".btnSplitVersions").addEventListener("click", function () {
             splitVersions(self, view, apiClient, params);
diff --git a/src/controllers/list.js b/src/controllers/list.js
index d15ebd2444..a554bec611 100644
--- a/src/controllers/list.js
+++ b/src/controllers/list.js
@@ -175,7 +175,7 @@ define(["globalize", "listView", "layoutManager", "userSettings", "focusManager"
             var btnSortIcon = instance.btnSortIcon;
 
             if (btnSortIcon) {
-                btnSortIcon.innerHTML = "Descending" === values.sortOrder ? "&#xE5DB;" : "&#xE5D8;";
+                btnSortIcon.innerHTML = "Descending" === values.sortOrder ? "arrow_downward" : "arrow_upward";
             }
         }
     }
diff --git a/src/controllers/medialibrarypage.js b/src/controllers/medialibrarypage.js
index 4da64641ef..543acf31da 100644
--- a/src/controllers/medialibrarypage.js
+++ b/src/controllers/medialibrarypage.js
@@ -297,7 +297,7 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
 
         if (virtualFolder.showMenu !== false) {
             html += '<div style="text-align:right; float:right;padding-top:5px;">';
-            html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><i class="md-icon">&#xE5D3;</i></button>';
+            html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><i class="md-icon">more_horiz</i></button>';
             html += "</div>";
         }
 
diff --git a/src/controllers/movies/moviegenres.js b/src/controllers/movies/moviegenres.js
index 80197b01cc..e51274d254 100644
--- a/src/controllers/movies/moviegenres.js
+++ b/src/controllers/movies/moviegenres.js
@@ -142,7 +142,7 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += item.Name;
                     html += "</h2>";
-                    html += '<i class="md-icon hide">&#xE5CC;</i>';
+                    html += '<i class="md-icon hide">chevron_right</i>';
                     html += "</a>";
                     html += "</div>";
                     if (enableScrollX()) {
diff --git a/src/controllers/selectserver.js b/src/controllers/selectserver.js
index 255f685572..b0ee5673e0 100644
--- a/src/controllers/selectserver.js
+++ b/src/controllers/selectserver.js
@@ -8,7 +8,7 @@ define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focu
             return {
                 name: server.Name,
                 showIcon: true,
-                icon: "&#xE307;",
+                icon: "cast",
                 cardType: "",
                 id: server.Id,
                 server: server
diff --git a/src/controllers/shows/tvgenres.js b/src/controllers/shows/tvgenres.js
index 956b8fa6fa..b6fa54f213 100644
--- a/src/controllers/shows/tvgenres.js
+++ b/src/controllers/shows/tvgenres.js
@@ -141,7 +141,7 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += item.Name;
                     html += "</h2>";
-                    html += '<i class="md-icon hide">&#xE5CC;</i>';
+                    html += '<i class="md-icon hide">chevron_right</i>';
                     html += "</a>";
                     html += "</div>";
                     if (enableScrollX()) {
diff --git a/src/controllers/userprofilespage.js b/src/controllers/userprofilespage.js
index 0e9a79a8b2..7aeea9cb28 100644
--- a/src/controllers/userprofilespage.js
+++ b/src/controllers/userprofilespage.js
@@ -181,7 +181,7 @@ define(["loading", "dom", "globalize", "humanedate", "paper-icon-button-light",
             html += '<div class="cardImage" style="background-image:url(\'' + user.ImageUrl + "');\">";
             html += "</div>";
         } else {
-            html += '<i class="cardImageIcon md-icon">&#xE7FD;</i>';
+            html += '<i class="cardImageIcon md-icon">person</i>';
         }
 
         html += "</a>";
diff --git a/src/controllers/videoosd.js b/src/controllers/videoosd.js
index 2dcb0db82e..23b643aa77 100644
--- a/src/controllers/videoosd.js
+++ b/src/controllers/videoosd.js
@@ -532,10 +532,10 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
         function updateFullscreenIcon() {
             if (playbackManager.isFullscreen(currentPlayer)) {
                 view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("ExitFullscreen"));
-                view.querySelector(".btnFullscreen i").innerHTML = "&#xE5D1;";
+                view.querySelector(".btnFullscreen i").innerHTML = "fullscreen_exit";
             } else {
                 view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("Fullscreen") + " (f)");
-                view.querySelector(".btnFullscreen i").innerHTML = "&#xE5D0;";
+                view.querySelector(".btnFullscreen i").innerHTML = "fullscreen";
             }
         }
 
@@ -734,10 +734,10 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
         function updatePlayPauseState(isPaused) {
             var button = view.querySelector(".btnPause i");
             if (isPaused) {
-                button.innerHTML = "&#xE037;";
+                button.innerHTML = "play_arrow";
                 button.setAttribute("title", globalize.translate("ButtonPlay") + " (k)");
             } else {
-                button.innerHTML = "&#xE034;";
+                button.innerHTML = "pause";
                 button.setAttribute("title", globalize.translate("ButtonPause") + " (k)");
             }
         }
@@ -867,10 +867,10 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
 
             if (isMuted) {
                 view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute") + " (m)");
-                view.querySelector(".buttonMute i").innerHTML = "&#xE04F;";
+                view.querySelector(".buttonMute i").innerHTML = "volume_off";
             } else {
                 view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute") + " (m)");
-                view.querySelector(".buttonMute i").innerHTML = "&#xE050;";
+                view.querySelector(".buttonMute i").innerHTML = "volume_up";
             }
 
             if (progressElement) {
diff --git a/src/dashboard.html b/src/dashboard.html
index 67d269db3d..43a081f8db 100644
--- a/src/dashboard.html
+++ b/src/dashboard.html
@@ -5,7 +5,7 @@
                 <div class="dashboardSection" style="padding-left: 0;">
                     <a is="emby-linkbutton" href="dashboardgeneral.html" class="button-flat sectionTitleTextButton">
                         <h3>${TabServer}</h3>
-                        <i class="md-icon">&#xE5CC;</i>
+                        <i class="md-icon">chevron_right</i>
                     </a>
 
                     <div class="paperList" style="padding: 1em;">
@@ -34,7 +34,7 @@
                 <div class="dashboardSection" style="padding-left: 0;">
                     <a is="emby-linkbutton" href="devices.html" class="button-flat sectionTitleTextButton">
                         <h3>${HeaderActiveDevices}</h3>
-                        <i class="md-icon">&#xE5CC;</i>
+                        <i class="md-icon">chevron_right</i>
                     </a>
                     <div class="activeDevices itemsContainer vertical-wrap">
                     </div>
@@ -45,7 +45,7 @@
                 <div class="dashboardSection">
                     <a is="emby-linkbutton" href="serveractivity.html?useractivity=true" class="button-flat sectionTitleTextButton">
                         <h3>${HeaderActivity}</h3>
-                        <i class="md-icon">&#xE5CC;</i>
+                        <i class="md-icon">chevron_right</i>
                     </a>
                     <div class="paperList userActivityItems" data-activitylimit="7" data-useractivity="true">
                     </div>
@@ -62,7 +62,7 @@
                 <div class="dashboardSection serverActivitySection hide activityContainer">
                     <a is="emby-linkbutton" href="serveractivity.html?useractivity=false" class="button-flat sectionTitleTextButton">
                         <h3>${Alerts}</h3>
-                        <i class="md-icon">&#xE5CC;</i>
+                        <i class="md-icon">chevron_right</i>
                     </a>
                     <div class="paperList serverActivityItems" data-activitylimit="4" data-useractivity="false">
                     </div>
@@ -71,7 +71,7 @@
                 <div class="dashboardSection">
                     <a is="emby-linkbutton" href="dashboardgeneral.html" class="button-flat sectionTitleTextButton">
                         <h3>${HeaderPaths}</h3>
-                        <i class="md-icon">&#xE5CC;</i>
+                        <i class="md-icon">chevron_right</i>
                     </a>
                     <div class="paperList">
                         <div class="listItem listItem-border">
diff --git a/src/dlnaprofile.html b/src/dlnaprofile.html
index 3c2ff16707..2054bce3db 100644
--- a/src/dlnaprofile.html
+++ b/src/dlnaprofile.html
@@ -98,7 +98,7 @@
                             <div>
                                 <h2 style="vertical-align:middle;display:inline-block;">${HeaderHttpHeaders}</h2>
                                 <button is="emby-button" type="button" class="fab btnAddIdentificationHttpHeader submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAdd}">
-                                    <i class="md-icon">&#xE145;</i>
+                                    <i class="md-icon">add</i>
                                 </button>
                             </div>
                             <div class="httpHeaderIdentificationList"></div>
@@ -221,7 +221,7 @@
                             <div>
                                 <h2 style="vertical-align:middle;display:inline-block;">${HeaderXmlDocumentAttributes}</h2>
                                 <button is="emby-button" type="button" class="fab btnAddXmlDocumentAttribute submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAdd}">
-                                    <i class="md-icon">&#xE145;</i>
+                                    <i class="md-icon">add</i>
                                 </button>
                             </div>
                             <div class="xmlDocumentAttributeList"></div>
diff --git a/src/dlnaprofiles.html b/src/dlnaprofiles.html
index ef1c353d46..ac9e961370 100644
--- a/src/dlnaprofiles.html
+++ b/src/dlnaprofiles.html
@@ -9,7 +9,7 @@
                     <div class="sectionTitleContainer flex align-items-center">
                         <h2 class="sectionTitle">${HeaderCustomDlnaProfiles}</h2>
                         <a is="emby-linkbutton" href="dlnaprofile.html" class="fab submit" style="margin:0 0 0 1em">
-                            <i class="md-icon">&#xE145;</i>
+                            <i class="md-icon">add</i>
                         </a>
                         <a style="margin-left:2em!important;" is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Dlna-profiles">${Help}</a>
                     </div>
@@ -30,4 +30,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/itemdetails.html b/src/itemdetails.html
index 7025a7ff37..2a29cce96b 100644
--- a/src/itemdetails.html
+++ b/src/itemdetails.html
@@ -12,7 +12,7 @@
     <div id="itemBackdrop" class="itemBackdrop noBackdrop">
         <div class="itemBackdropFader">
         </div>
-        <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume"><i class="md-icon">&#xE037;</i></button>
+        <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume"><i class="md-icon">play_arrow</i></button>
     </div>
 
     <div class="detailLogo"></div>
@@ -77,7 +77,7 @@
 
                         <button is="emby-button" type="button" class="button-flat btnDownload hide detailButton-mobile">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">&#xe884;</i>
+                                <i class="md-icon detailButton-mobile-icon">get_app</i>
                                 <div class="detailButton-mobile-text">${ButtonDownload}</div>
                             </div>
                         </button>
@@ -88,7 +88,7 @@
 
                         <button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton-mobile">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">&#xE8DA;</i>
+                                <i class="md-icon detailButton-mobile-icon">theaters</i>
                                 <div class="detailButton-mobile-text">${ButtonTrailer}</div>
                             </div>
                         </button>
@@ -99,7 +99,7 @@
 
                         <button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton-mobile">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">&#xE043;</i>
+                                <i class="md-icon detailButton-mobile-icon">shuffle</i>
                                 <div class="detailButton-mobile-text">${HeaderInstantMix}</div>
                             </div>
                         </button>
@@ -110,7 +110,7 @@
 
                         <button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton-mobile">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">&#xE043;</i>
+                                <i class="md-icon detailButton-mobile-icon">shuffle</i>
                                 <div class="detailButton-mobile-text">${ButtonShuffle}</div>
                             </div>
                         </button>
@@ -121,7 +121,7 @@
 
                         <button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton-mobile">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">&#xE872;</i>
+                                <i class="md-icon detailButton-mobile-icon">delete</i>
                                 <div class="detailButton-mobile-text">${CancelSeries}</div>
                             </div>
                         </button>
@@ -132,7 +132,7 @@
 
                         <button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton-mobile">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">&#xE047;</i>
+                                <i class="md-icon detailButton-mobile-icon">stop</i>
                                 <div class="detailButton-mobile-text">${StopRecording}</div>
                             </div>
                         </button>
@@ -143,39 +143,39 @@
 
                         <button is="emby-button" type="button" class="button-flat btnDeleteItem hide detailButton-mobile">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">&#xE872;</i>
+                                <i class="md-icon detailButton-mobile-icon">delete</i>
                                 <div class="detailButton-mobile-text">${Delete}</div>
                             </div>
                         </button>
 
                         <button is="emby-button" type="button" class="fab btnDeleteItem hide detailButton">
-                            <i class="md-icon">&#xE872;</i>
+                            <i class="md-icon">delete</i>
                         </button>
 
                         <button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton-mobile">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">&#xE5CA;</i>
+                                <i class="md-icon detailButton-mobile-icon">check</i>
                                 <div class="detailButton-mobile-text button-text"></div>
                             </div>
                         </button>
 
                         <button is="emby-playstatebutton" type="button" class="fab btnPlaystate hide detailButton">
-                            <i class="md-icon">&#xE5CA;</i>
+                            <i class="md-icon">check</i>
                         </button>
 
                         <button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton-mobile">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">&#xE87D;</i>
+                                <i class="md-icon detailButton-mobile-icon">favorite</i>
                                 <div class="detailButton-mobile-text button-text">${Rate}</div>
                             </div>
                         </button>
 
                         <button is="emby-ratingbutton" type="button" class="fab btnUserRating hide detailButton">
-                            <i class="md-icon">&#xE87D;</i>
+                            <i class="md-icon">favorite</i>
                         </button>
 
                         <button is="emby-button" type="button" class="fab btnSplitVersions hide  detailButton">
-                            <i class="md-icon">&#xe0b6;</i>
+                            <i class="md-icon">call_split</i>
                         </button>
 
                         <button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton-mobile">
@@ -186,7 +186,7 @@
                         </button>
 
                         <button is="emby-button" type="button" class="fab btnMoreCommands hide detailButton">
-                            <i class="md-icon">&#xE5D3;</i>
+                            <i class="md-icon">more_horiz</i>
                         </button>
                     </div>
 
diff --git a/src/list.html b/src/list.html
index 5161704249..e31efa27e6 100644
--- a/src/list.html
+++ b/src/list.html
@@ -7,48 +7,48 @@
                 <span>${HeaderPlayAll}</span>
             </button>
             <button is="paper-icon-button-light" class="btnPlay listIconButton-autohide">
-                <i class="md-icon">&#xE037;</i>
+                <i class="md-icon">play_arrow</i>
             </button>
             <button is="emby-button" class="btnQueue button-flat hide listTextButton-autohide">
                 <span>${Queue}</span>
             </button>
             <button is="paper-icon-button-light" class="btnQueue hide listIconButton-autohide">
-                <i class="md-icon">&#xE03B;</i>
+                <i class="md-icon">playlist_add</i>
             </button>
             <button is="emby-button" class="btnShuffle button-flat hide listTextButton-autohide">
                 <span>${Shuffle}</span>
             </button>
             <button is="paper-icon-button-light" class="btnShuffle hide listIconButton-autohide">
-                <i class="md-icon">&#xE043;</i>
+                <i class="md-icon">shuffle</i>
             </button>
             <button is="emby-button" class="btnNewItem hide button-flat listTextButton-autohide">
                 <span>${New}</span>
             </button>
             <button is="paper-icon-button-light" class="btnNewItem hide listIconButton-autohide">
-                <i class="md-icon">&#xE145;</i>
+                <i class="md-icon">add</i>
             </button>
 
             <button is="emby-button" class="btnSort hide button-flat listTextButton-autohide">
                 <span class="btnSortText"></span>
-                <i class="md-icon btnSortIcon">&#xE5D8;</i>
+                <i class="md-icon btnSortIcon">arrow_upward</i>
             </button>
             <button is="paper-icon-button-light" class="btnSort hide listIconButton-autohide">
-                <i class="md-icon">&#xE164;</i>
+                <i class="md-icon">sort</i>
             </button>
             <button is="emby-button" class="btnFilter button-flat listTextButton-autohide">
                 <span>${Filter}</span>
             </button>
             <button is="paper-icon-button-light" class="btnFilter listIconButton-autohide" data-ripple="false" style="overflow:visible;">
-                <i class="md-icon">&#xE152;</i>
+                <i class="md-icon">filter_list</i>
             </button>
             <button is="emby-button" class="btnViewSettings button-flat listTextButton-autohide">
-                <i class="md-icon">&#xE5D3;</i>
+                <i class="md-icon">more_horiz</i>
             </button>
             <button is="paper-icon-button-light" class="btnViewSettings listIconButton-autohide">
-                <i class="md-icon">&#xE5D3;</i>
+                <i class="md-icon">more_horiz</i>
             </button>
         </div>
         <div is="emby-itemscontainer" class="vertical-wrap itemsContainer centered" style="padding: 0 0 10vh 0;">
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/livetv.html b/src/livetv.html
index 2bc99b2b80..2ff8990e4a 100644
--- a/src/livetv.html
+++ b/src/livetv.html
@@ -7,7 +7,7 @@
                 <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
                     <a href="list.html?type=Programs&IsAiring=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
                         <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderOnNow}</h2>
-                        <i class="md-icon">&#xE5CC;</i>
+                        <i class="md-icon">chevron_right</i>
                     </a>
                 </div>
                 <div is="emby-itemscontainer" class="activeProgramItems itemsContainer padded-left padded-right"></div>
@@ -16,7 +16,7 @@
                 <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
                     <a href="list.html?type=Programs&IsSeries=true&IsMovie=false&IsNews=false" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
                         <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${TabShows}</h2>
-                        <i class="md-icon">&#xE5CC;</i>
+                        <i class="md-icon">chevron_right</i>
                     </a>
                 </div>
                 <div is="emby-itemscontainer" class="upcomingEpisodeItems itemsContainer padded-left padded-right"></div>
@@ -25,7 +25,7 @@
                 <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
                     <a href="list.html?type=Programs&IsMovie=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
                         <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderMovies}</h2>
-                        <i class="md-icon">&#xE5CC;</i>
+                        <i class="md-icon">chevron_right</i>
                     </a>
                 </div>
                 <div is="emby-itemscontainer" class="upcomingTvMovieItems itemsContainer padded-left padded-right"></div>
@@ -34,7 +34,7 @@
                 <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
                     <a href="list.html?type=Programs&IsSports=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
                         <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${Sports}</h2>
-                        <i class="md-icon">&#xE5CC;</i>
+                        <i class="md-icon">chevron_right</i>
                     </a>
                 </div>
                 <div is="emby-itemscontainer" class="upcomingSportsItems itemsContainer padded-left padded-right"></div>
@@ -43,7 +43,7 @@
                 <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
                     <a href="list.html?type=Programs&IsKids=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
                         <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderForKids}</h2>
-                        <i class="md-icon">&#xE5CC;</i>
+                        <i class="md-icon">chevron_right</i>
                     </a>
                 </div>
                 <div is="emby-itemscontainer" class="upcomingKidsItems itemsContainer padded-left padded-right"></div>
@@ -52,7 +52,7 @@
                 <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
                     <a href="list.html?type=Programs&IsNews=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
                         <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${News}</h2>
-                        <i class="md-icon">&#xE5CC;</i>
+                        <i class="md-icon">chevron_right</i>
                     </a>
                 </div>
                 <div is="emby-itemscontainer" class="upcomingNewsItems itemsContainer padded-left padded-right"></div>
@@ -72,7 +72,7 @@
                 <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
                     <button type="button" is="emby-button" class="button-flat button-flat-mini sectionTitleTextButton more" data-type="latest">
                         <h2 class="sectionTitle sectionTitle-cards">${HeaderLatestRecordings}</h2>
-                        <i class="md-icon">&#xE5CC;</i>
+                        <i class="md-icon">chevron_right</i>
                     </button>
                 </div>
                 <div is="emby-itemscontainer" class="recordingItems itemsContainer padded-left padded-right"></div>
@@ -94,4 +94,4 @@
         </div>
     </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/livetvstatus.html b/src/livetvstatus.html
index 9c2c8d2c9a..3abd14de34 100644
--- a/src/livetvstatus.html
+++ b/src/livetvstatus.html
@@ -8,7 +8,7 @@
                             <span>${HeaderTunerDevices}</span>
                         </h2>
                         <button is="emby-button" type="button" class="fab btnAddDevice submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAdd}">
-                            <i class="md-icon">&#xE145;</i>
+                            <i class="md-icon">add</i>
                         </button>
                         <a style="margin-left:2em!important;" is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/live-tv/index.html">${Help}</a>
                     </div>
@@ -21,7 +21,7 @@
                     <div class="sectionTitleContainer">
                         <h2 class="sectionTitle">${HeaderGuideProviders}</h2>
                         <button is="emby-button" type="button" class="fab btnAddProvider submit" style="margin-left:1em;" title="${ButtonAdd}">
-                            <i class="md-icon">&#xE145;</i>
+                            <i class="md-icon">add</i>
                         </button>
                     </div>
 
@@ -38,4 +38,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/music.html b/src/music.html
index d7082e04c4..e86f179208 100644
--- a/src/music.html
+++ b/src/music.html
@@ -37,8 +37,8 @@
     <div class="pageTabContent pageTabContent" id="albumsTab" data-index="1">
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
             <div class="paging"></div>
-            <button is="paper-icon-button-light" class="btnPlayAll musicglobalButton" title="${HeaderPlayAll}"><i class="md-icon">&#xE037;</i></button>
-            <button is="paper-icon-button-light" class="btnShuffle musicglobalButton" title="${ButtonShuffle}"><i class="md-icon">&#xE043;</i></button>
+            <button is="paper-icon-button-light" class="btnPlayAll musicglobalButton" title="${HeaderPlayAll}"><i class="md-icon">play_arrow</i></button>
+            <button is="paper-icon-button-light" class="btnShuffle musicglobalButton" title="${ButtonShuffle}"><i class="md-icon">shuffle</i></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>
@@ -107,4 +107,4 @@
     </div>
     <div class="pageTabContent" data-index="7">
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/nowplaying.html b/src/nowplaying.html
index fa8ade166f..6be865d152 100644
--- a/src/nowplaying.html
+++ b/src/nowplaying.html
@@ -19,7 +19,7 @@
                     </button>
 
                     <button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
-                        <i class="md-icon">&#xE020;</i>
+                        <i class="md-icon">fast_rewind</i>
                     </button>
 
                     <button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize" title="${ButtonPause}">
@@ -31,7 +31,7 @@
                     </button>
 
                     <button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}">
-                        <i class="md-icon">&#xE01F;</i>
+                        <i class="md-icon">fast_forward</i>
                     </button>
 
                     <button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
@@ -65,7 +65,7 @@
                         </button>
 
                         <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute}">
-                            <i class="xlargePaperIconButton md-icon">&#xE050;</i>
+                            <i class="xlargePaperIconButton md-icon">volume_up</i>
                         </button>
                         <div class="sliderContainer nowPlayingVolumeSliderContainer">
                             <input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider" />
@@ -101,7 +101,7 @@
             </div>
             <div>
                 <button is="paper-icon-button-light" class="btnBack btnCommand autoSize" title="${ButtonBack}" data-command="Back">
-                    <i class="md-icon">&#xE5C4;</i>
+                    <i class="md-icon">arrow_back</i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnInfo btnCommand autoSize" title="${ButtonInfo}" data-command="ToggleContextMenu">
@@ -162,7 +162,7 @@
             <div style="display: flex; align-items: center;margin:2em 0 1em">
                 <h2 style="margin:0;">${TabPlaylist}</h2>
                 <button is="paper-icon-button-light" class="btnSavePlaylist" title="${ButtonSave}" style="margin-left:1em;">
-                    <i class="md-icon">&#xE161;</i>
+                    <i class="md-icon">save</i>
                 </button>
             </div>
             <div class="playlist itemsContainer vertical-list" is="emby-itemscontainer" data-dragreorder="true">
@@ -173,4 +173,4 @@
         <br />
         <br />
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/scheduledtask.html b/src/scheduledtask.html
index 9aebd9b55d..ee2a2c3420 100644
--- a/src/scheduledtask.html
+++ b/src/scheduledtask.html
@@ -16,7 +16,7 @@
                         ${HeaderTaskTriggers}
                     </h2>
                     <button is="emby-button" type="button" class="fab fab-mini btnAddTrigger submit" style="margin-left: 1em;" title="${ButtonAddScheduledTaskTrigger}">
-                        <i class="md-icon">&#xE145;</i>
+                        <i class="md-icon">add</i>
                     </button>
                 </div>
                 <div class="taskTriggers"></div>
diff --git a/src/scripts/librarybrowser.js b/src/scripts/librarybrowser.js
index 7ffc69fa87..b9f3b92471 100644
--- a/src/scripts/librarybrowser.js
+++ b/src/scripts/librarybrowser.js
@@ -91,20 +91,20 @@ define(["userSettings"], function (userSettings) {
                 html += '<div style="display:inline-block;">';
 
                 if (showControls) {
-                    html += '<button is="paper-icon-button-light" class="btnPreviousPage autoSize" ' + (startIndex ? "" : "disabled") + '><i class="md-icon">&#xE5C4;</i></button>';
-                    html += '<button is="paper-icon-button-light" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? "disabled" : "") + '><i class="md-icon">&#xE5C8;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnPreviousPage autoSize" ' + (startIndex ? "" : "disabled") + '><i class="md-icon">arrow_back</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? "disabled" : "") + '><i class="md-icon">arrow_forward</i></button>';
                 }
 
                 if (options.addLayoutButton) {
-                    html += '<button is="paper-icon-button-light" title="' + Globalize.translate("ButtonSelectView") + '" class="btnChangeLayout autoSize" data-layouts="' + (options.layouts || "") + '" onclick="LibraryBrowser.showLayoutMenu(this, \'' + (options.currentLayout || "") + '\');"><i class="md-icon">&#xE42A;</i></button>';
+                    html += '<button is="paper-icon-button-light" title="' + Globalize.translate("ButtonSelectView") + '" class="btnChangeLayout autoSize" data-layouts="' + (options.layouts || "") + '" onclick="LibraryBrowser.showLayoutMenu(this, \'' + (options.currentLayout || "") + '\');"><i class="md-icon">view_comfy</i></button>';
                 }
 
                 if (options.sortButton) {
-                    html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + Globalize.translate("ButtonSort") + '"><i class="md-icon">&#xE053;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + Globalize.translate("ButtonSort") + '"><i class="md-icon">sort_by_alpha</i></button>';
                 }
 
                 if (options.filterButton) {
-                    html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + Globalize.translate("ButtonFilter") + '"><i class="md-icon">&#xE152;</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + Globalize.translate("ButtonFilter") + '"><i class="md-icon">filter_list</i></button>';
                 }
 
                 html += "</div>";
diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js
index c066810bf2..7e3b109500 100644
--- a/src/scripts/librarymenu.js
+++ b/src/scripts/librarymenu.js
@@ -66,7 +66,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
             headerUserButton.innerHTML = '<div class="headerButton headerButtonRight paper-icon-button-light headerUserButtonRound" style="background-image:url(\'' + src + "');\"></div>";
         } else {
             headerUserButton.classList.remove("headerUserButtonRound");
-            headerUserButton.innerHTML = '<i class="md-icon">&#xE7FD;</i>';
+            headerUserButton.innerHTML = '<i class="md-icon">person</i>';
         }
     }
 
@@ -545,11 +545,11 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
         var icon = headerCastButton.querySelector("i");
 
         if (info && !info.isLocalPlayer) {
-            icon.innerHTML = "&#xE308;";
+            icon.innerHTML = "cast_connected";
             headerCastButton.classList.add("castButton-active");
             context.querySelector(".headerSelectedPlayer").innerHTML = info.deviceName || info.name;
         } else {
-            icon.innerHTML = "&#xE307;";
+            icon.innerHTML = "cast";
             headerCastButton.classList.remove("castButton-active");
             context.querySelector(".headerSelectedPlayer").innerHTML = "";
         }
@@ -837,16 +837,16 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
         var html = "";
         html += '<div class="flex align-items-center flex-grow headerTop">';
         html += '<div class="headerLeft">';
-        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide"><i class="md-icon">' + (browser.safari ? "chevron_left" : "&#xE5C4;") + "</i></button>";
-        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerHomeButton hide barsMenuButton headerButtonLeft"><i class="md-icon">&#xE88A;</i></button>';
-        html += '<button type="button" is="paper-icon-button-light" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft hide"><i class="md-icon">&#xE5D2;</i></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide"><i class="md-icon">' + (browser.safari ? "chevron_left" : "arrow_back") + "</i></button>";
+        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerHomeButton hide barsMenuButton headerButtonLeft"><i class="md-icon">home</i></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft hide"><i class="md-icon">menu</i></button>';
         html += '<h3 class="pageTitle"></h3>';
         html += "</div>";
         html += '<div class="headerRight">';
         html += '<span class="headerSelectedPlayer"></span>';
-        html += '<button is="paper-icon-button-light" class="headerCastButton castButton headerButton headerButtonRight hide"><i class="md-icon">&#xE307;</i></button>';
-        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonRight headerSearchButton hide"><i class="md-icon">&#xE8B6;</i></button>';
-        html += '<button is="paper-icon-button-light" class="headerButton headerButtonRight headerUserButton hide"><i class="md-icon">&#xE7FD;</i></button>';
+        html += '<button is="paper-icon-button-light" class="headerCastButton castButton headerButton headerButtonRight hide"><i class="md-icon">cast</i></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonRight headerSearchButton hide"><i class="md-icon">search</i></button>';
+        html += '<button is="paper-icon-button-light" class="headerButton headerButtonRight headerUserButton hide"><i class="md-icon">person</i></button>';
         html += "</div>";
         html += "</div>";
         html += '<div class="headerTabs sectionTabs hide">';
diff --git a/src/userprofiles.html b/src/userprofiles.html
index bfa8c2e8e4..6fa5f058ce 100644
--- a/src/userprofiles.html
+++ b/src/userprofiles.html
@@ -6,7 +6,7 @@
                 <div class="sectionTitleContainer sectionTitleContainer-cards">
                     <h2 class="sectionTitle sectionTitle-cards">${HeaderUsers}</h2>
                     <button is="emby-button" type="button" class="fab btnAddUser submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAddUser}">
-                        <i class="md-icon">&#xE145;</i>
+                        <i class="md-icon">add</i>
                     </button>
                     <a style="margin-left:2em!important;" is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users.html">${Help}</a>
                 </div>
@@ -21,4 +21,4 @@
         </div>
 
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/videoosd.html b/src/videoosd.html
index 34c73a3019..0c7a910908 100644
--- a/src/videoosd.html
+++ b/src/videoosd.html
@@ -1,4 +1,4 @@
-<div id="videoOsdPage" data-role="page" class="page libraryPage" data-backbutton="true">    
+<div id="videoOsdPage" data-role="page" class="page libraryPage" data-backbutton="true">
     <div class="pageContainer flex">
 
     </div>
@@ -33,51 +33,51 @@
 
             <div class="buttons focuscontainer-x">
                 <button is="paper-icon-button-light" class="btnRecord autoSize hide">
-                    <i class="xlargePaperIconButton md-icon">&#xE061;</i>
+                    <i class="xlargePaperIconButton md-icon">fiber_manual_record</i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnPreviousTrack autoSize hide">
-                    <i class="xlargePaperIconButton md-icon">&#xE045;</i>
+                    <i class="xlargePaperIconButton md-icon">skip_previous</i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnRewind" title="${Rewind} (j)">
-                    <i class="xlargePaperIconButton md-icon">&#xE020;</i>
+                    <i class="xlargePaperIconButton md-icon">fast_rewind</i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnPause autoSize">
-                    <i class="xlargePaperIconButton md-icon">&#xE034;</i>
+                    <i class="xlargePaperIconButton md-icon">pause</i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnFastForward" title="${FastForward} (l)">
-                    <i class="xlargePaperIconButton md-icon">&#xE01F;</i>
+                    <i class="xlargePaperIconButton md-icon">fast_forward</i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnNextTrack autoSize hide">
-                    <i class="xlargePaperIconButton md-icon">&#xE044;</i>
+                    <i class="xlargePaperIconButton md-icon">skip_next</i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnAudio hide autoSize" title="${Audio}">
-                    <i class="xlargePaperIconButton md-icon">&#xE3A1;</i>
+                    <i class="xlargePaperIconButton md-icon">audiotrack</i>
                 </button>
                 <button is="paper-icon-button-light" class="btnSubtitles hide autoSize" title="${Subtitles}">
-                    <i class="xlargePaperIconButton md-icon">&#xE01C;</i>
+                    <i class="xlargePaperIconButton md-icon">closed_caption</i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnVideoOsdSettings hide autoSize" title="${Settings}">
-                    <i class="largePaperIconButton md-icon">&#xE8B8;</i>
+                    <i class="largePaperIconButton md-icon">settings</i>
                 </button>
                 <button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen} (f)">
-                    <i class="xlargePaperIconButton md-icon">&#xE5D0;</i>
+                    <i class="xlargePaperIconButton md-icon">fullscreen</i>
                 </button>
                 <button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
-                    <i class="xlargePaperIconButton md-icon">&#xE911;</i>
+                    <i class="xlargePaperIconButton md-icon">picture_in_picture_alt</i>
                 </button>
 
                 <div class="osdTimeText"><span class="osdPositionText"></span><span class="osdDurationText"></span><span class="endsAtText"></span></div>
 
                 <div class="volumeButtons hide-mouse-idle-tv">
                     <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute} (m)">
-                        <i class="xlargePaperIconButton md-icon">&#xE050;</i>
+                        <i class="xlargePaperIconButton md-icon">volume_up</i>
                     </button>
                     <div class="sliderContainer osdVolumeSliderContainer">
                         <input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="osdVolumeSlider" />