Upgrade to material design icons

src/components/domain-icon.html

@@ -2,8 +2,6 @@
 
 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
 
-<link rel="import" href="../resources/home-assistant-icons.html">
-
 <dom-module id="domain-icon">
   <template>
     <iron-icon icon="[[computeIcon(domain, state)]]"></iron-icon>

src/components/entity/ha-state-icon.html

@@ -2,8 +2,6 @@
 
 <link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
 
-<link rel="import" href="../../resources/home-assistant-icons.html">
-
 <dom-module id="ha-state-icon">
   <template>
     <iron-icon icon="[[computeIcon(stateObj)]]"></iron-icon>

src/components/entity/ha-state-label-badge.js

@@ -82,7 +82,7 @@ export default new Polymer({
       return domainIcon(state.domain, state.state);
     case 'sun':
       return state.state === 'above_horizon' ?
-        'image:wb-sunny' : 'image:brightness-3';
+        domainIcon(state.domain) : 'mdi:brightness-3';
     default:
       return undefined;
     }

src/components/ha-demo-badge.html

@@ -10,7 +10,7 @@
   </style>
   <template>
     <ha-label-badge
-      icon='image:tag-faces'
+      icon='mdi:emoticon'
       label='Demo'
       description=''
     ></ha-label-badge>

src/components/ha-sidebar.html

@@ -23,6 +23,7 @@
 
     div.title {
       text-align: left;
+      margin-left: 24px !important;
     }
 
     div.menu {
@@ -64,35 +65,35 @@
     <paper-header-panel mode='scroll' class='sidenav fit'>
       <paper-toolbar>
         <!-- forces paper toolbar to style title appropriate -->
-        <paper-icon-button icon='menu' hidden$='[[!narrow]]' on-tap='toggleMenu'></paper-icon-button>
+        <paper-icon-button icon='mdi:menu' hidden$='[[!narrow]]' on-tap='toggleMenu'></paper-icon-button>
         <div class="title">Home Assistant</div>
       </paper-toolbar>
       <div class='menu'>
         <paper-icon-item on-click='menuClicked' data-panel='states'>
-          <iron-icon item-icon icon='apps'></iron-icon> States
+          <iron-icon item-icon icon='mdi:apps'></iron-icon> States
         </paper-icon-item>
 
         <paper-icon-item on-click='menuClicked' data-panel='map'>
-          <iron-icon item-icon icon='maps:person-pin'></iron-icon>
+          <iron-icon item-icon icon='mdi:account-location'></iron-icon>
           Map
         </paper-icon-item>
 
         <template is='dom-if' if='[[hasHistoryComponent]]'>
           <paper-icon-item on-click='menuClicked' data-panel='history'>
-            <iron-icon item-icon icon='assessment'></iron-icon>
+            <iron-icon item-icon icon='mdi:poll-box'></iron-icon>
             History
           </paper-icon-item>
         </template>
 
         <template is='dom-if' if='[[hasLogbookComponent]]'>
           <paper-icon-item on-click='menuClicked' data-panel='logbook'>
-            <iron-icon item-icon icon='list'></iron-icon>
+            <iron-icon item-icon icon='mdi:format-list-bulleted-type'></iron-icon>
             Logbook
           </paper-icon-item>
         </template>
 
         <paper-icon-item on-click='menuClicked' data-panel='logout' class='logout'>
-          <iron-icon item-icon icon='exit-to-app'></iron-icon>
+          <iron-icon item-icon icon='mdi:exit-to-app'></iron-icon>
           Log Out
         </paper-icon-item>
 
@@ -104,13 +105,13 @@
         <div class='text label divider'>Developer Tools</div>
         <div class='dev-tools layout horizontal justified'>
           <paper-icon-button
-            icon='settings-remote' data-panel='devService'
+            icon='mdi:remote' data-panel='devService'
             on-click='handleDevClick'></paper-icon-button>
           <paper-icon-button
-            icon='settings-ethernet' data-panel='devState'
+            icon='mdi:code-tags' data-panel='devState'
             on-click='handleDevClick'></paper-icon-button>
           <paper-icon-button
-            icon='settings-input-antenna' data-panel='devEvent'
+            icon='mdi:nfc' data-panel='devEvent'
             on-click='handleDevClick'></paper-icon-button>
         </div>
       </div>

src/components/ha-voice-command-progress.html

@@ -23,7 +23,7 @@
   </style>
 
   <template>
-    <iron-icon icon="av:hearing"></iron-icon>
+    <iron-icon icon="mdi:text-to-speech"></iron-icon>
     <span>{{finalTranscript}}</span>
     <span class='interimTranscript'>[[interimTranscript]]</span>
     <paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>

src/components/stream-status.html

@@ -17,7 +17,7 @@
   }
   </style>
   <template>
-    <iron-icon icon="warning" hidden$="[[!hasError]]"></iron-icon>
+    <iron-icon icon="mdi:alert" hidden$="[[!hasError]]"></iron-icon>
     <paper-toggle-button id="toggle" on-change='toggleChanged' checked$='[[isStreaming]]' hidden$="[[hasError]]"></paper-toggle-button>
   </template>
 </dom-module>

src/home-assistant.html

@@ -1,8 +1,7 @@
 <link rel='import' href='../bower_components/polymer/polymer.html'>
 <link rel='import' href='../bower_components/iron-flex-layout/classes/iron-flex-layout.html'>
 <link rel='import' href='../bower_components/paper-styles/typography.html'>
-
-<link rel='import' href='resources/home-assistant-icons.html'>
+<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
 
 <link rel='import' href='layouts/login-form.html'>
 <link rel='import' href='layouts/home-assistant-main.html'>
@@ -21,7 +20,8 @@
 
   <template>
     <template is='dom-if' if='[[!loaded]]'>
-      <login-form></login-form>
+      <login-form force-show-loading='[[computeForceShowLoading(dataLoaded, iconsLoaded)]]'>
+      </login-form>
     </template>
 
     <template is='dom-if' if='[[loaded]]'>

src/home-assistant.js

@@ -19,6 +19,7 @@ export default new Polymer({
 
   hostAttributes: {
     auth: null,
+    icons: null,
   },
 
   behaviors: [nuclearObserver],
@@ -27,10 +28,35 @@ export default new Polymer({
     auth: {
       type: String,
     },
-    loaded: {
+    icons: {
+      type: String,
+    },
+    dataLoaded: {
       type: Boolean,
       bindNuclear: syncGetters.isDataLoaded,
     },
+    iconsLoaded: {
+      type: Boolean,
+      value: false,
+    },
+    loaded: {
+      type: Boolean,
+      computed: 'computeLoaded(dataLoaded, iconsLoaded)',
+    },
+  },
+
+  computeLoaded(dataLoaded, iconsLoaded) {
+    return dataLoaded && iconsLoaded;
+  },
+
+  computeForceShowLoading(dataLoaded, iconsLoaded) {
+    return dataLoaded && !iconsLoaded;
+  },
+
+  loadIcons() {
+    this.importHref(`/static/mdi-${this.icons}.html`,
+                    () => this.iconsLoaded = true,
+                    () => this.loadIcons());
   },
 
   ready() {
@@ -49,5 +75,7 @@ export default new Polymer({
     // remove the HTML init message
     const initMsg = document.getElementById('init');
     initMsg.parentElement.removeChild(initMsg);
+
+    this.loadIcons();
   },
 });

src/layouts/login-form.html

@@ -54,7 +54,7 @@
       <img src="/static/splash.png" height="230" />
       <a href="#" id="hideKeyboardOnFocus"></a>
       <div class='interact'>
-        <div id='loginform' hidden$="[[isValidating]]">
+        <div id='loginform' hidden$="[[showLoading]]">
           <paper-input-container id="passwordDecorator" invalid="[[isInvalid]]">
             <label>Password</label>
             <input is="iron-input" type="password" id="passwordInput" />
@@ -65,7 +65,7 @@
             <paper-button id='loginButton'>Log In</paper-button>
           </div>
         </div>
-        <div id="validatebox" hidden$="[[!isValidating]]">
+        <div id="validatebox" hidden$="[[!showLoading]]">
           <paper-spinner active="true"></paper-spinner><br />
           <div class="validatemessage">Loading data</div>
         </div>

src/layouts/login-form.js

@@ -11,10 +11,9 @@ export default new Polymer({
   behaviors: [nuclearObserver],
 
   properties: {
-    isValidating: {
-      type: Boolean,
-      observer: 'isValidatingChanged',
-      bindNuclear: authGetters.isValidating,
+    errorMessage: {
+      type: String,
+      bindNuclear: authGetters.attemptErrorMessage,
     },
 
     isInvalid: {
@@ -22,9 +21,25 @@ export default new Polymer({
       bindNuclear: authGetters.isInvalidAttempt,
     },
 
-    errorMessage: {
-      type: String,
-      bindNuclear: authGetters.attemptErrorMessage,
+    isValidating: {
+      type: Boolean,
+      observer: 'isValidatingChanged',
+      bindNuclear: authGetters.isValidating,
+    },
+
+    loadingResources: {
+      type: Boolean,
+      value: false,
+    },
+
+    forceShowLoading: {
+      type: Boolean,
+      value: false,
+    },
+
+    showLoading: {
+      type: Boolean,
+      computed: 'computeShowSpinner(forceShowLoading, isValidating)',
     },
   },
 
@@ -37,6 +52,10 @@ export default new Polymer({
     'validatingChanged(isValidating, isInvalid)',
   ],
 
+  computeShowSpinner(forceShowLoading, isValidating) {
+    return forceShowLoading || isValidating;
+  },
+
   validatingChanged(isValidating, isInvalid) {
     if (!isValidating && !isInvalid) {
       this.$.passwordInput.value = '';

src/layouts/partial-base.html

@@ -16,7 +16,7 @@
   <template>
     <paper-scroll-header-panel class='fit'>
       <paper-toolbar>
-        <paper-icon-button icon='menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
+        <paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
         <div class="title">
           <content select='[header-title]'></content>
         </div>

src/layouts/partial-history.html

@@ -30,7 +30,7 @@
     <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
       <span header-title>History</span>
 
-      <paper-icon-button icon="refresh" header-buttons
+      <paper-icon-button icon="mdi:refresh" header-buttons
         on-click="handleRefreshClick"></paper-icon-button>
 
       <div class$="[[computeContentClasses(narrow)]]">

src/layouts/partial-logbook.html

@@ -24,7 +24,7 @@
     <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
       <span header-title>Logbook</span>
 
-      <paper-icon-button icon="refresh" header-buttons
+      <paper-icon-button icon="mdi:refresh" header-buttons
         on-click="handleRefresh"></paper-icon-button>
 
       <div>

src/layouts/partial-map.html

@@ -26,7 +26,7 @@
   <template>
     <div class='layout vertical fit'>
       <paper-toolbar>
-          <paper-icon-button icon='menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
+          <paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
         <div class='title'>Map</div>
       </paper-toolbar>
 

src/layouts/partial-zone.html

@@ -31,11 +31,11 @@
   <template>
     <paper-header-panel mode="waterfall">
       <paper-toolbar>
-        <paper-icon-button icon='menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
+        <paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
         <div class='title'>[[locationName]]</div>
 
         <paper-icon-button
-          icon="refresh"
+          icon="mdi:refresh"
           class$="[[computeRefreshButtonClass(isFetching)]]"
           on-click="handleRefresh" hidden$="[[isStreaming]]"
         ></paper-icon-button>

src/layouts/partial-zone.js

@@ -132,7 +132,7 @@ export default new Polymer({
   },
 
   computeListenButtonIcon(isListening) {
-    return isListening ? 'av:mic-off' : 'av:mic';
+    return isListening ? 'mdi:microphone-off' : 'mdi:microphone';
   },
 
   computeRefreshButtonClass(isFetching) {

src/more-infos/more-info-camera.js

@@ -20,7 +20,7 @@ export default new Polymer({
     if (__DEMO__) {
       return '/demo/webcam.jpg';
     } else if (dialogOpen) {
-      return '/api/camera_proxy_stream/' + this.stateObj.entityId;
+      return `/api/camera_proxy_stream/${this.stateObj.entityId}`;
     }
     // Return an empty image if dialog is not open
     return 'data:image/gif;base64,R0lGODlhAQABAAAAACw=';

src/more-infos/more-info-media_player.html

@@ -28,17 +28,17 @@
     <div class$='[[computeClassNames(stateObj)]]'>
       <div class='layout horizontal'>
         <div class='flex'>
-          <paper-icon-button icon='power-settings-new' highlight$='[[isOff]]'
+          <paper-icon-button icon='mdi:power' highlight$='[[isOff]]'
             on-tap='handleTogglePower'
             hidden$='[[computeHidePowerButton(isOff, supportsTurnOn, supportsTurnOff)]]'></paper-icon-button>
         </div>
         <div>
           <template is='dom-if' if='[[!isOff]]'>
-            <paper-icon-button icon='av:skip-previous' on-tap='handlePrevious'
+            <paper-icon-button icon='mdi:skip-previous' on-tap='handlePrevious'
               hidden$='[[!supportsPreviousTrack]]'></paper-icon-button>
             <paper-icon-button icon='[[computePlaybackControlIcon(stateObj)]]'
               on-tap='handlePlaybackControl' highlight></paper-icon-button>
-            <paper-icon-button icon='av:skip-next' on-tap='handleNext'
+            <paper-icon-button icon='mdi:skip-next' on-tap='handleNext'
               hidden$='[[!supportsNextTrack]]'></paper-icon-button>
           </template>
         </div>

src/more-infos/more-info-media_player.js

@@ -98,14 +98,14 @@ export default new Polymer({
   },
 
   computeMuteVolumeIcon(isMuted) {
-    return isMuted ? 'av:volume-off' : 'av:volume-up';
+    return isMuted ? 'mdi:volume-off' : 'mdi:volume-high';
   },
 
   computePlaybackControlIcon() {
     if (this.isPlaying) {
-      return this.supportsPause ? 'av:pause' : 'av:stop';
+      return this.supportsPause ? 'mdi:pause' : 'mdi:stop';
     }
-    return 'av:play-arrow';
+    return 'mdi:play';
   },
 
   computeHidePowerButton(isOff, supportsTurnOn, supportsTurnOff) {

src/resources/home-assistant-icons.html

@@ -1,32 +0,0 @@
-<link rel="import" href="../../bower_components/iron-iconset-svg/iron-iconset-svg.html">
-
-<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
-<link rel="import" href="../../bower_components/iron-icons/social-icons.html">
-<link rel="import" href="../../bower_components/iron-icons/image-icons.html">
-<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">
-<link rel="import" href="../../bower_components/iron-icons/av-icons.html">
-<link rel="import" href="../../bower_components/iron-icons/maps-icons.html">
-
-<iron-iconset-svg name="homeassistant-100" size="100">
-<svg><defs>
-<!--
-  Thermostat icon created by Scott Lewis from the Noun Project
-  Licensed under CC BY 3.0 - http://creativecommons.org/licenses/by/3.0/us/
--->
-<g id="thermostat"><path d="M66.861,60.105V17.453c0-9.06-7.347-16.405-16.408-16.405c-9.06,0-16.404,7.345-16.404,16.405v42.711 c-4.04,4.14-6.533,9.795-6.533,16.035c0,12.684,10.283,22.967,22.967,22.967c12.682,0,22.964-10.283,22.964-22.967 C73.447,69.933,70.933,64.254,66.861,60.105z M60.331,20.38h-13.21v6.536h6.63v6.539h-6.63v6.713h6.63v6.538h-6.63v6.5h6.63v6.536 h-6.63v7.218c-3.775,1.373-6.471,4.993-6.471,9.24h-6.626c0-5.396,2.598-10.182,6.61-13.185V17.446c0-0.038,0.004-0.075,0.004-0.111 l-0.004-0.007c0-5.437,4.411-9.846,9.849-9.846c5.438,0,9.848,4.409,9.848,9.846V20.38z"/></g>
-</defs></svg>
-</iron-iconset-svg>
-
-<iron-iconset-svg name="homeassistant-24" size="24">
-<svg><defs>
-<!--
-    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
--->
-<g id="group"><path d="M9 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm5-3c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-7c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3-8c-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>

src/state-summary/state-card-scene.html

@@ -16,7 +16,7 @@
   <template>
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]"></state-info>
-      <paper-icon-button on-tap='activateScene' icon='av:play-arrow'></paper-icon-button>
+      <paper-icon-button on-tap='activateScene' icon='mdi:play'></paper-icon-button>
     </div>
   </template>
 </dom-module>

src/util/domain-icon.js

@@ -2,64 +2,66 @@ import defaultIcon from './default-icon';
 
 export default function domainIcon(domain, state) {
   switch (domain) {
-  case 'homeassistant':
-    return 'home';
+  case 'alarm_control_panel':
+    return state && state === 'disarmed' ? 'mdi:lock-open' : 'mdi:lock';
 
-  case 'group':
-    return 'homeassistant-24:group';
+  case 'camera':
+    return 'mdi:video';
+
+  case 'configurator':
+    return 'mdi:settings';
+
+  case 'conversation':
+    return 'mdi:text-to-speech';
 
   case 'device_tracker':
-    return 'social:person';
+    return 'mdi:account';
 
-  case 'switch':
-    return 'image:flash-on';
+  case 'group':
+    return 'mdi:google-circles-communities';
 
-  case 'alarm_control_panel':
-    return state && state === 'disarmed' ? 'icons:lock-open' : 'icons:lock';
+  case 'homeassistant':
+    return 'mdi:home';
+
+  case 'light':
+    return 'mdi:lightbulb';
 
   case 'media_player':
-    let icon = 'hardware:cast';
+    let icon = 'mdi:cast';
     if (state && state !== 'off' && state !== 'idle') {
       icon += '-connected';
     }
 
     return icon;
 
-  case 'sun':
-    return 'image:wb-sunny';
+  case 'notify':
+    return 'mdi:comment-alert';
 
-  case 'light':
-    return 'image:wb-incandescent';
+  case 'sun':
+    return 'mdi:white-balance-sunny';
+
+  case 'switch':
+    return 'mdi:flash';
 
   case 'simple_alarm':
-    return 'social:notifications';
-
-  case 'notify':
-    return 'announcement';
-
-  case 'thermostat':
-    return 'settings-brightness';
-
-  case 'sensor':
-    return 'visibility';
-
-  case 'configurator':
-    return 'settings';
-
-  case 'conversation':
-    return 'av:hearing';
-
-  case 'script':
-    return 'description';
+    return 'mdi:bell';
 
   case 'scene':
-    return 'social:pages';
+    return 'mdi:google-pages';
 
-  case 'updater':
-    return state === 'update_available' ?
-      'icons:cloud-download' : 'icons:cloud-done';
+  case 'script':
+    return 'mdi:file-document';
+
+  case 'sensor':
+    return 'mdi:eye';
+
+  case 'thermostat':
+    return 'mdi:nest-thermostat';
 
   default:
+    /* eslint-disable no-console */
+    console.warn(`Unable to find icon for domain ${domain} (${state})`);
+    /* eslint-enable no-console */
     return defaultIcon;
   }
 }

src/util/state-icon.js

@@ -17,7 +17,7 @@ export default function stateIcon(state) {
   if (unit && state.domain === 'sensor') {
     if (unit === util.temperatureUnits.UNIT_TEMP_C ||
         unit === util.temperatureUnits.UNIT_TEMP_F) {
-      return 'homeassistant-100:thermostat';
+      return 'mdi:thermometer';
     }
   }