Merge pull request #814 from MrTimscampi/webos-icons

Fix icons on WebOS 4

src/assets/css/site.css

@@ -5,6 +5,11 @@ html {
     height: 100%;
 }
 
+.material-icons {
+    /* Fix font ligatures on older WebOS versions */
+    -webkit-font-feature-settings: "liga";
+}
+
 .backgroundContainer {
     position: fixed;
     top: 0;

src/components/accessschedule/accessschedule.template.html

@@ -1,6 +1,6 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="material-icons">arrow_back</i>
+        <i class="material-icons arrow_back"></i>
     </button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderAccessSchedule}

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="material-icons">arrow_back</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="material-icons 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

src/components/alphapicker/alphapicker.js

@@ -67,7 +67,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
 
         html += '<div class="' + rowClassName + '">';
         if (options.mode === 'keyboard') {
-            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="material-icons alphaPickerButtonIcon">space_bar</i></button>';
+            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="material-icons alphaPickerButtonIcon space_bar"></i></button>';
         } else {
             letters = ['#'];
             html += mapLetters(letters, vertical).join('');

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="material-icons">more_horiz</i></button>';
+                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="material-icons more_horiz"></i></button>';
                 }
             }
 
@@ -1316,15 +1316,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="material-icons cardOverlayButtonIcon">play_arrow</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="material-icons 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="material-icons cardOverlayButtonIcon">play_arrow</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="material-icons cardOverlayButtonIcon play_arrow"></i></button>';
                 }
 
                 if (options.overlayMoreButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon">more_horiz</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon more_horiz"></i></button>';
                 }
             }
 
@@ -1457,7 +1457,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="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">play_arrow</i></button>';
+                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover play_arrow"></i></button>';
             }
 
             html += '<div class="cardOverlayButton-br">';
@@ -1477,7 +1477,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 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="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">favorite</i></button>';
             }
 
-            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">more_horiz</i></button>';
+            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_horiz"></i></button>';
 
             html += '</div>';
             html += '</div>';
@@ -1677,7 +1677,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 var icon = cell.querySelector('.timerIndicator');
                 if (!icon) {
                     var indicatorsElem = ensureIndicators(cell);
-                    indicatorsElem.insertAdjacentHTML('beforeend', '<i class="material-icons timerIndicator indicatorIcon">fiber_manual_record</i>');
+                    indicatorsElem.insertAdjacentHTML('beforeend', '<i class="material-icons timerIndicator indicatorIcon fiber_manual_record"></i>');
                 }
                 cell.setAttribute('data-timerid', newTimerId);
             }

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="material-icons">arrow_back</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
             html += '<h3 class="formDialogHeaderTitle">';
             html += title;
             html += "</h3>";

src/components/collectioneditor/collectioneditor.js

@@ -243,7 +243,7 @@ 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="material-icons">arrow_back</i></button>';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
         html += '<h3 class="formDialogHeaderTitle">';
         html += title;
         html += '</h3>';

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="material-icons">arrow_back</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
                     html += '<h3 class="formDialogHeaderTitle">';
                     html += options.header || Globalize.translate("HeaderSelectPath");
                     html += "</h3>";

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' ? 'chevron_left' : 'chevron_right';
+        var icon = direction === 'left' ? '' : '';
 
         html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
         html += '<i class="material-icons">' + icon + '</i>';

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="material-icons">chevron_right</i>';
+                    html += '<i class="material-icons chevron_right"></i>';
                     html += "</a>";
                 } else {
                     html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";

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="material-icons">arrow_back</i></button>';
+                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
                 html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>';
 
                 html += '</div>';

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="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${Settings}
     </h3>

src/components/guide/guide.js

@@ -416,7 +416,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             var status;
 
             if (item.Type === 'SeriesTimer') {
-                return '<i class="material-icons programIcon seriesTimerIcon">fiber_smart_record</i>';
+                return '<i class="material-icons 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="material-icons programIcon seriesTimerIcon">fiber_smart_record</i>';
+                    return '<i class="material-icons programIcon seriesTimerIcon fiber_smart_record"></i>';
                 }
 
-                return '<i class="material-icons programIcon seriesTimerIcon seriesTimerIcon-inactive">fiber_smart_record</i>';
+                return '<i class="material-icons programIcon seriesTimerIcon seriesTimerIcon-inactive fiber_smart_record"></i>';
             }
 
-            return '<i class="material-icons programIcon timerIcon">fiber_manual_record</i>';
+            return '<i class="material-icons 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 material-icons">keyboard_arrow_left</i></div>';
+                    html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon material-icons 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 material-icons programIcon">fiber_manual_record</i>');
+                    cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon material-icons programIcon fiber_manual_record"></i>');
                 }
 
                 if (newTimerId) {

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="material-icons btnGuideViewSettingsIcon">more_horiz</i>
+                <i class="material-icons btnGuideViewSettingsIcon more_horiz"></i>
             </button>
         </div>
         <div class="timeslotHeaders scrollX guideScroller"></div>
@@ -30,7 +30,7 @@
 
 <div class="guideOptions hide">
     <button is="paper-icon-button-light" type="button" class="btnPreviousPage">
-        <i class="material-icons">arrow_back</i>
+        <i class="material-icons arrow_back"></i>
     </button>
     <button is="paper-icon-button-light" type="button" class="btnNextPage">
         <i class="material-icons">arrow_forward</i>

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="material-icons listItemIcon">folder_open</i>';
+            currentHtml += '<i class="material-icons 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="material-icons">keyboard_arrow_up</i></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="material-icons keyboard_arrow_up"></i></button>';
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="material-icons">keyboard_arrow_down</i></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="material-icons keyboard_arrow_down"></i></button>';
 
             currentHtml += '</div>';
 

src/components/homesections/homesections.js

@@ -282,7 +282,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="material-icons">chevron_right</i>';
+            html += '<i class="material-icons chevron_right"></i>';
             html += '</a>';
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', parent.Name) + '</h2>';
@@ -630,7 +630,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += globalize.translate('HeaderOnNow');
                     html += '</h2>';
-                    html += '<i class="material-icons">chevron_right</i>';
+                    html += '<i class="material-icons chevron_right"></i>';
                     html += '</a>';
 
                 } else {
@@ -705,7 +705,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += globalize.translate('HeaderNextUp');
             html += '</h2>';
-            html += '<i class="material-icons">chevron_right</i>';
+            html += '<i class="material-icons chevron_right"></i>';
             html += '</a>';
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>';

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="material-icons">arrow_back</i></button>';
+            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="material-icons arrow_back"></i></button>';
             html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="material-icons">arrow_forward</i></button>';
             html += '</div>';
         }

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="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${Search}
     </h3>

