diff --git a/dashboard-ui/bower_components/emby-webcomponents/.bower.json b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
index b52509987f..27d8449c15 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
@@ -15,12 +15,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.35",
-  "_release": "1.4.35",
+  "version": "1.4.42",
+  "_release": "1.4.42",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.35",
-    "commit": "bcbcfaeee154165b27ee748bf3816ea713d3caec"
+    "tag": "1.4.42",
+    "commit": "8a273500a1a3fa8e197800ba75da1377dbff0def"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",
diff --git a/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css b/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css
index ad518de96b..75c6633279 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css
@@ -40,6 +40,9 @@ button.actionSheetMenuItem {
 
 .actionSheetItemText {
     padding: .8em 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .layout-tv button.actionSheetMenuItem {
@@ -56,6 +59,7 @@ button.actionSheetMenuItem {
     margin-bottom: 0 !important;
     display: flex;
     flex-direction: column;
+    width: 100%;
 }
 
 .layout-tv .actionSheetScroller {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js b/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js
index e167ab329b..5aa2ac2952 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'layoutManager', 'globalize', 'emby-button', 'css!./actionsheet', 'html!./../icons/nav.html', 'scrollStyles'], function (dialogHelper, layoutManager, globalize) {
+define(['dialogHelper', 'layoutManager', 'globalize', 'emby-button', 'css!./actionsheet', 'material-icons', 'scrollStyles'], function (dialogHelper, layoutManager, globalize) {
 
     function parentWithClass(elem, className) {
 
@@ -48,6 +48,7 @@
     function getPosition(options, dlg) {
 
         var windowHeight = window.innerHeight;
+        var windowWidth = window.innerWidth;
 
         if (windowHeight < 540) {
             return null;
@@ -58,13 +59,23 @@
         pos.top += options.positionTo.offsetHeight / 2;
         pos.left += options.positionTo.offsetWidth / 2;
 
+        var height = dlg.offsetHeight || 300;
+        var width = dlg.offsetWidth || 160;
+
         // Account for popup size 
-        pos.top -= ((dlg.offsetHeight || 300) / 2);
-        pos.left -= ((dlg.offsetWidth || 160) / 2);
+        pos.top -= height / 2;
+        pos.left -= width / 2;
 
         // Avoid showing too close to the bottom
-        pos.top = Math.min(pos.top, windowHeight - 300);
-        pos.left = Math.min(pos.left, window.innerWidth - 300);
+        var overflowX = pos.left + width - windowWidth;
+        var overflowY = pos.top + height - windowHeight;
+
+        if (overflowX > 0) {
+            pos.left -= (overflowX + 20);
+        }
+        if (overflowY > 0) {
+            pos.top -= (overflowY + 20);
+        }
 
         // Do some boundary checking
         pos.top = Math.max(pos.top, 10);
@@ -130,16 +141,18 @@
             }
         }
 
-        html += '<div class="actionSheetScroller hiddenScrollY">';
+        var scrollType = layoutManager.desktop ? 'smoothScrollY' : 'hiddenScrollY';
+
+        html += '<div class="actionSheetScroller ' + scrollType + '">';
 
         var i, length, option;
         var renderIcon = false;
         for (i = 0, length = options.items.length; i < length; i++) {
 
             option = options.items[i];
-            option.ironIcon = option.selected ? 'nav:check' : null;
+            option.icon = option.selected ? 'check' : null;
 
-            if (option.ironIcon) {
+            if (option.icon) {
                 renderIcon = true;
             }
         }
@@ -160,11 +173,11 @@
             var autoFocus = option.selected ? ' autoFocus' : '';
             html += '<' + itemTagName + autoFocus + ' is="emby-button" type="button" class="actionSheetMenuItem" data-id="' + (option.id || option.value) + '">';
 
-            if (option.ironIcon) {
-                html += '<iron-icon class="actionSheetItemIcon" icon="' + option.ironIcon + '"></iron-icon>';
+            if (option.icon) {
+                html += '<i class="actionSheetItemIcon md-icon">' + option.icon + '</i>';
             }
             else if (renderIcon && !center) {
-                html += '<iron-icon class="actionSheetItemIcon"></iron-icon>';
+                html += '<i class="actionSheetItemIcon md-icon" style="visibility:hidden;">check</i>';
             }
             html += '<div class="actionSheetItemText">' + (option.name || option.textContent || option.innerText) + '</div>';
             html += '</' + itemTagName + '>';
diff --git a/dashboard-ui/bower_components/emby-webcomponents/alert/alert.js b/dashboard-ui/bower_components/emby-webcomponents/alert/alert.js
index 01b90334a4..6995d3e1a5 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/alert/alert.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/alert/alert.js
@@ -1,10 +1,10 @@
-define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html', 'css!./../prompt/style.css', 'emby-button', 'paper-icon-button-light'], function (dialogHelper, layoutManager, globalize) {
+define(['dialogHelper', 'layoutManager', 'globalize', 'material-icons', 'css!./../prompt/style.css', 'emby-button', 'paper-icon-button-light'], function (dialogHelper, layoutManager, globalize) {
 
     function getIcon(icon, cssClass, canFocus, autoFocus) {
 
         var tabIndex = canFocus ? '' : ' tabindex="-1"';
         autoFocus = autoFocus ? ' autofocus' : '';
-        return '<button is="paper-icon-button-light" class="' + cssClass + '"' + tabIndex + autoFocus + '><iron-icon icon="' + icon + '"></iron-icon></button>';
+        return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><i class="md-icon">' + icon + '</i></button>';
     }
 
     return function (options) {
@@ -44,7 +44,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html'
 
         html += '<div class="promptDialogContent">';
         if (backButton) {
-            html += getIcon('dialog:arrow-back', 'btnPromptExit', false);
+            html += getIcon('arrow_back', 'btnPromptExit', false);
         }
 
         if (options.title) {
@@ -72,7 +72,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html'
 
         var buttonText = options.type == 'error' ? 'sharedcomponents#ButtonOk' : 'sharedcomponents#ButtonGotIt';
         if (raisedButtons) {
-            html += '<button is="emby-button" type="button" class="raised btnSubmit"><iron-icon icon="nav:check"></iron-icon><span>' + globalize.translate(buttonText) + '</span></button>';
+            html += '<button is="emby-button" type="button" class="raised btnSubmit"><i class="md-icon">check</i><span>' + globalize.translate(buttonText) + '</span></button>';
         } else {
             html += '<div class="buttons" style="text-align:right;">';
             html += '<button is="emby-button" type="button" class="btnSubmit">' + globalize.translate(buttonText) + '</button>';
diff --git a/dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js b/dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js
index 92764cfc27..8f790d7a77 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js
@@ -1,4 +1,4 @@
-define(['focusManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-button-light'], function (focusManager) {
+define(['focusManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-button-light', 'material-icons'], function (focusManager) {
 
     function focus() {
         var selected = this.querySelector('.selected');
@@ -24,8 +24,8 @@ define(['focusManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-butto
 
         html += '<div class="alphaPickerRow">';
         if (options.mode == 'keyboard') {
-            html += '<button data-value=" " is="paper-icon-button-light" class="alphaPickerButton">\
-                <iron-icon icon="space-bar"></iron-icon>\
+            html += '<button data-value=" " is="paper-icon-button-light" class="alphaPickerButton autoSize">\
+                <i class="md-icon">space_bar</i>\
             </button>';
         } else {
             letters = ['#'];
@@ -36,8 +36,8 @@ define(['focusManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-butto
         html += letters.map(getLetterButton).join('');
 
         if (options.mode == 'keyboard') {
-            html += '<button data-value="backspace" is="paper-icon-button-light" class="alphaPickerButton">\
-                <iron-icon icon="backspace"></iron-icon>\
+            html += '<button data-value="backspace" is="paper-icon-button-light" class="alphaPickerButton autoSize">\
+                <i class="md-icon">backspace</i>\
             </button>';
             html += '</div>';
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/alphapicker/style.css b/dashboard-ui/bower_components/emby-webcomponents/alphapicker/style.css
index 8ec59ca75a..b9b5296676 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/alphapicker/style.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/alphapicker/style.css
@@ -33,10 +33,10 @@ button.alphaPickerButton {
     opacity: .7;
 }
 
-[is=paper-icon-button-light].alphaPickerButton {
-    opacity: .25;
-    width: 4.4vh;
-    height: 4.4vh;
+[is=paper-icon-button-light].alphaPickerButton i {
+    width: 3.3vh;
+    height: 3.3vh;
+    font-size: 3.3vh;
 }
 
 .alphaPickerButton.selected {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/collectioneditor/collectioneditor.js b/dashboard-ui/bower_components/emby-webcomponents/collectioneditor/collectioneditor.js
index 5a1ef3be01..f36e3a7eab 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/collectioneditor/collectioneditor.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/collectioneditor/collectioneditor.js
@@ -1,4 +1,4 @@
-define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'html!./../icons/nav.html', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
+define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
 
     var currentServerId;
 
@@ -246,12 +246,12 @@
             var title = items.length ? globalize.translate('sharedcomponents#AddToCollection') : globalize.translate('sharedcomponents#NewCollection');
 
             html += '<div class="dialogHeader" style="margin:0 0 2em;">';
-            html += '<button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="nav:arrow-back"></iron-icon></button>';
+            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
             html += '<div class="dialogHeaderTitle">';
             html += title;
             html += '</div>';
 
-            html += '<a class="btnHelp" href="https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;display:inline-block;padding:.25em;display:flex;align-items:center;" title="' + globalize.translate('sharedcomponents#Help') + '"><iron-icon icon="nav:info"></iron-icon><span style="margin-left:.25em;">' + globalize.translate('sharedcomponents#Help') + '</span></a>';
+            html += '<a class="btnHelp" href="https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;display:inline-block;padding:.25em;display:flex;align-items:center;" title="' + globalize.translate('sharedcomponents#Help') + '"><i class="md-icon">info</i><span style="margin-left:.25em;">' + globalize.translate('sharedcomponents#Help') + '</span></a>';
 
             html += '</div>';
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.css b/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.css
index 04f4bc7394..c43326c403 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.css
@@ -95,7 +95,7 @@
     left: 0 !important;
     right: 0 !important;
     margin: 0 !important;
-    z-index: 999998 !important;
+    z-index: 999999 !important;
     transition: opacity ease-out 0.2s;
 }
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.js b/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.js
index a582167694..33589dbe72 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.js
@@ -142,8 +142,8 @@
 
         dlg.addEventListener('click', function (event) {
             var rect = dlg.getBoundingClientRect();
-            var isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height
-              && rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
+            var isInDialog = (rect.top <= event.clientY && event.clientY <= (rect.top + rect.height)
+              && rect.left <= event.clientX && event.clientX <= (rect.left + rect.width));
 
             if (!isInDialog) {
                 if (parentWithTag(event.target, 'SELECT')) {
@@ -180,7 +180,7 @@
 
         var backdrop = document.createElement('div');
         backdrop.classList.add('dialogBackdrop');
-        dlg.parentNode.insertBefore(backdrop, dlg.nextSibling);
+        dlg.parentNode.insertBefore(backdrop, dlg);
         dlg.backdrop = backdrop;
 
         // Doing this immediately causes the opacity to jump immediately without animating
diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css b/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css
index 9a931f6d81..ddb0d9ef97 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css
@@ -51,6 +51,12 @@
         margin: 0;
     }
 
+        [is="emby-button"].fab i {
+            height: 4.4vh;
+            width: 4.4vh;
+            vertical-align: middle;
+        }
+
     [is="emby-button"].noflex {
         display: inline-block;
     }
@@ -63,12 +69,21 @@
         padding: .4em;
     }
 
+        [is="emby-button"].fab.mini i {
+            height: 2.6vh !important;
+            width: 2.6vh !important;
+        }
+
     [is="emby-button"].fab iron-icon {
         width: 100%;
         height: 100%;
         vertical-align: middle;
     }
 
+    [is="emby-button"].fab i {
+        vertical-align: middle;
+    }
+
     [is="emby-button"].block {
         display: block;
         align-items: center;
@@ -86,6 +101,15 @@
         margin-left: .5em;
     }
 
+    [is="emby-button"] i + span {
+        margin-left: .5em;
+    }
+
+[is=emby-button].autoSize {
+    width: auto !important;
+    height: auto !important;
+}
+
 [is=paper-icon-button-light] {
     position: relative;
     display: inline-flex;
@@ -121,19 +145,41 @@
     text-transform: uppercase;
     border-radius: 50%;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    justify-content: center;
 }
 
+    [is=paper-icon-button-light].autoSize {
+        width: auto !important;
+        height: auto !important;
+    }
+
     [is=paper-icon-button-light][disabled] {
         opacity: .3;
     }
 
+    [is=paper-icon-button-light] i {
+        width: 24px;
+        height: 24px;
+        font-size: 24px;
+        /* Make sure its on top of the ripple */
+        position: relative;
+        z-index: 1;
+        vertical-align: middle;
+    }
+
 .layout-tv [is=paper-icon-button-light] {
-    width: 4vh;
-    height: 4vh;
-    min-width: 40px;
-    min-height: 40px;
+    width: auto;
+    height: auto;
+    min-width: initial;
+    min-height: initial;
 }
 
+    .layout-tv [is=paper-icon-button-light] i {
+        width: 3.7vh;
+        height: 3.7vh;
+        font-size: 3.7vh;
+    }
+
 [is=paper-icon-button-light] iron-icon {
     width: 100%;
     height: 100%;
diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.js b/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.js
index 3e5a7e0334..4e4cdeee03 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.js
@@ -1,4 +1,4 @@
-define(['browser', 'css!./emby-button'], function (browser) {
+define(['browser', 'css!./emby-button', 'registerElement'], function (browser) {
 
     var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-button/paper-icon-button-light.js b/dashboard-ui/bower_components/emby-webcomponents/emby-button/paper-icon-button-light.js
index 7eaea2b940..3a9f18929d 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-button/paper-icon-button-light.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/emby-button/paper-icon-button-light.js
@@ -1,4 +1,4 @@
-define(['css!./emby-button'], function () {
+define(['css!./emby-button', 'registerElement'], function () {
 
     var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-input/emby-input.js b/dashboard-ui/bower_components/emby-webcomponents/emby-input/emby-input.js
index 5aa708e874..29f12a08bd 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-input/emby-input.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/emby-input/emby-input.js
@@ -1,4 +1,4 @@
-define(['layoutManager', 'browser', 'css!./emby-input'], function (layoutManager, browser) {
+define(['layoutManager', 'browser', 'css!./emby-input', 'registerElement'], function (layoutManager, browser) {
 
     var EmbyInputPrototype = Object.create(HTMLInputElement.prototype);
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-select/emby-select.js b/dashboard-ui/bower_components/emby-webcomponents/emby-select/emby-select.js
index 59b673f9e4..88348b86cc 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-select/emby-select.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/emby-select/emby-select.js
@@ -1,4 +1,4 @@
-define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select'], function (layoutManager, browser, actionsheet) {
+define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registerElement'], function (layoutManager, browser, actionsheet) {
 
     var EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/fonts/material-icons/style.css b/dashboard-ui/bower_components/emby-webcomponents/fonts/material-icons/style.css
index 5e998e2ec5..2c84045d3d 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/fonts/material-icons/style.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/fonts/material-icons/style.css
@@ -1,20 +1,25 @@
 @font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Material Icons'), local('MaterialIcons-Regular'), url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff');
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Material Icons'), local('MaterialIcons-Regular'), url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff');
 }
 
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
\ No newline at end of file
+.md-icon {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "liga" 1;
+    line-height: 1;
+    overflow: hidden;
+    vertical-align: middle;
+}
diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css
index c526024d77..55126eb6d6 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css
@@ -141,6 +141,7 @@
 .currentTimeIndicatorArrow {
     width: 4vh;
     height: 4vh;
+    font-size: 4vh;
     color: #52B54B;
     margin-left: -2vh;
 }
@@ -366,16 +367,17 @@
     color: #bbb;
 }
 
-.programCell iron-icon {
+.programCell i {
     margin-left: auto;
     margin-right: .5em;
     height: 3.5vh;
     width: 3.5vh;
+    font-size: 3.5vh;
     color: #ddd;
     flex-shrink: 0;
 }
 
-    .programCell iron-icon + iron-icon {
+    .programCell i + i {
         margin-left: .25em;
     }
 
@@ -389,14 +391,21 @@
 .guideChannelName {
     margin-left: auto;
     margin-right: 1em;
-    max-width: 40%;
     text-overflow: ellipsis;
     overflow: hidden;
+    max-width: 70%;
+}
+
+@media all and (min-width: 1000px) {
+
+    .guideChannelName {
+        max-width: 40%;
+    }
 }
 
 @media all and (max-width: 1000px) {
 
-    .guideChannelName {
+    .guideChannelNumber {
         display: none;
     }
 }
diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js
index 37a791bf49..0217380ff7 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js
@@ -1,4 +1,4 @@
-define(['require', 'browser', 'globalize', 'connectionManager', 'serverNotifications', 'loading', 'scrollHelper', 'datetime', 'focusManager', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'registrationservices', 'clearButtonStyle', 'css!./guide.css', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html', 'scrollStyles', 'emby-button'], function (require, browser, globalize, connectionManager, serverNotifications, loading, scrollHelper, datetime, focusManager, imageLoader, events, layoutManager, itemShortcuts, registrationServices) {
+define(['require', 'browser', 'globalize', 'connectionManager', 'serverNotifications', 'loading', 'scrollHelper', 'datetime', 'focusManager', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'registrationservices', 'clearButtonStyle', 'css!./guide.css', 'material-icons', 'scrollStyles', 'emby-button'], function (require, browser, globalize, connectionManager, serverNotifications, loading, scrollHelper, datetime, focusManager, imageLoader, events, layoutManager, itemShortcuts, registrationServices) {
 
     function Guide(options) {
 
@@ -221,7 +221,7 @@
             html += '<div class="currentTimeIndicatorBar hide">';
             html += '</div>';
             html += '<div class="currentTimeIndicatorArrowContainer hide">';
-            html += '<iron-icon class="currentTimeIndicatorArrow" icon="nav:arrow-drop-down"></iron-icon>';
+            html += '<i class="currentTimeIndicatorArrow md-icon">arrow_drop_down</i>';
             html += '</div>';
 
             return html;
@@ -340,14 +340,14 @@
                 html += '</div>';
 
                 if (program.IsHD && options.showHdIcon) {
-                    html += '<iron-icon class="guideHdIcon" icon="mediainfo:hd"></iron-icon>';
+                    html += '<i class="guideHdIcon md-icon">hd</i>';
                 }
 
                 if (program.SeriesTimerId) {
-                    html += '<iron-icon class="seriesTimerIcon" icon="mediainfo:fiber-smart-record"></iron-icon>';
+                    html += '<i class="seriesTimerIcon md-icon">fiber_smart_record</i>';
                 }
                 else if (program.TimerId) {
-                    html += '<iron-icon class="timerIcon" icon="mediainfo:fiber-manual-record"></iron-icon>';
+                    html += '<i class="timerIcon md-icon">fiber_manual_record</i>';
                 }
 
                 if (addAccent) {
@@ -756,7 +756,7 @@
 
                 var icon = cell.querySelector('.timerIcon');
                 if (!icon) {
-                    cell.insertAdjacentHTML('beforeend', '<iron-icon class="timerIcon" icon="mediainfo:fiber-manual-record"></iron-icon>');
+                    cell.insertAdjacentHTML('beforeend', '<i class="timerIcon md-icon">fiber_manual_record</i>');
                 }
 
                 if (newTimerId) {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html b/dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html
index 664c0c906f..e6e31f8703 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html
+++ b/dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html
@@ -18,5 +18,8 @@
 
 <div class="guideRequiresUnlock readOnlyContent hide" style="margin:1em auto;text-align:center;padding:1em;flex-shrink:0;">
     <p class="unlockText"></p>
-    <button is="emby-button" type="button" class="raised secondary block btnUnlockGuide"><iron-icon icon="nav:check"></iron-icon><span>${UnlockGuide}</span></button>
+    <button is="emby-button" type="button" class="raised secondary block btnUnlockGuide">
+        <i class="md-icon">check</i>
+        <span>${UnlockGuide}</span>
+    </button>
 </div>
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/emby-webcomponents/icons/mediainfo.html b/dashboard-ui/bower_components/emby-webcomponents/icons/mediainfo.html
deleted file mode 100644
index b0805324c8..0000000000
--- a/dashboard-ui/bower_components/emby-webcomponents/icons/mediainfo.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<!--
-`iron-icons` is a utility import that includes the definition for the `iron-icon` element, `iron-iconset-svg` element, as well as an import for the default icon set.
-
-The `iron-icons` directory also includes imports for additional icon sets that can be loaded into your project.
-
-Example loading icon set:
-
-    <link rel="import" href="../iron-icons/maps-icons.html">
-
-To use an icon from one of these sets, first prefix your `iron-icon` with the icon set name, followed by a colon, ":", and then the icon id.
-
-Example using the directions-bus icon from the maps icon set:
-
-    <iron-icon icon="maps:directions-bus"></iron-icon>
-
-
-See [iron-icon](#iron-icon) for more information about working with icons.
-
-See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about how to create a custom iconset.
-
-@group Iron Elements
-@element iron-icons
-@demo demo/index.html
--->
-
-<iron-iconset-svg name="mediainfo" size="24">
-    <svg>
-        <defs>
-            <g id="fiber-manual-record"><circle cx="12" cy="12" r="8" /></g>
-            <g id="fiber-smart-record"><g><circle cx="9" cy="12" r="8" /><path d="M17 4.26v2.09c2.33.82 4 3.04 4 5.65s-1.67 4.83-4 5.65v2.09c3.45-.89 6-4.01 6-7.74s-2.55-6.85-6-7.74z" /></g></g>
-            <g id="hd"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z" /></g>
-            <g id="closed-caption"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z" /></g>
-            <g id="star"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" /></g>
-            <g id="star-half"><path d="M22 9.74l-7.19-.62L12 2.5 9.19 9.13 2 9.74l5.46 4.73-1.64 7.03L12 17.77l6.18 3.73-1.63-7.03L22 9.74zM12 15.9V6.6l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.9z" /></g>
-        </defs>
-    </svg>
-</iron-iconset-svg>
diff --git a/dashboard-ui/bower_components/emby-webcomponents/icons/nav.html b/dashboard-ui/bower_components/emby-webcomponents/icons/nav.html
deleted file mode 100644
index 39c6ced14e..0000000000
--- a/dashboard-ui/bower_components/emby-webcomponents/icons/nav.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<!--
-`iron-icons` is a utility import that includes the definition for the `iron-icon` element, `iron-iconset-svg` element, as well as an import for the default icon set.
-
-The `iron-icons` directory also includes imports for additional icon sets that can be loaded into your project.
-
-Example loading icon set:
-
-    <link rel="import" href="../iron-icons/maps-icons.html">
-
-To use an icon from one of these sets, first prefix your `iron-icon` with the icon set name, followed by a colon, ":", and then the icon id.
-
-Example using the directions-bus icon from the maps icon set:
-
-    <iron-icon icon="maps:directions-bus"></iron-icon>
-
-
-See [iron-icon](#iron-icon) for more information about working with icons.
-
-See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about how to create a custom iconset.
-
-@group Iron Elements
-@element iron-icons
-@demo demo/index.html
--->
-
-<iron-iconset-svg name="nav" size="24">
-    <svg>
-        <defs>
-            <g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /></g>
-            <g id="arrow-drop-down"><path d="M7 10l5 5 5-5z" /></g>
-            <g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /></g>
-            <g id="info"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" /></g>
-            <g id="delete"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" /></g>
-            <g id="more-vert"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></g>
-        </defs>
-    </svg>
-</iron-iconset-svg>
diff --git a/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js b/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js
index 20c5bd7eed..0afb8f4ae5 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js
@@ -1,4 +1,4 @@
-define(['css!./indicators.css', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function () {
+define(['css!./indicators.css', 'material-icons'], function () {
 
     function enableProgressIndicator(item) {
 
@@ -61,7 +61,7 @@ define(['css!./indicators.css', 'html!./../icons/mediainfo.html', 'html!./../ico
             }
 
             if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
-                return '<div class="playedIndicator indicator"><iron-icon icon="nav:check"></iron-icon></div>';
+                return '<div class="playedIndicator indicator"><i class="md-icon">check</i></div>';
             }
         }
 
@@ -91,10 +91,10 @@ define(['css!./indicators.css', 'html!./../icons/mediainfo.html', 'html!./../ico
     function getTimerIndicator(item) {
         
         if (item.SeriesTimerId) {
-            return '<iron-icon class="timerIndicator indicator" icon="mediainfo:fiber-smart-record"></iron-icon>';
+            return '<i class="md-icon timerIndicator indicator">fiber_smart_record</i>';
         }
         if (item.TimerId) {
-            return '<iron-icon class="timerIndicator indicator" icon="mediainfo:fiber-manual-record"></iron-icon>';
+            return '<i class="md-icon timerIndicator indicator">fiber_manual_record</i>';
         }
 
         return '';
diff --git a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css
index ffef61edcd..05f6974b60 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css
@@ -60,6 +60,7 @@ button.listItem {
 .listItemIcon {
     width: 3vh;
     height: 3vh;
+    font-size: 3vh;
 }
 
 .listItem.largeImage .listItemImage {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.css b/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.css
index 0910dab318..759ef7f8a0 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.css
@@ -2,9 +2,10 @@
     margin: 0 1em 0 0;
 }
 
-iron-icon.mediaInfoItem {
+i.mediaInfoItem {
     width: 3vh;
     height: 3vh;
+    font-size: 3vh;
     margin-right: .6em;
 }
 
@@ -21,10 +22,11 @@ iron-icon.mediaInfoItem {
     padding-bottom: 0;
 }
 
-    .starRatingContainer iron-icon {
+    .starRatingContainer i {
         color: #CB272A;
         width: 3vh;
         height: 3vh;
+        font-size: 3vh;
     }
 
 .mediaInfoItem.criticRating {
@@ -54,12 +56,14 @@ iron-icon.mediaInfoItem {
     text-transform: uppercase;
 }
 
-.layout-tv iron-icon.mediaInfoItem {
+.layout-tv i.mediaInfoItem {
     width: 4vh;
     height: 4vh;
+    font-size: 4vh;
 }
 
-.layout-tv .starRatingContainer iron-icon {
+.layout-tv .starRatingContainer i {
     width: 3.4vh;
     height: 3.4vh;
+    font-size: 3.4vh;
 }
diff --git a/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.js b/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.js
index 9d3172794f..43c8d7b9f2 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.js
@@ -1,4 +1,4 @@
-define(['datetime', 'globalize', 'embyRouter', 'html!./../icons/mediainfo.html', 'css!./mediainfo.css'], function (datetime, globalize, embyRouter) {
+define(['datetime', 'globalize', 'embyRouter', 'material-icons', 'css!./mediainfo.css'], function (datetime, globalize, embyRouter) {
 
     function getProgramInfoHtml(item, options) {
         var html = '';
@@ -42,12 +42,12 @@ define(['datetime', 'globalize', 'embyRouter', 'html!./../icons/mediainfo.html',
 
         if (item.SeriesTimerId) {
             miscInfo.push({
-                html: '<iron-icon class="mediaInfoItem timerIcon" icon="mediainfo:fiber-smart-record"></iron-icon>'
+                html: '<i class="md-icon mediaInfoItem timerIcon">fiber-smart-record</i>'
             });
         }
         else if (item.TimerId) {
             miscInfo.push({
-                html: '<iron-icon class="mediaInfoItem timerIcon" icon="mediainfo:fiber-manual-record"></iron-icon>'
+                html: '<i class="md-icon mediaInfoItem timerIcon">fiber-manual-record</i>'
             });
         }
 
@@ -244,7 +244,7 @@ define(['datetime', 'globalize', 'embyRouter', 'html!./../icons/mediainfo.html',
         html += getStarIconsHtml(item);
 
         if (item.HasSubtitles && options.subtitles !== false) {
-            html += '<iron-icon class="mediaInfoItem closedCaptionIcon" icon="mediainfo:closed-caption"></iron-icon>';
+            html += '<i class="md-icon mediaInfoItem closedCaptionIcon">closed_caption</i>';
         }
 
         if (item.CriticRating && options.criticRating !== false) {
@@ -321,7 +321,7 @@ define(['datetime', 'globalize', 'embyRouter', 'html!./../icons/mediainfo.html',
         if (rating) {
             html += '<div class="starRatingContainer mediaInfoItem">';
 
-            html += '<iron-icon icon="mediainfo:star"></iron-icon>';
+            html += '<i class="md-icon">star</i>';
             html += rating;
             html += '</div>';
         }
diff --git a/dashboard-ui/bower_components/emby-webcomponents/playlisteditor/playlisteditor.js b/dashboard-ui/bower_components/emby-webcomponents/playlisteditor/playlisteditor.js
index 91430942fd..2b503f45a9 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/playlisteditor/playlisteditor.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/playlisteditor/playlisteditor.js
@@ -1,4 +1,4 @@
-define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'html!./../icons/nav.html', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
+define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
 
     var lastPlaylistId = '';
     var currentServerId;
@@ -227,7 +227,7 @@
             var title = globalize.translate('sharedcomponents#AddToPlaylist');
 
             html += '<div class="dialogHeader" style="margin:0 0 2em;">';
-            html += '<button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="nav:arrow-back"></iron-icon></button>';
+            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
             html += '<div class="dialogHeaderTitle">';
             html += title;
             html += '</div>';
diff --git a/dashboard-ui/bower_components/emby-webcomponents/prompt/prompt.js b/dashboard-ui/bower_components/emby-webcomponents/prompt/prompt.js
index 615b577588..244bed0f49 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/prompt/prompt.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/prompt/prompt.js
@@ -1,10 +1,10 @@
-define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html', 'css!./style.css', 'emby-button', 'paper-icon-button-light', 'emby-input'], function (dialogHelper, layoutManager, globalize) {
+define(['dialogHelper', 'layoutManager', 'globalize', 'material-icons', 'css!./style.css', 'emby-button', 'paper-icon-button-light', 'emby-input'], function (dialogHelper, layoutManager, globalize) {
 
     function getIcon(icon, cssClass, canFocus, autoFocus) {
 
         var tabIndex = canFocus ? '' : ' tabindex="-1"';
         autoFocus = autoFocus ? ' autofocus' : '';
-        return '<button is="paper-icon-button-light" class="' + cssClass + '"' + tabIndex + autoFocus + '><iron-icon icon="' + icon + '"></iron-icon></button>';
+        return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><i class="md-icon">' + icon + '</i></button>';
     }
 
     return function (options) {
@@ -43,7 +43,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html'
 
         html += '<div class="promptDialogContent">';
         if (backButton) {
-            html += getIcon('dialog:arrow-back', 'btnPromptExit', false);
+            html += getIcon('arrow_back', 'btnPromptExit', false);
         }
 
         if (options.title) {
@@ -66,7 +66,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html'
 
         html += '<br/>';
         if (raisedButtons) {
-            html += '<button is="emby-button" type="submit" class="raised btnSubmit"><iron-icon icon="nav:check"></iron-icon><span>' + globalize.translate('sharedcomponents#ButtonOk') + '</span></button>';
+            html += '<button is="emby-button" type="submit" class="raised btnSubmit"><i class="md-icon">check</i><span>' + globalize.translate('sharedcomponents#ButtonOk') + '</span></button>';
         } else {
             html += '<div class="buttons">';
             html += '<button is="emby-button" type="submit" class="btnSubmit">' + globalize.translate('sharedcomponents#ButtonOk') + '</button>';
diff --git a/dashboard-ui/bower_components/emby-webcomponents/prompt/style.css b/dashboard-ui/bower_components/emby-webcomponents/prompt/style.css
index 0f147a76c6..106019fb5f 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/prompt/style.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/prompt/style.css
@@ -33,6 +33,10 @@
     position: absolute;
     top: .5em;
     left: .5em;
-    width: 5.2vh;
-    height: 5.2vh;
 }
+
+    .promptDialog.fullscreen .btnPromptExit i {
+        width: 4.4vh;
+        height: 4.4vh;
+        font-size: 4.4vh;
+    }
diff --git a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.css b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.css
index 85f9f1b7aa..986a41151a 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.css
@@ -1,4 +1,4 @@
-.recordingDialog .btnSubmit iron-icon {
+.recordingDialog .btnSubmit .md-icon {
     color: #cc3333;
 }
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.js b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.js
index 645db20f20..138a03fbd1 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'paper-checkbox', 'emby-button', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
+define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'paper-checkbox', 'emby-button', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
 
     var currentProgramId;
     var currentServerId;
diff --git a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html
index 97869d2792..fd5b5d9d69 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html
+++ b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html
@@ -1,5 +1,5 @@
 <div class="dialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="nav:arrow-back"></iron-icon></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <div class="dialogHeaderTitle">
         ${HeaderNewRecording}
     </div>
@@ -70,9 +70,15 @@
             <div class="supporterContainer hide">
                 <p>${MessageActiveSubscriptionRequiredSeriesRecordings}</p>
                 <p class="supporterTrial hide">${HeaderEnjoyDayTrial}</p>
-                <button is="emby-button" type="button" raised class="btnSupporter hide raised accent block"><iron-icon icon="nav:check"></iron-icon><span>${HeaderBecomeProjectSupporter}</span></button>
+                <button is="emby-button" type="button" raised class="btnSupporter hide raised accent block">
+                    <i class="md-icon">check</i>
+                    <span>${HeaderBecomeProjectSupporter}</span>
+                </button>
             </div>
-            <button is="emby-button" type="submit" class="raised btnSubmit block" autofocus><iron-icon icon="mediainfo:fiber-manual-record"></iron-icon><span>${Record}</span></button>
+            <button is="emby-button" type="submit" class="raised btnSubmit block" autofocus>
+                <i class="md-icon">fiber_manual_record</i>
+                <span>${Record}</span>
+            </button>
         </div>
     </form>
 </div>
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.js b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.js
index 0fa4b6d6a6..014e78a3a3 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'scrollStyles', 'paper-checkbox', 'emby-button', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
+define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'scrollStyles', 'paper-checkbox', 'emby-button', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
 
     var currentDialog;
     var recordingUpdated = false;
diff --git a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html
index 2b3ead4e1f..78639d6aa9 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html
+++ b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html
@@ -1,11 +1,11 @@
 <div class="dialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="arrow-back"></iron-icon></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <div class="dialogHeaderTitle">
         ${Edit}
     </div>
     <div style="margin-left:auto; display: flex; align-items: center; justify-content: center;">
         <button is="emby-button" type="button" class="btnHeaderSave accent" tabindex="-1">
-            <iron-icon icon="check"></iron-icon>
+            <i class="md-icon">check</i>
             <span>${Save}</span>
         </button>
     </div>
@@ -32,7 +32,10 @@
                 <input is="emby-input" type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}" />
             </div>
             <br />
-            <button is="emby-button" type="submit" class="raised btnSubmit block" autofocus><iron-icon icon="mediainfo:fiber-manual-record"></iron-icon><span>${Save}</span></button>
+            <button is="emby-button" type="submit" class="raised btnSubmit block" autofocus>
+                <i class="md-icon">fiber_manual_record</i>
+                <span>${Save}</span>
+            </button>
         </form>
     </div>
 </div>
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/emby-webcomponents/slideshow/icons.html b/dashboard-ui/bower_components/emby-webcomponents/slideshow/icons.html
deleted file mode 100644
index edee1f7b44..0000000000
--- a/dashboard-ui/bower_components/emby-webcomponents/slideshow/icons.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<!--
-`iron-icons` is a utility import that includes the definition for the `iron-icon` element, `iron-iconset-svg` element, as well as an import for the default icon set.
-
-The `iron-icons` directory also includes imports for additional icon sets that can be loaded into your project.
-
-Example loading icon set:
-
-    <link rel="import" href="../iron-icons/maps-icons.html">
-
-To use an icon from one of these sets, first prefix your `iron-icon` with the icon set name, followed by a colon, ":", and then the icon id.
-
-Example using the directions-bus icon from the maps icon set:
-
-    <iron-icon icon="maps:directions-bus"></iron-icon>
-
-
-See [iron-icon](#iron-icon) for more information about working with icons.
-
-See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about how to create a custom iconset.
-
-@group Iron Elements
-@element iron-icons
-@demo demo/index.html
--->
-
-<iron-iconset-svg name="slideshow" size="24">
-    <svg>
-        <defs>
-            <g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /></g>
-            <g id="pause"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></g>
-            <g id="keyboard-arrow-left"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z" /></g>
-            <g id="keyboard-arrow-right"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" /></g>
-            <g id="play-arrow"><path d="M8 5v14l11-7z" /></g>
-            <g id="file-download"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" /></g>
-            <g id="share"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" /></g>
-        </defs>
-    </svg>
-</iron-iconset-svg>
diff --git a/dashboard-ui/bower_components/emby-webcomponents/slideshow/slideshow.js b/dashboard-ui/bower_components/emby-webcomponents/slideshow/slideshow.js
index 1167b61b65..d48bd5dd98 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/slideshow/slideshow.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/slideshow/slideshow.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'apphost', 'css!./style', 'html!./icons', 'iron-icon-set', 'paper-icon-button-light', 'paper-spinner'], function (dialogHelper, inputmanager, connectionManager, layoutManager, focusManager, appHost) {
+define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'apphost', 'css!./style', 'material-icons', 'paper-icon-button-light', 'paper-spinner'], function (dialogHelper, inputmanager, connectionManager, layoutManager, focusManager, appHost) {
 
     function getImageUrl(item, options, apiClient) {
 
@@ -91,7 +91,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
 
         var tabIndex = canFocus ? '' : ' tabindex="-1"';
         autoFocus = autoFocus ? ' autofocus' : '';
-        return '<button is="paper-icon-button-light" class="' + cssClass + '"' + tabIndex + autoFocus + '><iron-icon icon="' + icon + '"></iron-icon></button>';
+        return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><i class="md-icon">' + icon + '</i></button>';
     }
 
     return function (options) {
@@ -125,30 +125,30 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
                 html += '<div>';
                 html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>';
 
-                html += getIcon('slideshow:keyboard-arrow-left', 'btnSlideshowPrevious slideshowButton', false);
-                html += getIcon('slideshow:keyboard-arrow-right', 'btnSlideshowNext slideshowButton', false);
+                html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton', false);
+                html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton', false);
 
                 html += '<div class="topActionButtons">';
                 if (actionButtonsOnTop) {
                     if (appHost.supports('filedownload')) {
-                        html += getIcon('slideshow:file-download', 'btnDownload slideshowButton', true);
+                        html += getIcon('file_download', 'btnDownload slideshowButton', true);
                     }
                     if (appHost.supports('sharing')) {
-                        html += getIcon('slideshow:share', 'btnShare slideshowButton', true);
+                        html += getIcon('share', 'btnShare slideshowButton', true);
                     }
                 }
-                html += getIcon('slideshow:close', 'slideshowButton btnSlideshowExit', false);
+                html += getIcon('close', 'slideshowButton btnSlideshowExit', false);
                 html += '</div>';
 
                 if (!actionButtonsOnTop) {
                     html += '<div class="slideshowBottomBar hide">';
 
-                    html += getIcon('slideshow:pause', 'btnSlideshowPause slideshowButton', true, true);
+                    html += getIcon('pause', 'btnSlideshowPause slideshowButton', true, true);
                     if (appHost.supports('filedownload')) {
-                        html += getIcon('slideshow:file-download', 'btnDownload slideshowButton', true);
+                        html += getIcon('file_download', 'btnDownload slideshowButton', true);
                     }
                     if (appHost.supports('sharing')) {
-                        html += getIcon('slideshow:share', 'btnShare slideshowButton', true);
+                        html += getIcon('share', 'btnShare slideshowButton', true);
                     }
 
                     html += '</div>';
@@ -362,9 +362,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
 
         function play() {
 
-            var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause iron-icon');
+            var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause i');
             if (btnSlideshowPause) {
-                btnSlideshowPause.icon = "slideshow:pause";
+                btnSlideshowPause.innerHTML = "pause";
             }
 
             swiperInstance.startAutoplay();
@@ -372,9 +372,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
 
         function pause() {
 
-            var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause iron-icon');
+            var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause i');
             if (btnSlideshowPause) {
-                btnSlideshowPause.icon = "slideshow:play-arrow";
+                btnSlideshowPause.innerHTML = "play_arrow";
             }
 
             swiperInstance.stopAutoplay();
@@ -382,7 +382,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
 
         function playPause() {
 
-            var paused = dlg.querySelector('.btnSlideshowPause iron-icon').icon != "slideshow:pause";
+            var paused = dlg.querySelector('.btnSlideshowPause i').innerHTML != "pause";
             if (paused) {
                 play();
             } else {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/slideshow/style.css b/dashboard-ui/bower_components/emby-webcomponents/slideshow/style.css
index 08c7f64ec9..bd7c540ce5 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/slideshow/style.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/slideshow/style.css
@@ -45,24 +45,27 @@
     top: 50%;
 }
 
-.slideshowDialog .slideshowButton {
-    width: 5.2vh;
-    height: 5.2vh;
+.slideshowDialog .slideshowButton i {
+    width: 4.5vh;
+    height: 4.5vh;
+    font-size: 4.5vh;
     color: #fff;
     opacity: .7;
     min-width: 40px;
     min-height: 40px;
 }
 
-.layout-tv .slideshowDialog .slideshowButtonn {
-    width: 7vh;
-    height: 7vh;
+.layout-tv .slideshowDialog .slideshowButton i {
+    width: 6.3vh;
+    height: 6.3vh;
+    font-size: 6.3vh;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 120dpi) {
-    .slideshowDialog paper-icon-button {
-        width: 11vmin;
-        height: 11vmin;
+    .slideshowDialog [is=paper-icon-button-light] i {
+        width: 10.3vmin;
+        height: 10.3vmin;
+        font-size: 10.3vmin;
     }
 }
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.js b/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.js
index 17588493cf..6bffe17302 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'scrollHelper', 'appStorage', 'connectionManager', 'loading', 'focusManager', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html', 'css!./subtitleeditor', 'emby-button'], function (dialogHelper, require, layoutManager, globalize, scrollHelper, appStorage, connectionManager, loading, focusManager) {
+define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'scrollHelper', 'appStorage', 'connectionManager', 'loading', 'focusManager', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'css!./subtitleeditor', 'emby-button'], function (dialogHelper, require, layoutManager, globalize, scrollHelper, appStorage, connectionManager, loading, focusManager) {
 
     var currentItem;
     var hasChanges;
@@ -121,7 +121,7 @@
 
                 itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
 
-                itemHtml += '<iron-icon class="listItemIcon" icon="mediainfo:closed-caption"></iron-icon>';
+                itemHtml += '<i class="listItemIcon md-icon">closed_caption</i>';
 
                 itemHtml += '<div class="listItemBody">';
 
@@ -138,7 +138,7 @@
 
                 if (!layoutManager.tv) {
                     if (s.Path) {
-                        itemHtml += '<button is="paper-icon-button-light" data-index="' + s.Index + '" title="' + globalize.translate('sharedcomponents#Delete') + '" class="btnDelete"><iron-icon icon="nav:delete"></iron-icon></button>';
+                        itemHtml += '<button is="paper-icon-button-light" data-index="' + s.Index + '" title="' + globalize.translate('sharedcomponents#Delete') + '" class="btnDelete"><i class="md-icon">delete</i></button>';
                     }
                 }
 
@@ -235,7 +235,7 @@
 
             html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
 
-            html += '<iron-icon class="listItemIcon" icon="mediainfo:closed-caption"></iron-icon>';
+            html += '<i class="listItemIcon md-icon">closed_caption</i>';
 
             html += '<div class="listItemBody">';
 
@@ -255,7 +255,7 @@
             html += '<div class="secondary">' + /*(result.CommunityRating || 0) + ' / ' +*/ (result.DownloadCount || 0) + '</div>';
 
             if (!layoutManager.tv) {
-                html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnOptions"><iron-icon icon="nav:more-vert"></iron-icon></button>';
+                html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnOptions"><i class="md-icon">more_vert</i></button>';
             }
 
             html += '</' + tagName + '>';
diff --git a/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.template.html b/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.template.html
index 45a0756d23..694627304b 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.template.html
+++ b/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.template.html
@@ -1,5 +1,5 @@
 <div class="dialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="nav:arrow-back"></iron-icon></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
     <div class="dialogHeaderTitle">${Subtitles}</div>
 </div>
 <div class="dialogContent smoothScrollY">
@@ -15,7 +15,7 @@
                 <div class="selectContainer" style="flex-grow: 1; margin-bottom: 0;">
                     <select is="emby-select" id="selectLanguage" required="required" label="${LabelLanguage}"></select>
                 </div>
-                <button type="submit" is="paper-icon-button-light" title="${Search}" class="btnSearchSubtitles" style="flex-shrink: 0;"><iron-icon icon="search"></iron-icon></button>
+                <button type="submit" is="paper-icon-button-light" title="${Search}" class="btnSearchSubtitles" style="flex-shrink: 0;"><i class="md-icon">search</i></button>
             </div>
             <button is="emby-button" type="submit" class="raised btnSubmit block">${Search}</button>
         </form>
diff --git a/dashboard-ui/bower_components/emby-webcomponents/toast/toast.css b/dashboard-ui/bower_components/emby-webcomponents/toast/toast.css
new file mode 100644
index 0000000000..0989cb425d
--- /dev/null
+++ b/dashboard-ui/bower_components/emby-webcomponents/toast/toast.css
@@ -0,0 +1,26 @@
+.toast {
+    position: fixed;
+    min-width: 288px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+    border-radius: 2px;
+    font-size: 14px;
+    cursor: default;
+    -webkit-transition: -webkit-transform .3s ease-out;
+    transition: transform .3s ease-out;
+    background: #303030;
+    color: #fff;
+    min-height: initial;
+    padding: 1em 1.5em;
+    bottom: 1em;
+    left: 1em;
+    font-size: 110%;
+    z-index: 9999999;
+    -webkit-transform: translateY(200px);
+    transform: translateY(200px);
+}
+
+    .toast.visible {
+        -webkit-transform: none;
+        transform: none;
+    }
diff --git a/dashboard-ui/bower_components/emby-webcomponents/toast/toast.js b/dashboard-ui/bower_components/emby-webcomponents/toast/toast.js
index 957df7f09a..23d2afc75e 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/toast/toast.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/toast/toast.js
@@ -1,6 +1,21 @@
-define(['paper-toast'], function () {
+define(['css!./toast'], function () {
 
-    var toastId = 0;
+    function remove(elem) {
+
+        setTimeout(function () {
+            elem.parentNode.removeChild(elem);
+        }, 300);
+    }
+
+    function animateRemove(elem) {
+
+        setTimeout(function () {
+
+            elem.classList.remove('visible');
+            remove(elem);
+
+        }, 3300);
+    }
 
     return function (options) {
 
@@ -10,16 +25,17 @@ define(['paper-toast'], function () {
             };
         }
 
-        var elem = document.createElement("paper-toast");
-        elem.setAttribute('text', options.text);
-        elem.id = 'toast' + (toastId++);
+        var elem = document.createElement("div");
+        elem.classList.add('toast');
+        elem.innerHTML = options.text;
 
         document.body.appendChild(elem);
 
-        // This timeout is obviously messy but it's unclear how to determine when the webcomponent is ready for use
-        // element onload never fires
         setTimeout(function () {
-            elem.show();
+            elem.classList.add('visible');
+
+            animateRemove(elem);
+
         }, 300);
     };
 });
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/iron-resizable-behavior/.bower.json b/dashboard-ui/bower_components/iron-resizable-behavior/.bower.json
index cca11d8994..2e765b9324 100644
--- a/dashboard-ui/bower_components/iron-resizable-behavior/.bower.json
+++ b/dashboard-ui/bower_components/iron-resizable-behavior/.bower.json
@@ -28,14 +28,14 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
   "ignore": [],
-  "homepage": "https://github.com/polymerelements/iron-resizable-behavior",
+  "homepage": "https://github.com/PolymerElements/iron-resizable-behavior",
   "_release": "1.0.3",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.3",
     "commit": "dda1df6aaf452aedf3e52ff0cf69e72439452216"
   },
-  "_source": "git://github.com/polymerelements/iron-resizable-behavior.git",
+  "_source": "git://github.com/PolymerElements/iron-resizable-behavior.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-resizable-behavior"
+  "_originalSource": "PolymerElements/iron-resizable-behavior"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/polymer/.bower.json b/dashboard-ui/bower_components/polymer/.bower.json
index 4782b3c50f..e3120e6882 100644
--- a/dashboard-ui/bower_components/polymer/.bower.json
+++ b/dashboard-ui/bower_components/polymer/.bower.json
@@ -39,6 +39,6 @@
     "commit": "ce5b9fb2d8aa03c698410e2e55cffcfa0b788a3a"
   },
   "_source": "git://github.com/Polymer/polymer.git",
-  "_target": "^1.0.0",
+  "_target": "^1.1.0",
   "_originalSource": "Polymer/polymer"
 }
\ No newline at end of file
diff --git a/dashboard-ui/components/channelmapper/channelmapper.js b/dashboard-ui/components/channelmapper/channelmapper.js
index f75d0274da..b442bb4ab6 100644
--- a/dashboard-ui/components/channelmapper/channelmapper.js
+++ b/dashboard-ui/components/channelmapper/channelmapper.js
@@ -1,80 +1,130 @@
-define(['dialogHelper', 'loading', 'connectionManager', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'emby-button', 'listViewStyle'],
-function (dialogHelper, loading, connectionManager, globalize) {
+define(['dialogHelper', 'loading', 'connectionManager', 'globalize', 'actionsheet', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'emby-button', 'listViewStyle', 'material-icons'],
+function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
 
-    var currentServerId;
-
-    function getChannelMappingOptions(serverId, providerId) {
-
-        return connectionManager.getApiClient(serverId).getJSON(ApiClient.getUrl('LiveTv/ChannelMappingOptions', {
-            providerId: providerId
-        }));
-    }
-
-    function getTunerChannelHtml(channel, providerName) {
-
-        var html = '';
-
-        html += '<div class="listItem">';
-
-        html += '<button is="emby-button" type="button" class="fab listItemIcon mini" style="background:#52B54B;"><iron-icon icon="dvr"></iron-icon></button>';
-
-        html += '<div class="listItemBody">';
-        html += '<h3>';
-        html += channel.Name;
-        html += '</h3>';
-
-        if (channel.ProviderChannelNumber || channel.ProviderChannelName) {
-            html += '<div class="secondary">';
-            html += (channel.ProviderChannelNumber || '') + ' ' + (channel.ProviderChannelName || '') + ' - ' + providerName;
-            html += '</div>';
-        }
-
-        html += '</div>';
-
-        html += '<button is="paper-icon-button-light" type="button" onclick="alert(\'coming soon.\');"><iron-icon icon="mode-edit"></iron-icon></button>';
-
-        html += '</div>';
-
-        return html;
-    }
-
-    function getEditorHtml() {
-
-        var html = '';
-
-        html += '<div class="dialogContent">';
-        html += '<div class="dialogContentInner centeredContent">';
-        html += '<form style="margin:auto;">';
-
-        html += '<h1>' + globalize.translate('HeaderChannels') + '</h1>';
-
-        html += '<div class="channels paperList">';
-        html += '</div>';
-
-        html += '</form>';
-        html += '</div>';
-        html += '</div>';
-
-        return html;
-    }
-
-    function initEditor(dlg, options) {
-
-        getChannelMappingOptions(options.serverId, options.providerId).then(function (result) {
-
-            dlg.querySelector('.channels').innerHTML = result.TunerChannels.map(function (channel) {
-                return getTunerChannelHtml(channel, result.ProviderName);
-            }).join('');
-        });
-    }
-
-    return function () {
+    return function (options) {
 
         var self = this;
 
-        self.show = function (options) {
+        var currentMappingOptions;
 
-            currentServerId = options.serverId;
+        function parentWithClass(elem, className) {
+
+            while (!elem.classList || !elem.classList.contains(className)) {
+                elem = elem.parentNode;
+
+                if (!elem) {
+                    return null;
+                }
+            }
+
+            return elem;
+        }
+
+        function mapChannel(tunerChannelNumber, providerChannelNumber) {
+
+            alert('coming soon.');
+        }
+
+        function onChannelsElementClick(e) {
+
+            var btnMap = parentWithClass(e.target, 'btnMap');
+
+            if (!btnMap) {
+                return;
+            }
+
+            var channelNumber = btnMap.getAttribute('data-number');
+
+            var menuItems = currentMappingOptions.ProviderChannels.map(function (m) {
+
+                return {
+                    name: m.Name,
+                    id: m.Id,
+                    selected: m.Id == channelNumber
+                };
+            });
+
+            actionsheet.show({
+                positionTo: btnMap,
+                items: menuItems
+
+            }).then(function (newChannelNumber) {
+                mapChannel(channelNumber, newChannelNumber);
+            });
+        }
+
+        function getChannelMappingOptions(serverId, providerId) {
+
+            return connectionManager.getApiClient(serverId).getJSON(ApiClient.getUrl('LiveTv/ChannelMappingOptions', {
+                providerId: providerId
+            }));
+        }
+
+        function getTunerChannelHtml(channel, providerName) {
+
+            var html = '';
+
+            html += '<div class="listItem">';
+
+            html += '<button is="emby-button" type="button" class="fab listItemIcon mini" style="background:#52B54B;"><iron-icon icon="dvr"></iron-icon></button>';
+
+            html += '<div class="listItemBody">';
+            html += '<h3>';
+            html += channel.Name;
+            html += '</h3>';
+
+            if (channel.ProviderChannelNumber || channel.ProviderChannelName) {
+                html += '<div class="secondary">';
+                html += (channel.ProviderChannelNumber || '') + ' ' + (channel.ProviderChannelName || '') + ' - ' + providerName;
+                html += '</div>';
+            }
+
+            html += '</div>';
+
+            html += '<button class="btnMap" is="paper-icon-button-light" type="button" data-number="' + channel.Number + '"><iron-icon icon="mode-edit"></iron-icon></button>';
+
+            html += '</div>';
+
+            return html;
+        }
+
+        function getEditorHtml() {
+
+            var html = '';
+
+            html += '<div class="dialogContent">';
+            html += '<div class="dialogContentInner centeredContent">';
+            html += '<form style="margin:auto;">';
+
+            html += '<h1>' + globalize.translate('HeaderChannels') + '</h1>';
+
+            html += '<div class="channels paperList">';
+            html += '</div>';
+
+            html += '</form>';
+            html += '</div>';
+            html += '</div>';
+
+            return html;
+        }
+
+        function initEditor(dlg, options) {
+
+            getChannelMappingOptions(options.serverId, options.providerId).then(function (result) {
+
+                currentMappingOptions = result;
+
+                var channelsElement = dlg.querySelector('.channels');
+
+                channelsElement.innerHTML = result.TunerChannels.map(function (channel) {
+                    return getTunerChannelHtml(channel, result.ProviderName);
+                }).join('');
+
+                channelsElement.addEventListener('click', onChannelsElementClick);
+            });
+        }
+
+        self.show = function () {
 
             var dialogOptions = {
                 removeOnClose: true
@@ -92,7 +142,7 @@ function (dialogHelper, loading, connectionManager, globalize) {
             var title = globalize.translate('MapChannels');
 
             html += '<div class="dialogHeader" style="margin:0 0 2em;">';
-            html += '<button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="nav:arrow-back"></iron-icon></button>';
+            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
             html += '<div class="dialogHeaderTitle">';
             html += title;
             html += '</div>';
diff --git a/dashboard-ui/scripts/livetvstatus.js b/dashboard-ui/scripts/livetvstatus.js
index ea2b54ed34..ab323dc2d0 100644
--- a/dashboard-ui/scripts/livetvstatus.js
+++ b/dashboard-ui/scripts/livetvstatus.js
@@ -374,10 +374,10 @@
     function mapChannels(page, providerId) {
 
         require(['components/channelmapper/channelmapper'], function (channelmapper) {
-            new channelmapper().show({
+            new channelmapper({
                 serverId: ApiClient.serverInfo().Id,
                 providerId: providerId
-            });
+            }).show();
         });
     }
 
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index e81a251451..3912fbb1ac 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1973,6 +1973,7 @@ var AppInfo = {};
         define("appSettings", [embyWebComponentsBowerPath + "/appsettings"], updateAppSettings);
         define("userSettings", [embyWebComponentsBowerPath + "/usersettings"], returnFirstDependency);
 
+        define("material-icons", ['css!' + embyWebComponentsBowerPath + '/fonts/material-icons/style']);
         define("robotoFont", ['css!' + embyWebComponentsBowerPath + '/fonts/roboto/style']);
         define("opensansFont", ['css!' + embyWebComponentsBowerPath + '/fonts/opensans/style']);
         define("montserratFont", ['css!' + embyWebComponentsBowerPath + '/fonts/montserrat/style']);