Convert default state icons

cast/src/launcher/layout/hc-cast.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button/mwc-button";
+import { mdiCast, mdiCastConnected } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { Auth, Connection } from "home-assistant-js-websocket";
@@ -17,6 +18,7 @@ import {
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
 import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-svg-icon";
 import {
   getLegacyLovelaceCollection,
   getLovelaceCollection,
@@ -73,7 +75,7 @@ class HcCast extends LitElement {
           ? html`
               <p class="center-item">
                 <mwc-button raised @click=${this._handleLaunch}>
-                  <ha-icon icon="hass:cast"></ha-icon>
+                  <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
                   Start Casting
                 </mwc-button>
               </p>
@@ -111,7 +113,7 @@ class HcCast extends LitElement {
           ${this.castManager.status
             ? html`
                 <mwc-button @click=${this._handleLaunch}>
-                  <ha-icon icon="hass:cast-connected"></ha-icon>
+                  <ha-svg-icon .path=${mdiCastConnected}></ha-svg-icon>
                   Manage
                 </mwc-button>
               `
@@ -233,7 +235,7 @@ class HcCast extends LitElement {
         color: var(--secondary-text-color);
       }
 
-      mwc-button ha-icon {
+      mwc-button ha-svg-icon {
         margin-right: 8px;
         height: 18px;
       }

cast/src/launcher/layout/hc-connect.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { mdiCastConnected, mdiCast } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import {
   Auth,
@@ -19,7 +20,7 @@ import {
   loadTokens,
   saveTokens,
 } from "../../../../src/common/auth/token_storage";
-import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-svg-icon";
 import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
@@ -127,11 +128,11 @@ export class HcConnect extends LitElement {
           <div class="card-actions">
             <mwc-button @click=${this._handleDemo}>
               Show Demo
-              <ha-icon
-                .icon=${this.castManager.castState === "CONNECTED"
-                  ? "hass:cast-connected"
-                  : "hass:cast"}
-              ></ha-icon>
+              <ha-svg-icon
+                .path=${this.castManager.castState === "CONNECTED"
+                  ? mdiCastConnected
+                  : mdiCast}
+              ></ha-svg-icon>
             </mwc-button>
             <div class="spacer"></div>
             <mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
@@ -307,7 +308,7 @@ export class HcConnect extends LitElement {
         color: darkred;
       }
 
-      mwc-button ha-icon {
+      mwc-button ha-svg-icon {
         margin-left: 8px;
       }
 

demo/src/custom-cards/cast-demo-row.ts

@@ -1,3 +1,4 @@
+import { mdiTelevision } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { CastManager } from "../../../src/cast/cast_manager";
@@ -27,7 +28,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
       return html``;
     }
     return html`
-      <ha-icon icon="hademo:television"></ha-icon>
+      <ha-svg-icon .path=${mdiTelevision}></ha-svg-icon>
       <div class="flex">
         <div class="name">Show Chromecast interface</div>
         <google-cast-launcher></google-cast-launcher>
@@ -72,7 +73,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
         display: flex;
         align-items: center;
       }
-      ha-icon {
+      ha-svg-icon {
         padding: 8px;
         color: var(--paper-item-icon-color);
       }

src/common/const.ts

@@ -1,88 +1,146 @@
 /** Constants to be used in the frontend. */
 
+import {
+  mdiAccount,
+  mdiAirFilter,
+  mdiAlert,
+  mdiAngleAcute,
+  mdiAppleSafari,
+  mdiBell,
+  mdiBookmark,
+  mdiBrightness5,
+  mdiBullhorn,
+  mdiCalendar,
+  mdiCalendarClock,
+  mdiCash,
+  mdiClock,
+  mdiCloudUpload,
+  mdiCog,
+  mdiCommentAlert,
+  mdiCounter,
+  mdiCurrentAc,
+  mdiEye,
+  mdiFan,
+  mdiFlash,
+  mdiFlower,
+  mdiFormatListBulleted,
+  mdiFormTextbox,
+  mdiGasCylinder,
+  mdiGauge,
+  mdiGoogleAssistant,
+  mdiGoogleCirclesCommunities,
+  mdiHomeAssistant,
+  mdiHomeAutomation,
+  mdiImageFilterFrames,
+  mdiLightbulb,
+  mdiLightningBolt,
+  mdiMailbox,
+  mdiMapMarkerRadius,
+  mdiMolecule,
+  mdiMoleculeCo,
+  mdiMoleculeCo2,
+  mdiPalette,
+  mdiRayVertex,
+  mdiRemote,
+  mdiRobot,
+  mdiRobotVacuum,
+  mdiScriptText,
+  mdiSineWave,
+  mdiTextToSpeech,
+  mdiThermometer,
+  mdiThermostat,
+  mdiTimerOutline,
+  mdiToggleSwitchOutline,
+  mdiVideo,
+  mdiWaterPercent,
+  mdiWeatherCloudy,
+  mdiWhiteBalanceSunny,
+  mdiWifi,
+} from "@mdi/js";
+
 // Constants should be alphabetically sorted by name.
 // Arrays with values should be alphabetically sorted if order doesn't matter.
 // Each constant should have a description what it is supposed to be used for.
 
 /** Icon to use when no icon specified for domain. */
-export const DEFAULT_DOMAIN_ICON = "hass:bookmark";
+export const DEFAULT_DOMAIN_ICON = mdiBookmark;
 
 /** Icons for each domain */
 export const FIXED_DOMAIN_ICONS = {
-  alert: "hass:alert",
-  alexa: "hass:amazon-alexa",
-  air_quality: "hass:air-filter",
-  automation: "hass:robot",
-  calendar: "hass:calendar",
-  camera: "hass:video",
-  climate: "hass:thermostat",
-  configurator: "hass:cog",
-  conversation: "hass:text-to-speech",
-  counter: "hass:counter",
-  device_tracker: "hass:account",
-  fan: "hass:fan",
-  google_assistant: "hass:google-assistant",
-  group: "hass:google-circles-communities",
-  homeassistant: "hass:home-assistant",
-  homekit: "hass:home-automation",
-  image_processing: "hass:image-filter-frames",
-  input_boolean: "hass:toggle-switch-outline",
-  input_datetime: "hass:calendar-clock",
-  input_number: "hass:ray-vertex",
-  input_select: "hass:format-list-bulleted",
-  input_text: "hass:form-textbox",
-  light: "hass:lightbulb",
-  mailbox: "hass:mailbox",
-  notify: "hass:comment-alert",
-  number: "hass:ray-vertex",
-  persistent_notification: "hass:bell",
-  person: "hass:account",
-  plant: "hass:flower",
-  proximity: "hass:apple-safari",
-  remote: "hass:remote",
-  scene: "hass:palette",
-  script: "hass:script-text",
-  select: "hass:format-list-bulleted",
-  sensor: "hass:eye",
-  simple_alarm: "hass:bell",
-  sun: "hass:white-balance-sunny",
-  switch: "hass:flash",
-  timer: "hass:timer-outline",
-  updater: "hass:cloud-upload",
-  vacuum: "hass:robot-vacuum",
-  water_heater: "hass:thermometer",
-  weather: "hass:weather-cloudy",
-  zone: "hass:map-marker-radius",
+  alert: mdiAlert,
+  air_quality: mdiAirFilter,
+  automation: mdiRobot,
+  calendar: mdiCalendar,
+  camera: mdiVideo,
+  climate: mdiThermostat,
+  configurator: mdiCog,
+  conversation: mdiTextToSpeech,
+  counter: mdiCounter,
+  device_tracker: mdiAccount,
+  fan: mdiFan,
+  google_assistant: mdiGoogleAssistant,
+  group: mdiGoogleCirclesCommunities,
+  homeassistant: mdiHomeAssistant,
+  homekit: mdiHomeAutomation,
+  image_processing: mdiImageFilterFrames,
+  input_boolean: mdiToggleSwitchOutline,
+  input_datetime: mdiCalendarClock,
+  input_number: mdiRayVertex,
+  input_select: mdiFormatListBulleted,
+  input_text: mdiFormTextbox,
+  light: mdiLightbulb,
+  mailbox: mdiMailbox,
+  notify: mdiCommentAlert,
+  number: mdiRayVertex,
+  persistent_notification: mdiBell,
+  person: mdiAccount,
+  plant: mdiFlower,
+  proximity: mdiAppleSafari,
+  remote: mdiRemote,
+  scene: mdiPalette,
+  script: mdiScriptText,
+  select: mdiFormatListBulleted,
+  sensor: mdiEye,
+  siren: mdiBullhorn,
+  simple_alarm: mdiBell,
+  sun: mdiWhiteBalanceSunny,
+  switch: mdiFlash,
+  timer: mdiTimerOutline,
+  updater: mdiCloudUpload,
+  vacuum: mdiRobotVacuum,
+  water_heater: mdiThermometer,
+  weather: mdiWeatherCloudy,
+  zone: mdiMapMarkerRadius,
 };
 
 export const FIXED_DEVICE_CLASS_ICONS = {
-  aqi: "hass:air-filter",
-  // battery: "hass:battery", => not included by design since `sensorIcon()` will dynamically determine the icon
-  carbon_dioxide: "mdi:molecule-co2",
-  carbon_monoxide: "mdi:molecule-co",
-  current: "hass:current-ac",
-  date: "hass:calendar",
-  energy: "hass:lightning-bolt",
-  gas: "hass:gas-cylinder",
-  humidity: "hass:water-percent",
-  illuminance: "hass:brightness-5",
-  monetary: "mdi:cash",
-  nitrogen_dioxide: "mdi:molecule",
-  nitrogen_monoxide: "mdi:molecule",
-  nitrous_oxide: "mdi:molecule",
-  ozone: "mdi:molecule",
-  pm1: "mdi:molecule",
-  pm10: "mdi:molecule",
-  pm25: "mdi:molecule",
-  power: "hass:flash",
-  power_factor: "hass:angle-acute",
-  pressure: "hass:gauge",
-  signal_strength: "hass:wifi",
-  sulphur_dioxide: "mdi:molecule",
-  temperature: "hass:thermometer",
-  timestamp: "hass:clock",
-  volatile_organic_compounds: "mdi:molecule",
-  voltage: "hass:sine-wave",
+  aqi: mdiAirFilter,
+  // battery: mdiBattery, => not included by design since `sensorIcon()` will dynamically determine the icon
+  carbon_dioxide: mdiMoleculeCo2,
+  carbon_monoxide: mdiMoleculeCo,
+  current: mdiCurrentAc,
+  date: mdiCalendar,
+  energy: mdiLightningBolt,
+  gas: mdiGasCylinder,
+  humidity: mdiWaterPercent,
+  illuminance: mdiBrightness5,
+  monetary: mdiCash,
+  nitrogen_dioxide: mdiMolecule,
+  nitrogen_monoxide: mdiMolecule,
+  nitrous_oxide: mdiMolecule,
+  ozone: mdiMolecule,
+  pm1: mdiMolecule,
+  pm10: mdiMolecule,
+  pm25: mdiMolecule,
+  power: mdiFlash,
+  power_factor: mdiAngleAcute,
+  pressure: mdiGauge,
+  signal_strength: mdiWifi,
+  sulphur_dioxide: mdiMolecule,
+  temperature: mdiThermometer,
+  timestamp: mdiClock,
+  volatile_organic_compounds: mdiMolecule,
+  voltage: mdiSineWave,
 };
 
 /** Domains that have a state card. */

src/common/entity/alarm_panel_icon.ts

@@ -1,24 +1,36 @@
 /** Return an icon representing a alarm panel state. */
 
+import {
+  mdiShieldLock,
+  mdiShieldAirplane,
+  mdiShieldHome,
+  mdiShieldMoon,
+  mdiSecurity,
+  mdiShieldOutline,
+  mdiBellRing,
+  mdiShieldOff,
+  mdiShield,
+} from "@mdi/js";
+
 export const alarmPanelIcon = (state?: string) => {
   switch (state) {
     case "armed_away":
-      return "hass:shield-lock";
+      return mdiShieldLock;
     case "armed_vacation":
-      return "hass:shield-airplane";
+      return mdiShieldAirplane;
     case "armed_home":
-      return "hass:shield-home";
+      return mdiShieldHome;
     case "armed_night":
-      return "hass:shield-moon";
+      return mdiShieldMoon;
     case "armed_custom_bypass":
-      return "hass:security";
+      return mdiSecurity;
     case "pending":
-      return "hass:shield-outline";
+      return mdiShieldOutline;
     case "triggered":
-      return "hass:bell-ring";
+      return mdiBellRing;
     case "disarmed":
-      return "hass:shield-off";
+      return mdiShieldOff;
     default:
-      return "hass:shield";
+      return mdiShield;
   }
 };