src/components/imageeditor/imageeditor.js

@@ -155,15 +155,15 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
             if (image.ImageType === "Backdrop" || image.ImageType === "Screenshot") {
 
                 if (index > 0) {
-                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><i class="material-icons">chevron_left</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><i class="material-icons chevron_left"></i></button>';
                 } else {
-                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveLeft') + '"><i class="material-icons">chevron_left</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveLeft') + '"><i class="material-icons chevron_left"></i></button>';
                 }
 
                 if (index < numImages - 1) {
-                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('MoveRight') + '"><i class="material-icons">chevron_right</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('MoveRight') + '"><i class="material-icons chevron_right"></i></button>';
                 } else {
-                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><i class="material-icons">chevron_right</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><i class="material-icons chevron_right"></i></button>';
                 }
             } else {
                 if (imageProviders.length) {

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="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderEditImages}
     </h3>

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="material-icons">arrow_back</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderImageOptions}
     </h3>

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="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderUploadImage}
     </h3>

src/components/indicators/indicators.js

@@ -118,7 +118,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
         var status;
 
         if (item.Type === 'SeriesTimer') {
-            return '<i class="material-icons timerIndicator indicatorIcon">fiber_smart_record</i>';
+            return '<i class="material-icons timerIndicator indicatorIcon fiber_smart_record"></i>';
         } else if (item.TimerId || item.SeriesTimerId) {
             status = item.Status || 'Cancelled';
         } else if (item.Type === 'Timer') {
@@ -129,20 +129,20 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
 
         if (item.SeriesTimerId) {
             if (status !== 'Cancelled') {
-                return '<i class="material-icons timerIndicator indicatorIcon">fiber_smart_record</i>';
+                return '<i class="material-icons timerIndicator indicatorIcon fiber_smart_record"></i>';
             }
 
-            return '<i class="material-icons timerIndicator timerIndicator-inactive indicatorIcon">fiber_smart_record</i>';
+            return '<i class="material-icons timerIndicator timerIndicator-inactive indicatorIcon fiber_smart_record"></i>';
         }
 
-        return '<i class="material-icons timerIndicator indicatorIcon">fiber_manual_record</i>';
+        return '<i class="material-icons timerIndicator indicatorIcon fiber_manual_record"></i>';
     }
 
     function getSyncIndicator(item) {
         if (item.SyncPercent === 100) {
-            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="material-icons indicatorIcon">file_download</i></div>';
+            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="material-icons indicatorIcon file_download"></i></div>';
         } else if (item.SyncPercent != null) {
-            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="material-icons indicatorIcon">file_download</i></div>';
+            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="material-icons indicatorIcon file_download"></i></div>';
         }
 
         return '';

src/components/itemMediaInfo/itemMediaInfo.template.html

@@ -1,6 +1,6 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="material-icons">arrow_back</i>
+        <i class="material-icons arrow_back"></i>
     </button>
     <h3 class="formDialogHeaderTitle">${HeaderMediaInfo}</h3>
 </div>

src/components/itemcontextmenu.js

@@ -15,7 +15,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                 commands.push({
                     name: globalize.translate("Play"),
                     id: "resume",
-                    icon: "play_arrow"
+                    icon: ""
                 });
             }
 
@@ -23,7 +23,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                 commands.push({
                     name: globalize.translate("PlayAllFromHere"),
                     id: "playallfromhere",
-                    icon: "play_arrow"
+                    icon: ""
                 });
             }
         }

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="material-icons">arrow_back</i>
+        <i class="material-icons arrow_back"></i>
     </button>
     <h3 class="formDialogHeaderTitle">${Identify}</h3>
 </div>

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -65,9 +65,9 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             html += "</h3>";
             html += "</div>";
             if (i > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>';
             } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>';
             }
             html += "</div>";
         }
@@ -120,7 +120,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             html += plugin.Name;
             html += "</h3>";
             html += "</div>";
-            i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>' : plugins.length > 1 && (html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>'), html += "</div>"
+            i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>' : plugins.length > 1 && (html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>'), html += "</div>"
         }
         html += "</div>";
         html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataDownloadersHelp") + "</div>";
@@ -181,9 +181,9 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             html += "</h3>";
             html += "</div>";
             if (i > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>';
             } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>';
             }
             html += "</div>";
         }
@@ -220,9 +220,9 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             html += "</h3>";
             html += "</div>";
             if (i > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>';
             } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>';
             }
             html += "</div>";
         }

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="material-icons">drag_handle</i></button>';
+                //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="material-icons drag_handle"></i></button>';
                 // Firefox and Edge are not allowing the button to be draggable
-                html += '<i class="listViewDragHandle material-icons listItemIcon listItemIcon-transparent">drag_handle</i>';
+                html += '<i class="listViewDragHandle material-icons 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="material-icons listItemImageButton-icon">play_arrow</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="material-icons 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 = 'more_horiz';
+            var moreIcon = '&#xE5D3;';
 
             html += getTextLinesHtml(textlines, isLargeStyle);
 
@@ -476,7 +476,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="material-icons">playlist_add</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="material-icons playlist_add"></i></button>';
                 }
 
                 if (options.moreButton !== false) {
@@ -484,7 +484,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="material-icons">info_outline</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="material-icons info_outline"></i></button>';
                 }
 
                 if (options.rightButtons) {

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="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
+            return '<i class="material-icons 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="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
+                return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></i>';
             }
 
-            return '<i class="material-icons mediaInfoItem mediaInfoIconItem">fiber_smart_record</i>';
+            return '<i class="material-icons mediaInfoItem mediaInfoIconItem fiber_smart_record"></i>';
         }
 
-        return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_manual_record</i>';
+        return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_manual_record"></i>';
     }
 
     function getProgramInfoHtml(item, options) {

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="material-icons">arrow_back</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
 </div>
 

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="material-icons">arrow_back</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle"></h3>
 </div>
 

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="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>
@@ -9,7 +9,7 @@
             <span>${Save}</span>
         </button>
         <button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1">
-            <i class="material-icons">more_horiz</i>
+            <i class="material-icons more_horiz"></i>
         </button>
     </div>
 </div>

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="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>

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="material-icons">close</i></button>';
             html += '<h1 class="itemSelectionCount"></h1>';
 
-            var moreIcon = "more_horiz";
+            var moreIcon = "&#xE5D3;";
             html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><i class="material-icons">' + moreIcon + '</i></button>';
 
             selectionCommandsPanel.innerHTML = html;

src/components/nowplayingbar/nowplayingbar.js

@@ -42,19 +42,19 @@ 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="material-icons">skip_previous</i></button>';
+        html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><i class="material-icons skip_previous"></i></button>';
 
         html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="material-icons">pause</i></button>';
 
         html += '<button is="paper-icon-button-light" class="stopButton mediaButton"><i class="material-icons">stop</i></button>';
-        html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><i class="material-icons">skip_next</i></button>';
+        html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><i class="material-icons 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="material-icons">volume_up</i></button>';
+        html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><i class="material-icons 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"/>';
@@ -66,7 +66,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         html += '</div>';
 
         html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="material-icons">pause</i></button>';
-        html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><i class="material-icons">playlist_play</i></button>';
+        html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><i class="material-icons playlist_play"></i></button>';
 
         html += '</div>';
         html += '</div>';
@@ -304,7 +304,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             if (isPaused) {
 
                 for (i = 0, length = playPauseButtons.length; i < length; i++) {
-                    playPauseButtons[i].querySelector('i').innerHTML = 'play_arrow';
+                    playPauseButtons[i].querySelector('i').innerHTML = '&#xE037;';
                 }
 
             } else {
@@ -414,9 +414,9 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         }
 
         if (isMuted) {
-            muteButton.querySelector('i').innerHTML = 'volume_off';
+            muteButton.querySelector('i').innerHTML = '&#xE04F;';
         } else {
-            muteButton.querySelector('i').innerHTML = 'volume_up';
+            muteButton.querySelector('i').innerHTML = '&#xE050;';
         }
 
         if (supportedCommands.indexOf('SetVolume') === -1) {

src/components/playback/brightnessosd.js

@@ -11,7 +11,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     function getOsdElementHtml() {
         var html = '';
 
-        html += '<i class="material-icons iconOsdIcon">brightness_high</i>';
+        html += '<i class="material-icons 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 = 'brightness_high';
+                iconElement.innerHTML = '&#xE1AC;';
             } else if (brightness >= 20) {
-                iconElement.innerHTML = 'brightness_medium';
+                iconElement.innerHTML = '&#xE1AE;';
             } else {
-                iconElement.innerHTML = 'brightness_low';
+                iconElement.innerHTML = '&#xE1AD;';
             }
         }
         if (progressElement) {

src/components/playback/volumeosd.js

@@ -11,7 +11,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
     function getOsdElementHtml() {
         var html = '';
 
-        html += '<i class="material-icons iconOsdIcon">volume_up</i>';
+        html += '<i class="material-icons 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 ? 'volume_off' : 'volume_up';
+            iconElement.innerHTML = isMuted ? '&#xE04F;' : '&#xE050;';
         }
         if (progressElement) {
             progressElement.style.width = (volume || 0) + '%';

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="material-icons">arrow_back</i></button>';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
         html += '<h3 class="formDialogHeaderTitle">';
         html += title;
         html += '</h3>';

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="material-icons">arrow_back</i>
+        <i class="material-icons arrow_back"></i>
     </button>
     <h3 class="formDialogHeaderTitle"></h3>
 </div>

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="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle"></h3>
 </div>
 <div class="formDialogContent smoothScrollY">

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="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderRecordingOptions}
     </h3>

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="material-icons recordingIcon">fiber_smart_record</i>
+                <i class="material-icons 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="material-icons recordingIcon">fiber_manual_record</i>
+                <i class="material-icons recordingIcon fiber_manual_record"></i>
                 <span class="buttonText">${Record}</span>
             </button>
         </div>

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="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderSeriesOptions}
     </h3>

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="material-icons">arrow_back</i></button>';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
         html += '<h3 class="formDialogHeaderTitle">';
         html += title;
         html += '</h3>';

src/components/remotecontrol/remotecontrol.js

@@ -295,10 +295,10 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
 
             if (isMuted) {
                 view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute"));
-                view.querySelector(".buttonMute i").innerHTML = "volume_off";
+                view.querySelector(".buttonMute i").innerHTML = "";
             } else {
                 view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute"));
-                view.querySelector(".buttonMute i").innerHTML = "volume_up";
+                view.querySelector(".buttonMute i").innerHTML = "";
             }
 
             if (showMuteButton) {
@@ -326,7 +326,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
         function updatePlayPauseState(isPaused, isActive) {
             var context = dlg;
             var btnPlayPause = context.querySelector(".btnPlayPause");
-            btnPlayPause.querySelector("i").innerHTML = isPaused ? "play_arrow" : "pause";
+            btnPlayPause.querySelector("i").innerHTML = isPaused ? "" : "pause";
             buttonVisible(btnPlayPause, isActive);
         }
 
@@ -361,7 +361,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                     action: "setplaylistindex",
                     enableUserDataButtons: false,
                     rightButtons: [{
-                        icon: "remove_circle_outline",
+                        icon: "",
                         title: globalize.translate("ButtonRemove"),
                         id: "remove"
                     }],

src/components/slideshow/slideshow.js

@@ -349,7 +349,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
 
             var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause i');
             if (btnSlideshowPause) {
-                btnSlideshowPause.innerHTML = "play_arrow";
+                btnSlideshowPause.innerHTML = "";
             }
 
             swiperInstance.stopAutoplay();

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="material-icons">arrow_back</i></button>';
+                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
                 html += '<h3 class="formDialogHeaderTitle">${Sort}</h3>';
 
                 html += '</div>';

src/components/subtitleeditor/subtitleeditor.js

@@ -132,7 +132,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
                 itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
 
-                itemHtml += '<i class="listItemIcon material-icons">closed_caption</i>';
+                itemHtml += '<i class="listItemIcon material-icons closed_caption"></i>';
 
                 itemHtml += '<div class="listItemBody two-line">';
 
@@ -248,7 +248,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
             html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
 
-            html += '<i class="listItemIcon material-icons">closed_caption</i>';
+            html += '<i class="listItemIcon material-icons closed_caption"></i>';
 
             var bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
 
@@ -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="material-icons">file_download</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnDownload listItemButton"><i class="material-icons file_download"></i></button>';
             }
 
             html += '</' + tagName + '>';

src/components/subtitleeditor/subtitleeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons 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="material-icons">info</i><span style="margin-left:.25em;">${Help}</span></a>

src/components/tabbedview/itemstab.js

@@ -181,7 +181,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
             return;
         }
 
-        btnSortIcon.innerHTML = values.sortOrder === 'Descending' ? 'arrow_downward' : 'arrow_upward';
+        btnSortIcon.innerHTML = values.sortOrder === 'Descending' ? '' : '';
     }
 
     function bindAll(elems, eventName, fn) {

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="material-icons">arrow_back</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
             html += '<h3 class="formDialogHeaderTitle">';
             html += globalize.translate("HeaderLiveTvTunerSetup");
             html += "</h3>";

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="material-icons">arrow_back</i></button>';
+                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
                 html += '<h3 class="formDialogHeaderTitle">${Settings}</h3>';
 
                 html += '</div>';

src/controllers/dashboard/dashboard.js

@@ -571,7 +571,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             }
 
             if (session.PlayState && session.PlayState.IsPaused) {
-                btnSessionPlayPause.querySelector("i").innerHTML = "play_arrow";
+                btnSessionPlayPause.querySelector("i").innerHTML = "";
             } else {
                 btnSessionPlayPause.querySelector("i").innerHTML = "pause";
             }

src/controllers/dashboard/plugins/installed.js

@@ -54,7 +54,7 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
         html += "</div>";
         html += '<div class="cardFooter">';
         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="material-icons">more_horiz</i></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><i class="material-icons more_horiz"></i></button>';
         html += "</div>";
         html += "<div class='cardText'>";
         html += configPage ? configPage.DisplayName || plugin.Name : plugin.Name;

src/controllers/dashboard/scheduledtasks/scheduledtasks.js

@@ -51,7 +51,7 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "huma
             if (task.State === "Running") {
                 html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStopTask" data-taskid="' + task.Id + '" title="' + globalize.translate("ButtonStop") + '"><i class="material-icons">stop</i></button>';
             } else if (task.State === "Idle") {
-                html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStartTask" data-taskid="' + task.Id + '" title="' + globalize.translate("ButtonStart") + '"><i class="material-icons">play_arrow</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStartTask" data-taskid="' + task.Id + '" title="' + globalize.translate("ButtonStart") + '"><i class="material-icons play_arrow"></i></button>';
             }
             html += "</div>";
         }
@@ -99,7 +99,7 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "huma
         } else if (state === "Idle") {
             elem.classList.add("btnStartTask");
             elem.classList.remove("btnStopTask");
-            elem.querySelector("i").innerHTML = "play_arrow";
+            elem.querySelector("i").innerHTML = "&#xE037;";
             elem.title = globalize.translate("ButtonStart");
         }
         $(elem).parents(".listItem")[0].setAttribute("data-status", state);

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="material-icons">more_horiz</i></button>';
+                deviceHtml += '<button type="button" is="paper-icon-button-light" data-id="' + device.Id + '" title="' + globalize.translate("Menu") + '" class="btnDeviceMenu"><i class="material-icons more_horiz"></i></button>';
                 deviceHtml += "</div>";
             }
 

src/controllers/favorites.js

@@ -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="material-icons">chevron_right</i>';
+                html += '<i class="material-icons chevron_right"></i>';
                 html += "</a>";
             }
 

src/controllers/itemdetailpage.js

@@ -2070,7 +2070,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 = "more_horiz";
+        view.querySelector(".btnMoreCommands i").innerHTML = "";
         view.querySelector(".trackSelections").addEventListener("submit", onTrackSelectionsSubmit);
         view.querySelector(".btnSplitVersions").addEventListener("click", function () {
             splitVersions(self, view, apiClient, params);

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 ? "arrow_downward" : "arrow_upward";
+                btnSortIcon.innerHTML = "Descending" === values.sortOrder ? "" : "";
             }
         }
     }

src/controllers/livetvstatus.js

@@ -30,7 +30,7 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
         html += "</div>";
         html += "</div>";
         html += '<div class="cardFooter visualCardBox-cardFooter">';
-        html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><i class="material-icons">more_horiz</i></button>';
+        html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><i class="material-icons more_horiz"></i></button>';
         html += '<div class="cardText">' + (device.FriendlyName || getTunerName(device.Type)) + "</div>";
         html += '<div class="cardText cardText-secondary">';
         html += device.Url || "&nbsp;";
@@ -112,7 +112,7 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
                 html += "</div>";
                 html += "</a>";
                 html += "</div>";
-                html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><i class="material-icons listItemAside">more_horiz</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><i class="material-icons listItemAside more_horiz"></i></button>';
                 html += "</div>";
             }
 

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="material-icons">more_horiz</i></button>';
+            html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><i class="material-icons more_horiz"></i></button>';
             html += "</div>";
         }
 

src/controllers/movies/moviegenres.js

@@ -145,7 +145,7 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += item.Name;
                     html += "</h2>";
-                    html += '<i class="material-icons hide">chevron_right</i>';
+                    html += '<i class="material-icons hide chevron_right"></i>';
                     html += "</a>";
                     html += "</div>";
                     if (enableScrollX()) {

src/controllers/playback/videoosd.js

@@ -539,7 +539,7 @@ 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 = "fullscreen_exit";
+                view.querySelector(".btnFullscreen i").innerHTML = "";
             } else {
                 view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("Fullscreen") + " (f)");
                 view.querySelector(".btnFullscreen i").innerHTML = "fullscreen";
@@ -741,7 +741,7 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
         function updatePlayPauseState(isPaused) {
             var button = view.querySelector(".btnPause i");
             if (isPaused) {
-                button.innerHTML = "play_arrow";
+                button.innerHTML = "";
                 button.setAttribute("title", globalize.translate("ButtonPlay") + " (k)");
             } else {
                 button.innerHTML = "pause";
@@ -878,10 +878,10 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
 
             if (isMuted) {
                 view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute") + " (m)");
-                view.querySelector(".buttonMute i").innerHTML = "volume_off";
+                view.querySelector(".buttonMute i").innerHTML = "";
             } else {
                 view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute") + " (m)");
-                view.querySelector(".buttonMute i").innerHTML = "volume_up";
+                view.querySelector(".buttonMute i").innerHTML = "";
             }
 
             if (showMuteButton) {

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="material-icons hide">chevron_right</i>';
+                    html += '<i class="material-icons hide chevron_right"></i>';
                     html += "</a>";
                     html += "</div>";
                     if (enableScrollX()) {

src/controllers/userprofilespage.js

@@ -115,7 +115,7 @@ define(["loading", "dom", "globalize", "humanedate", "paper-icon-button-light",
         html += '<div class="flex-grow" style="overflow:hidden;text-overflow:ellipsis;">';
         html += user.Name;
         html += "</div>";
-        html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu flex-shrink-zero"><i class="material-icons">more_horiz</i></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu flex-shrink-zero"><i class="material-icons more_horiz"></i></button>';
         html += "</div>";
         html += '<div class="cardText cardText-secondary">';
         var lastSeen = getLastSeenText(user.LastActivityDate);
@@ -188,7 +188,7 @@ define(["loading", "dom", "globalize", "humanedate", "paper-icon-button-light",
         html += "</div>";
         html += '<div class="cardFooter visualCardBox-cardFooter">';
         html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
-        html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu"><i class="material-icons">more_horiz</i></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu"><i class="material-icons more_horiz"></i></button>';
         html += "</div>";
         html += '<div class="cardText" style="padding-top:10px;padding-bottom:10px;">';
         html += user.UserName;

src/dashboard.html

@@ -5,7 +5,7 @@
                 <div class="dashboardSection">
                     <a is="emby-linkbutton" href="dashboardgeneral.html" class="button-flat sectionTitleTextButton">
                         <h3>${TabServer}</h3>
-                        <i class="material-icons">chevron_right</i>
+                        <i class="material-icons chevron_right"></i>
                     </a>
 
                     <div class="paperList" style="padding: 1em;">
@@ -34,7 +34,7 @@
                 <div class="dashboardSection">
                     <a is="emby-linkbutton" href="devices.html" class="button-flat sectionTitleTextButton">
                         <h3>${HeaderActiveDevices}</h3>
-                        <i class="material-icons">chevron_right</i>
+                        <i class="material-icons 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="material-icons">chevron_right</i>
+                        <i class="material-icons 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="material-icons">chevron_right</i>
+                        <i class="material-icons 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="material-icons">chevron_right</i>
+                        <i class="material-icons chevron_right"></i>
                     </a>
                     <div class="paperList">
                         <div class="listItem listItem-border">

src/elements/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 material-icons">keyboard_arrow_down</i></div>');
+            this.parentNode.insertAdjacentHTML('beforeend', '<div class="selectArrowContainer"><div style="visibility:hidden;">0</div><i class="selectArrow material-icons keyboard_arrow_down"></i></div>');
         }
     };
 

src/itemdetails.html

@@ -1,7 +1,7 @@
 <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
     <div id="itemBackdrop" class="itemBackdrop noBackdrop">
         <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
-            <i class="material-icons">play_arrow</i>
+            <i class="material-icons play_arrow"></i>
         </button>
     </div>
 
@@ -17,21 +17,21 @@
             <div class="mainDetailButtons">
                 <button is="emby-button" type="button" class="button-flat btnResume hide detailButton detailButtonHideonMobile" data-mode="resume">
                     <div class="detailButton-content">
-                        <i class="material-icons detailButton-icon">play_arrow</i>
+                        <i class="material-icons detailButton-icon play_arrow"></i>
                         <div class="detailButton-text">${ButtonResume}</div>
                     </div>
                 </button>
 
                 <button is="emby-button" type="button" class="button-flat btnPlay hide detailButton detailButtonHideonMobile" data-mode="play">
                     <div class="detailButton-content">
-                        <i class="material-icons detailButton-icon">play_arrow</i>
+                        <i class="material-icons detailButton-icon play_arrow"></i>
                         <div class="detailButton-text">${ButtonPlay}</div>
                     </div>
                 </button>
 
                 <button is="emby-button" type="button" class="button-flat btnDownload hide detailButton">
                     <div class="detailButton-content">
-                        <i class="material-icons detailButton-icon">get_app</i>
+                        <i class="material-icons detailButton-icon">&#xe884;</i>
                         <div class="detailButton-text">${ButtonDownload}</div>
                     </div>
                 </button>

src/list.html

@@ -7,13 +7,13 @@
                 <span>${HeaderPlayAll}</span>
             </button>
             <button is="paper-icon-button-light" class="btnPlay listIconButton-autohide">
-                <i class="material-icons">play_arrow</i>
+                <i class="material-icons 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="material-icons">playlist_add</i>
+                <i class="material-icons playlist_add"></i>
             </button>
             <button is="emby-button" class="btnShuffle button-flat hide listTextButton-autohide">
                 <span>${Shuffle}</span>
@@ -30,7 +30,7 @@
 
             <button is="emby-button" class="btnSort hide button-flat listTextButton-autohide">
                 <span class="btnSortText"></span>
-                <i class="material-icons btnSortIcon">arrow_upward</i>
+                <i class="material-icons btnSortIcon arrow_upward"></i>
             </button>
             <button is="paper-icon-button-light" class="btnSort hide listIconButton-autohide">
                 <i class="material-icons">sort</i>
@@ -39,13 +39,13 @@
                 <span>${Filter}</span>
             </button>
             <button is="paper-icon-button-light" class="btnFilter listIconButton-autohide" data-ripple="false" style="overflow:visible;">
-                <i class="material-icons">filter_list</i>
+                <i class="material-icons filter_list"></i>
             </button>
             <button is="emby-button" class="btnViewSettings button-flat listTextButton-autohide">
-                <i class="material-icons">more_horiz</i>
+                <i class="material-icons more_horiz"></i>
             </button>
             <button is="paper-icon-button-light" class="btnViewSettings listIconButton-autohide">
-                <i class="material-icons">more_horiz</i>
+                <i class="material-icons more_horiz"></i>
             </button>
         </div>
         <div is="emby-itemscontainer" class="vertical-wrap itemsContainer centered" style="padding: 0 0 10vh 0;">

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="material-icons">chevron_right</i>
+                        <i class="material-icons 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="material-icons">chevron_right</i>
+                        <i class="material-icons 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="material-icons">chevron_right</i>
+                        <i class="material-icons 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="material-icons">chevron_right</i>
+                        <i class="material-icons 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="material-icons">chevron_right</i>
+                        <i class="material-icons 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="material-icons">chevron_right</i>
+                        <i class="material-icons chevron_right"></i>
                     </a>
                 </div>
                 <div is="emby-itemscontainer" class="upcomingNewsItems itemsContainer padded-left padded-right"></div>
@@ -63,7 +63,7 @@
         <div class="pageTabContent" id="channelsTab" data-index="2">
             <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="btnFilter sectionTitleButton" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
+                <button is="paper-icon-button-light" class="btnFilter sectionTitleButton" title="${ButtonFilter}"><i class="material-icons filter_list"></i></button>
             </div>
             <div is="emby-itemscontainer" id="items" class="itemsContainer vertical-wrap padded-left padded-right"></div>
         </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="material-icons">chevron_right</i>
+                        <i class="material-icons chevron_right"></i>
                     </button>
                 </div>
                 <div is="emby-itemscontainer" class="recordingItems itemsContainer padded-left padded-right"></div>

src/movies.html

@@ -3,9 +3,9 @@
     <div class="pageTabContent" data-index="0">
         <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="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons view_comfy"></i></button>
-            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="material-icons">sort_by_alpha</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="material-icons sort_by_alpha"></i></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons filter_list"></i></button>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@@ -46,8 +46,8 @@
     <div class="pageTabContent" data-index="2">
         <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="btnSort autoSize" title="${ButtonSort}"><i class="material-icons">sort_by_alpha</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="material-icons sort_by_alpha"></i></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons filter_list"></i></button>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical">
@@ -62,7 +62,7 @@
     <div class="pageTabContent" data-index="3">
         <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="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons view_comfy"></i></button>
         </div>
 
         <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
@@ -74,8 +74,8 @@
     <div class="pageTabContent" data-index="4">
         <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="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons view_comfy"></i></button>
-            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="material-icons">sort_by_alpha</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="material-icons sort_by_alpha"></i></button>
             <button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><i class="material-icons">add</i></button>
         </div>
 

src/music.html

@@ -37,11 +37,11 @@
     <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="material-icons">play_arrow</i></button>
+            <button is="paper-icon-button-light" class="btnPlayAll musicglobalButton" title="${HeaderPlayAll}"><i class="material-icons play_arrow"></i></button>
             <button is="paper-icon-button-light" class="btnShuffle musicglobalButton" title="${ButtonShuffle}"><i class="material-icons">shuffle</i></button>
-            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons view_comfy"></i></button>
-            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="material-icons">sort_by_alpha</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="material-icons sort_by_alpha"></i></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons filter_list"></i></button>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@@ -56,8 +56,8 @@
     <div class="pageTabContent" id="albumArtistsTab" data-index="2">
         <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="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons view_comfy"></i></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons filter_list"></i></button>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@@ -72,8 +72,8 @@
     <div class="pageTabContent" id="artistsTab" data-index="3">
         <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="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons view_comfy"></i></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons filter_list"></i></button>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@@ -92,8 +92,8 @@
     <div class="pageTabContent" id="songsTab" data-index="5">
         <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="btnSort autoSize" title="${ButtonSort}"><i class="material-icons">sort_by_alpha</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="material-icons sort_by_alpha"></i></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons filter_list"></i></button>
         </div>
 
         <div is="emby-itemscontainer" id="items" class="itemsContainer vertical-list" style="max-width:67.5em;margin: 0 auto;"></div>

src/mypreferencesmenu.html

@@ -41,7 +41,7 @@
 
                 <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkSubtitlePreferences listItem-border">
                     <div class="listItem">
-                        <i class="material-icons listItemIcon listItemIcon-transparent">closed_caption</i>
+                        <i class="material-icons listItemIcon listItemIcon-transparent closed_caption"></i>
                         <div class="listItemBody">
                             <div class="listItemBodyText">${Subtitles}</div>
                         </div>

src/nowplaying.html

@@ -14,11 +14,11 @@
 
                 <div class="nowPlayingInfoButtons">
                     <button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
-                        <i class="material-icons">skip_previous</i>
+                        <i class="material-icons skip_previous"></i>
                     </button>
 
                     <button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
-                        <i class="material-icons">fast_rewind</i>
+                        <i class="material-icons fast_rewind"></i>
                     </button>
 
                     <button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize" title="${ButtonPause}">
@@ -30,11 +30,11 @@
                     </button>
 
                     <button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}">
-                        <i class="material-icons">fast_forward</i>
+                        <i class="material-icons fast_forward"></i>
                     </button>
 
                     <button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
-                        <i class="material-icons">skip_next</i>
+                        <i class="material-icons skip_next"></i>
                     </button>
 
                     <button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
@@ -42,7 +42,7 @@
                     </button>
 
                     <button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
-                        <i class="material-icons">closed_caption</i>
+                        <i class="material-icons closed_caption"></i>
                     </button>
 
                     <div class="nowPlayingTime">
@@ -63,7 +63,7 @@
                         </button>
 
                         <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute}">
-                            <i class="xlargePaperIconButton material-icons">volume_up</i>
+                            <i class="xlargePaperIconButton material-icons volume_up"></i>
                         </button>
                         <div class="sliderContainer nowPlayingVolumeSliderContainer">
                             <input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider" />
@@ -78,13 +78,13 @@
                     <div class="collapseContent">
                         <div>
                             <button is="paper-icon-button-light" class="btnArrowUp btnCommand autoSize button-submit" title="${ButtonArrowUp}" data-command="MoveUp">
-                                <i class="material-icons">keyboard_arrow_up</i>
+                                <i class="material-icons keyboard_arrow_up"></i>
                             </button>
                         </div>
                         <br />
                         <div>
                             <button is="paper-icon-button-light" class="btnArrowLeft btnCommand autoSize button-submit" title="${ButtonArrowLeft}" data-command="MoveLeft">
-                                <i class="material-icons">keyboard_arrow_left</i>
+                                <i class="material-icons keyboard_arrow_left"></i>
                             </button>
                             <button is="paper-icon-button-light" class="btnOk btnCommand autoSize button-submit" title="${ButtonOk}" data-command="Select">
                                 <i class="material-icons">keyboard_return</i>
@@ -96,10 +96,10 @@
                         <br />
                         <div>
                             <button is="paper-icon-button-light" class="btnBack btnCommand autoSize" title="${ButtonBack}" data-command="Back">
-                                <i class="material-icons">arrow_back</i>
+                                <i class="material-icons arrow_back"></i>
                             </button>
                             <button is="paper-icon-button-light" class="btnArrowDown btnCommand autoSize button-submit" title="${ButtonArrowDown}" data-command="MoveDown">
-                                <i class="material-icons">keyboard_arrow_down</i>
+                                <i class="material-icons keyboard_arrow_down"></i>
                             </button>
                             <button is="paper-icon-button-light" class="btnContextMenu btnCommand autoSize" title="${ButtonInfo}" data-command="ToggleContextMenu">
                                 <i class="material-icons">menu</i>

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="material-icons">arrow_back</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnPreviousPage autoSize" ' + (startIndex ? "" : "disabled") + '><i class="material-icons arrow_back"></i></button>';
                     html += '<button is="paper-icon-button-light" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? "disabled" : "") + '><i class="material-icons">arrow_forward</i></button>';
                 }
 
                 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="material-icons">view_comfy</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="material-icons view_comfy"></i></button>';
                 }
 
                 if (options.sortButton) {
-                    html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + Globalize.translate("ButtonSort") + '"><i class="material-icons">sort_by_alpha</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + Globalize.translate("ButtonSort") + '"><i class="material-icons sort_by_alpha"></i></button>';
                 }
 
                 if (options.filterButton) {
-                    html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + Globalize.translate("ButtonFilter") + '"><i class="material-icons">filter_list</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + Globalize.translate("ButtonFilter") + '"><i class="material-icons filter_list"></i></button>';
                 }
 
                 html += "</div>";

src/scripts/librarymenu.js

@@ -5,7 +5,7 @@ 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="material-icons">' + (browser.safari ? "chevron_left" : "arrow_back") + "</i></button>";
+        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide"><i class="material-icons ' + (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="material-icons">home</i></button>';
         html += '<button type="button" is="paper-icon-button-light" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft hide"><i class="material-icons">menu</i></button>';
         html += '<h3 class="pageTitle"></h3>';
@@ -306,7 +306,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
             icon: "folder"
         }, {
             name: globalize.translate("TabPlayback"),
-            icon: "play_arrow",
+            icon: "&#xE037;",
             href: "encodingsettings.html",
             pageIds: ["encodingSettingsPage", "playbackConfigurationPage", "streamingSettingsPage"]
         }];
@@ -584,7 +584,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
         var icon = headerCastButton.querySelector("i");
 
         if (info && !info.isLocalPlayer) {
-            icon.innerHTML = "cast_connected";
+            icon.innerHTML = "&#xE308;";
             headerCastButton.classList.add("castButton-active");
             context.querySelector(".headerSelectedPlayer").innerHTML = info.deviceName || info.name;
         } else {

src/tv.html

@@ -3,9 +3,9 @@
     <div class="pageTabContent" id="seriesTab" data-index="0">
         <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="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons view_comfy"></i></button>
-            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="material-icons">sort_by_alpha</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="material-icons sort_by_alpha"></i></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons filter_list"></i></button>
         </div>
 
         <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right"></div>
@@ -59,9 +59,9 @@
     <div class="pageTabContent" data-index="6">
         <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="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons">view_comfy</i></button>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="material-icons view_comfy"></i></button>
-            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="material-icons">sort_by_alpha</i></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="material-icons sort_by_alpha"></i></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons filter_list"></i></button>
         </div>
         <div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">
         </div>

src/videoosd.html

@@ -25,15 +25,15 @@
 
             <div class="buttons focuscontainer-x">
                 <button is="paper-icon-button-light" class="btnRecord autoSize hide">
-                    <i class="xlargePaperIconButton material-icons">fiber_manual_record</i>
+                    <i class="xlargePaperIconButton material-icons fiber_manual_record"></i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnPreviousTrack autoSize hide">
-                    <i class="xlargePaperIconButton material-icons">skip_previous</i>
+                    <i class="xlargePaperIconButton material-icons skip_previous"></i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnRewind" title="${Rewind} (j)">
-                    <i class="xlargePaperIconButton material-icons">fast_rewind</i>
+                    <i class="xlargePaperIconButton material-icons fast_rewind"></i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnPause autoSize">
@@ -41,18 +41,18 @@
                 </button>
 
                 <button is="paper-icon-button-light" class="btnFastForward" title="${FastForward} (l)">
-                    <i class="xlargePaperIconButton material-icons">fast_forward</i>
+                    <i class="xlargePaperIconButton material-icons fast_forward"></i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnNextTrack autoSize hide">
-                    <i class="xlargePaperIconButton material-icons">skip_next</i>
+                    <i class="xlargePaperIconButton material-icons skip_next"></i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnAudio hide autoSize" title="${Audio}">
                     <i class="xlargePaperIconButton material-icons">audiotrack</i>
                 </button>
                 <button is="paper-icon-button-light" class="btnSubtitles hide autoSize" title="${Subtitles}">
-                    <i class="xlargePaperIconButton material-icons">closed_caption</i>
+                    <i class="xlargePaperIconButton material-icons closed_caption"></i>
                 </button>
 
                 <button is="paper-icon-button-light" class="btnVideoOsdSettings hide autoSize" title="${Settings}">
@@ -62,7 +62,7 @@
                     <i class="xlargePaperIconButton material-icons">fullscreen</i>
                 </button>
                 <button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
-                    <i class="xlargePaperIconButton material-icons">picture_in_picture_alt</i>
+                    <i class="xlargePaperIconButton material-icons picture_in_picture_alt"></i>
                 </button>
                 <button is="paper-icon-button-light" class="btnAirPlay hide autoSize" title="${AirPlay}">
                     <i class="xlargePaperIconButton material-icons">airplay</i>
@@ -76,7 +76,7 @@
 
                 <div class="volumeButtons hide-mouse-idle-tv">
                     <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute} (m)">
-                        <i class="xlargePaperIconButton material-icons">volume_up</i>
+                        <i class="xlargePaperIconButton material-icons volume_up"></i>
                     </button>
                     <div class="sliderContainer osdVolumeSliderContainer">
                         <input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="osdVolumeSlider" />

src/wizardfinish.html

@@ -5,7 +5,7 @@
             <p style="margin:2em 0;">${WizardCompleted}</p>
             <div class="wizardNavigation">
                 <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
-                    <i class="material-icons">arrow_back</i>
+                    <i class="material-icons arrow_back"></i>
                     <span>${LabelPrevious}</span>
                 </button>
                 <button is="emby-button" type="button" class="raised btnWizardNext button-submit">

src/wizardlibrary.html

@@ -11,7 +11,7 @@
             <br />
             <div class="wizardNavigation">
                 <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
-                    <i class="material-icons">arrow_back</i>
+                    <i class="material-icons arrow_back"></i>
                     <span>${LabelPrevious}</span>
                 </button>
                 <button is="emby-button" type="button" class="raised button-submit" onclick="WizardLibraryPage.next();">

src/wizardremoteaccess.html

@@ -21,7 +21,7 @@
                 <br />
                 <div class="wizardNavigation">
                     <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
-                        <i class="material-icons">arrow_back</i>
+                        <i class="material-icons arrow_back"></i>
                         <span>${LabelPrevious}</span>
                     </button>
                     <button is="emby-button" type="submit" class="raised button-submit">

src/wizardsettings.html

@@ -16,7 +16,7 @@
 
                 <div class="wizardNavigation">
                     <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
-                        <i class="material-icons">arrow_back</i>
+                        <i class="material-icons arrow_back"></i>
                         <span>${LabelPrevious}</span>
                     </button>
                     <button is="emby-button" type="submit" class="raised button-submit">

src/wizarduser.html

@@ -22,7 +22,7 @@
 
                 <div class="wizardNavigation">
                     <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
-                        <i class="material-icons">arrow_back</i>
+                        <i class="material-icons arrow_back"></i>
                         <span>${LabelPrevious}</span>
                     </button>
                     <button is="emby-button" type="submit" class="raised button-submit">