diff --git a/cast/src/launcher/layout/hc-cast.ts b/cast/src/launcher/layout/hc-cast.ts index 078850d4f8..9c8debb48b 100644 --- a/cast/src/launcher/layout/hc-cast.ts +++ b/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`

- + Start Casting

@@ -111,7 +113,7 @@ class HcCast extends LitElement { ${this.castManager.status ? html` - + Manage ` @@ -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; } diff --git a/cast/src/launcher/layout/hc-connect.ts b/cast/src/launcher/layout/hc-connect.ts index a3fd436e97..346b704d78 100644 --- a/cast/src/launcher/layout/hc-connect.ts +++ b/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 {
Show Demo - +
Authorize @@ -307,7 +308,7 @@ export class HcConnect extends LitElement { color: darkred; } - mwc-button ha-icon { + mwc-button ha-svg-icon { margin-left: 8px; } diff --git a/demo/src/custom-cards/cast-demo-row.ts b/demo/src/custom-cards/cast-demo-row.ts index 8fbecb4eb5..e400031878 100644 --- a/demo/src/custom-cards/cast-demo-row.ts +++ b/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` - +
Show Chromecast interface
@@ -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); } diff --git a/src/common/const.ts b/src/common/const.ts index fd2590bccd..6559ece953 100644 --- a/src/common/const.ts +++ b/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. */ diff --git a/src/common/entity/alarm_panel_icon.ts b/src/common/entity/alarm_panel_icon.ts index aa2590ed67..cdbb736b3a 100644 --- a/src/common/entity/alarm_panel_icon.ts +++ b/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; } }; diff --git a/src/common/entity/battery_icon.ts b/src/common/entity/battery_icon.ts index f4b1784232..d73cdbe489 100644 --- a/src/common/entity/battery_icon.ts +++ b/src/common/entity/battery_icon.ts @@ -1,35 +1,92 @@ /** Return an icon representing a battery state. */ +import { + mdiBattery, + mdiBattery10, + mdiBattery20, + mdiBattery30, + mdiBattery40, + mdiBattery50, + mdiBattery60, + mdiBattery70, + mdiBattery80, + mdiBattery90, + mdiBatteryAlert, + mdiBatteryAlertVariantOutline, + mdiBatteryCharging, + mdiBatteryCharging10, + mdiBatteryCharging20, + mdiBatteryCharging30, + mdiBatteryCharging40, + mdiBatteryCharging50, + mdiBatteryCharging60, + mdiBatteryCharging70, + mdiBatteryCharging80, + mdiBatteryCharging90, + mdiBatteryChargingOutline, + mdiBatteryUnknown, +} from "@mdi/js"; import { HassEntity } from "home-assistant-js-websocket"; -export const batteryIcon = ( +const BATTERY_ICONS = { + 10: mdiBattery10, + 20: mdiBattery20, + 30: mdiBattery30, + 40: mdiBattery40, + 50: mdiBattery50, + 60: mdiBattery60, + 70: mdiBattery70, + 80: mdiBattery80, + 90: mdiBattery90, + 100: mdiBattery, +}; +const BATTERY_CHARGING_ICONS = { + 10: mdiBatteryCharging10, + 20: mdiBatteryCharging20, + 30: mdiBatteryCharging30, + 40: mdiBatteryCharging40, + 50: mdiBatteryCharging50, + 60: mdiBatteryCharging60, + 70: mdiBatteryCharging70, + 80: mdiBatteryCharging80, + 90: mdiBatteryCharging90, + 100: mdiBatteryCharging, +}; + +export const batteryStateIcon = ( batteryState: HassEntity, batteryChargingState?: HassEntity ) => { - const battery = Number(batteryState.state); - const battery_charging = + const battery = batteryState.state; + const batteryCharging = batteryChargingState && batteryChargingState.state === "on"; - let icon = "hass:battery"; - if (isNaN(battery)) { - if (batteryState.state === "off") { - icon += "-full"; - } else if (batteryState.state === "on") { - icon += "-alert"; - } else { - icon += "-unknown"; - } - return icon; - } - - const batteryRound = Math.round(battery / 10) * 10; - if (battery_charging && battery > 10) { - icon += `-charging-${batteryRound}`; - } else if (battery_charging) { - icon += "-outline"; - } else if (battery <= 5) { - icon += "-alert"; - } else if (battery > 5 && battery < 95) { - icon += `-${batteryRound}`; - } - return icon; + return batteryIcon(battery, batteryCharging); +}; + +export const batteryIcon = ( + batteryState: number | string, + batteryCharging?: boolean +) => { + const batteryValue = Number(batteryState); + if (isNaN(batteryValue)) { + if (batteryState === "off") { + return mdiBattery; + } + if (batteryState === "on") { + return mdiBatteryAlert; + } + return mdiBatteryUnknown; + } + + const batteryRound = Math.round(batteryValue / 10) * 10; + if (batteryCharging && batteryValue >= 10) { + return BATTERY_CHARGING_ICONS[batteryRound]; + } + if (batteryCharging) { + return mdiBatteryChargingOutline; + } + if (batteryValue <= 5) { + return mdiBatteryAlertVariantOutline; + } + return BATTERY_ICONS[batteryRound]; }; diff --git a/src/common/entity/binary_sensor_icon.ts b/src/common/entity/binary_sensor_icon.ts index 8ee9864e77..a4adec1e60 100644 --- a/src/common/entity/binary_sensor_icon.ts +++ b/src/common/entity/binary_sensor_icon.ts @@ -1,3 +1,44 @@ +import { + mdiBattery, + mdiBatteryOutline, + mdiBatteryCharging, + mdiThermometer, + mdiSnowflake, + mdiServerNetworkOff, + mdiServerNetwork, + mdiDoorClosed, + mdiDoorOpen, + mdiGarage, + mdiGarageOpen, + mdiPowerPlugOff, + mdiPowerPlug, + mdiCheckCircle, + mdiAlertCircle, + mdiSmoke, + mdiFire, + mdiBrightness5, + mdiBrightness7, + mdiLock, + mdiLockOpen, + mdiWaterOff, + mdiWater, + mdiWalk, + mdiRun, + mdiHomeOutline, + mdiHome, + mdiSquare, + mdiSquareOutline, + mdiMusicNoteOff, + mdiMusicNote, + mdiPackage, + mdiPackageUp, + mdiCropPortrait, + mdiVibrate, + mdiWindowClosed, + mdiWindowOpen, + mdiRadioboxBlank, + mdiCheckboxMarkedCircle, +} from "@mdi/js"; import { HassEntity } from "home-assistant-js-websocket"; /** Return an icon representing a binary sensor state. */ @@ -6,53 +47,53 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => { const is_off = state === "off"; switch (stateObj?.attributes.device_class) { case "battery": - return is_off ? "hass:battery" : "hass:battery-outline"; + return is_off ? mdiBattery : mdiBatteryOutline; case "battery_charging": - return is_off ? "hass:battery" : "hass:battery-charging"; + return is_off ? mdiBattery : mdiBatteryCharging; case "cold": - return is_off ? "hass:thermometer" : "hass:snowflake"; + return is_off ? mdiThermometer : mdiSnowflake; case "connectivity": - return is_off ? "hass:server-network-off" : "hass:server-network"; + return is_off ? mdiServerNetworkOff : mdiServerNetwork; case "door": - return is_off ? "hass:door-closed" : "hass:door-open"; + return is_off ? mdiDoorClosed : mdiDoorOpen; case "garage_door": - return is_off ? "hass:garage" : "hass:garage-open"; + return is_off ? mdiGarage : mdiGarageOpen; case "power": - return is_off ? "hass:power-plug-off" : "hass:power-plug"; + return is_off ? mdiPowerPlugOff : mdiPowerPlug; case "gas": case "problem": case "safety": case "tamper": - return is_off ? "hass:check-circle" : "hass:alert-circle"; + return is_off ? mdiCheckCircle : mdiAlertCircle; case "smoke": - return is_off ? "hass:check-circle" : "hass:smoke"; + return is_off ? mdiCheckCircle : mdiSmoke; case "heat": - return is_off ? "hass:thermometer" : "hass:fire"; + return is_off ? mdiThermometer : mdiFire; case "light": - return is_off ? "hass:brightness-5" : "hass:brightness-7"; + return is_off ? mdiBrightness5 : mdiBrightness7; case "lock": - return is_off ? "hass:lock" : "hass:lock-open"; + return is_off ? mdiLock : mdiLockOpen; case "moisture": - return is_off ? "hass:water-off" : "hass:water"; + return is_off ? mdiWaterOff : mdiWater; case "motion": - return is_off ? "hass:walk" : "hass:run"; + return is_off ? mdiWalk : mdiRun; case "occupancy": - return is_off ? "hass:home-outline" : "hass:home"; + return is_off ? mdiHomeOutline : mdiHome; case "opening": - return is_off ? "hass:square" : "hass:square-outline"; + return is_off ? mdiSquare : mdiSquareOutline; case "plug": - return is_off ? "hass:power-plug-off" : "hass:power-plug"; + return is_off ? mdiPowerPlugOff : mdiPowerPlug; case "presence": - return is_off ? "hass:home-outline" : "hass:home"; + return is_off ? mdiHomeOutline : mdiHome; case "sound": - return is_off ? "hass:music-note-off" : "hass:music-note"; + return is_off ? mdiMusicNoteOff : mdiMusicNote; case "update": - return is_off ? "mdi:package" : "mdi:package-up"; + return is_off ? mdiPackage : mdiPackageUp; case "vibration": - return is_off ? "hass:crop-portrait" : "hass:vibrate"; + return is_off ? mdiCropPortrait : mdiVibrate; case "window": - return is_off ? "hass:window-closed" : "hass:window-open"; + return is_off ? mdiWindowClosed : mdiWindowOpen; default: - return is_off ? "hass:radiobox-blank" : "hass:checkbox-marked-circle"; + return is_off ? mdiRadioboxBlank : mdiCheckboxMarkedCircle; } }; diff --git a/src/common/entity/cover_icon.ts b/src/common/entity/cover_icon.ts index 011f8e7294..4308306890 100644 --- a/src/common/entity/cover_icon.ts +++ b/src/common/entity/cover_icon.ts @@ -1,4 +1,30 @@ /** Return an icon representing a cover state. */ +import { + mdiArrowUpBox, + mdiArrowDownBox, + mdiGarage, + mdiGarageOpen, + mdiGateArrowRight, + mdiGate, + mdiGateOpen, + mdiDoorOpen, + mdiDoorClosed, + mdiCircle, + mdiWindowShutter, + mdiWindowShutterOpen, + mdiBlinds, + mdiBlindsOpen, + mdiWindowClosed, + mdiWindowOpen, + mdiArrowExpandHorizontal, + mdiArrowUp, + mdiArrowCollapseHorizontal, + mdiArrowDown, + mdiCircleSlice8, + mdiArrowSplitVertical, + mdiCurtains, + mdiCurtainsClosed, +} from "@mdi/js"; import { HassEntity } from "home-assistant-js-websocket"; export const coverIcon = (state?: string, stateObj?: HassEntity): string => { @@ -8,74 +34,84 @@ export const coverIcon = (state?: string, stateObj?: HassEntity): string => { case "garage": switch (state) { case "opening": - return "hass:arrow-up-box"; + return mdiArrowUpBox; case "closing": - return "hass:arrow-down-box"; + return mdiArrowDownBox; case "closed": - return "hass:garage"; + return mdiGarage; default: - return "hass:garage-open"; + return mdiGarageOpen; } case "gate": switch (state) { case "opening": case "closing": - return "hass:gate-arrow-right"; + return mdiGateArrowRight; case "closed": - return "hass:gate"; + return mdiGate; default: - return "hass:gate-open"; + return mdiGateOpen; } case "door": - return open ? "hass:door-open" : "hass:door-closed"; + return open ? mdiDoorOpen : mdiDoorClosed; case "damper": - return open ? "hass:circle" : "hass:circle-slice-8"; + return open ? mdiCircle : mdiCircleSlice8; case "shutter": switch (state) { case "opening": - return "hass:arrow-up-box"; + return mdiArrowUpBox; case "closing": - return "hass:arrow-down-box"; + return mdiArrowDownBox; case "closed": - return "hass:window-shutter"; + return mdiWindowShutter; default: - return "hass:window-shutter-open"; + return mdiWindowShutterOpen; + } + case "curtain": + switch (state) { + case "opening": + return mdiArrowSplitVertical; + case "closing": + return mdiArrowCollapseHorizontal; + case "closed": + return mdiCurtainsClosed; + default: + return mdiCurtains; } case "blind": - case "curtain": case "shade": switch (state) { case "opening": - return "hass:arrow-up-box"; + return mdiArrowUpBox; case "closing": - return "hass:arrow-down-box"; + return mdiArrowDownBox; case "closed": - return "hass:blinds"; + return mdiBlinds; default: - return "hass:blinds-open"; + return mdiBlindsOpen; } case "window": switch (state) { case "opening": - return "hass:arrow-up-box"; + return mdiArrowUpBox; case "closing": - return "hass:arrow-down-box"; + return mdiArrowDownBox; case "closed": - return "hass:window-closed"; + return mdiWindowClosed; default: - return "hass:window-open"; + return mdiWindowOpen; } } switch (state) { case "opening": - return "hass:arrow-up-box"; + return mdiArrowUpBox; case "closing": - return "hass:arrow-down-box"; + return mdiArrowDownBox; case "closed": - return "hass:window-closed"; + return mdiWindowClosed; default: - return "hass:window-open"; + return mdiWindowOpen; } }; @@ -84,9 +120,9 @@ export const computeOpenIcon = (stateObj: HassEntity): string => { case "awning": case "door": case "gate": - return "hass:arrow-expand-horizontal"; + return mdiArrowExpandHorizontal; default: - return "hass:arrow-up"; + return mdiArrowUp; } }; @@ -95,8 +131,8 @@ export const computeCloseIcon = (stateObj: HassEntity): string => { case "awning": case "door": case "gate": - return "hass:arrow-collapse-horizontal"; + return mdiArrowCollapseHorizontal; default: - return "hass:arrow-down"; + return mdiArrowDown; } }; diff --git a/src/common/entity/domain_icon.ts b/src/common/entity/domain_icon.ts index 60f27c93aa..3816c925de 100644 --- a/src/common/entity/domain_icon.ts +++ b/src/common/entity/domain_icon.ts @@ -1,3 +1,20 @@ +import { + mdiAirHumidifierOff, + mdiAirHumidifier, + mdiLockOpen, + mdiLockAlert, + mdiLockClock, + mdiLock, + mdiCastConnected, + mdiCast, + mdiEmoticonDead, + mdiSleep, + mdiTimerSand, + mdiZWave, + mdiClock, + mdiCalendar, + mdiWeatherNight, +} from "@mdi/js"; import { HassEntity } from "home-assistant-js-websocket"; /** * Return the icon to be used for a domain. @@ -28,36 +45,34 @@ export const domainIcon = ( return coverIcon(compareState, stateObj); case "humidifier": - return state && state === "off" - ? "hass:air-humidifier-off" - : "hass:air-humidifier"; + return state && state === "off" ? mdiAirHumidifierOff : mdiAirHumidifier; case "lock": switch (compareState) { case "unlocked": - return "hass:lock-open"; + return mdiLockOpen; case "jammed": - return "hass:lock-alert"; + return mdiLockAlert; case "locking": case "unlocking": - return "hass:lock-clock"; + return mdiLockClock; default: - return "hass:lock"; + return mdiLock; } case "media_player": - return compareState === "playing" ? "hass:cast-connected" : "hass:cast"; + return compareState === "playing" ? mdiCastConnected : mdiCast; case "zwave": switch (compareState) { case "dead": - return "hass:emoticon-dead"; + return mdiEmoticonDead; case "sleeping": - return "hass:sleep"; + return mdiSleep; case "initializing": - return "hass:timer-sand"; + return mdiTimerSand; default: - return "hass:z-wave"; + return mdiZWave; } case "sensor": { @@ -71,17 +86,17 @@ export const domainIcon = ( case "input_datetime": if (!stateObj?.attributes.has_date) { - return "hass:clock"; + return mdiClock; } if (!stateObj.attributes.has_time) { - return "hass:calendar"; + return mdiCalendar; } break; case "sun": return stateObj?.state === "above_horizon" ? FIXED_DOMAIN_ICONS[domain] - : "hass:weather-night"; + : mdiWeatherNight; } if (domain in FIXED_DOMAIN_ICONS) { diff --git a/src/common/entity/sensor_icon.ts b/src/common/entity/sensor_icon.ts index fa9bed83ce..9af29ceb3e 100644 --- a/src/common/entity/sensor_icon.ts +++ b/src/common/entity/sensor_icon.ts @@ -1,8 +1,9 @@ /** Return an icon representing a sensor state. */ +import { mdiBattery, mdiThermometer } from "@mdi/js"; import { HassEntity } from "home-assistant-js-websocket"; -import { FIXED_DEVICE_CLASS_ICONS, UNIT_C, UNIT_F } from "../const"; -import { batteryIcon } from "./battery_icon"; import { SENSOR_DEVICE_CLASS_BATTERY } from "../../data/sensor"; +import { FIXED_DEVICE_CLASS_ICONS, UNIT_C, UNIT_F } from "../const"; +import { batteryStateIcon } from "./battery_icon"; export const sensorIcon = (stateObj?: HassEntity): string | undefined => { const dclass = stateObj?.attributes.device_class; @@ -12,12 +13,12 @@ export const sensorIcon = (stateObj?: HassEntity): string | undefined => { } if (dclass === SENSOR_DEVICE_CLASS_BATTERY) { - return stateObj ? batteryIcon(stateObj) : "hass:battery"; + return stateObj ? batteryStateIcon(stateObj) : mdiBattery; } const unit = stateObj?.attributes.unit_of_measurement; if (unit === UNIT_C || unit === UNIT_F) { - return "hass:thermometer"; + return mdiThermometer; } return undefined; diff --git a/src/common/entity/state_icon.ts b/src/common/entity/state_icon_path.ts similarity index 74% rename from src/common/entity/state_icon.ts rename to src/common/entity/state_icon_path.ts index 86bfe50812..24d842caf6 100644 --- a/src/common/entity/state_icon.ts +++ b/src/common/entity/state_icon_path.ts @@ -4,13 +4,9 @@ import { DEFAULT_DOMAIN_ICON } from "../const"; import { computeDomain } from "./compute_domain"; import { domainIcon } from "./domain_icon"; -export const stateIcon = (state?: HassEntity) => { +export const stateIconPath = (state?: HassEntity) => { if (!state) { return DEFAULT_DOMAIN_ICON; } - if (state.attributes.icon) { - return state.attributes.icon; - } - return domainIcon(computeDomain(state.entity_id), state); }; diff --git a/src/common/style/icon_color_css.ts b/src/common/style/icon_color_css.ts index b636ffa89c..a0905c0ea9 100644 --- a/src/common/style/icon_color_css.ts +++ b/src/common/style/icon_color_css.ts @@ -1,57 +1,57 @@ import { css } from "lit"; export const iconColorCSS = css` - ha-icon[data-domain="alert"][data-state="on"], - ha-icon[data-domain="automation"][data-state="on"], - ha-icon[data-domain="binary_sensor"][data-state="on"], - ha-icon[data-domain="calendar"][data-state="on"], - ha-icon[data-domain="camera"][data-state="streaming"], - ha-icon[data-domain="cover"][data-state="open"], - ha-icon[data-domain="fan"][data-state="on"], - ha-icon[data-domain="humidifier"][data-state="on"], - ha-icon[data-domain="light"][data-state="on"], - ha-icon[data-domain="input_boolean"][data-state="on"], - ha-icon[data-domain="lock"][data-state="unlocked"], - ha-icon[data-domain="media_player"][data-state="on"], - ha-icon[data-domain="media_player"][data-state="paused"], - ha-icon[data-domain="media_player"][data-state="playing"], - ha-icon[data-domain="script"][data-state="on"], - ha-icon[data-domain="sun"][data-state="above_horizon"], - ha-icon[data-domain="switch"][data-state="on"], - ha-icon[data-domain="timer"][data-state="active"], - ha-icon[data-domain="vacuum"][data-state="cleaning"], - ha-icon[data-domain="group"][data-state="on"], - ha-icon[data-domain="group"][data-state="home"], - ha-icon[data-domain="group"][data-state="open"], - ha-icon[data-domain="group"][data-state="locked"], - ha-icon[data-domain="group"][data-state="problem"] { + ha-state-icon[data-domain="alert"][data-state="on"], + ha-state-icon[data-domain="automation"][data-state="on"], + ha-state-icon[data-domain="binary_sensor"][data-state="on"], + ha-state-icon[data-domain="calendar"][data-state="on"], + ha-state-icon[data-domain="camera"][data-state="streaming"], + ha-state-icon[data-domain="cover"][data-state="open"], + ha-state-icon[data-domain="fan"][data-state="on"], + ha-state-icon[data-domain="humidifier"][data-state="on"], + ha-state-icon[data-domain="light"][data-state="on"], + ha-state-icon[data-domain="input_boolean"][data-state="on"], + ha-state-icon[data-domain="lock"][data-state="unlocked"], + ha-state-icon[data-domain="media_player"][data-state="on"], + ha-state-icon[data-domain="media_player"][data-state="paused"], + ha-state-icon[data-domain="media_player"][data-state="playing"], + ha-state-icon[data-domain="script"][data-state="on"], + ha-state-icon[data-domain="sun"][data-state="above_horizon"], + ha-state-icon[data-domain="switch"][data-state="on"], + ha-state-icon[data-domain="timer"][data-state="active"], + ha-state-icon[data-domain="vacuum"][data-state="cleaning"], + ha-state-icon[data-domain="group"][data-state="on"], + ha-state-icon[data-domain="group"][data-state="home"], + ha-state-icon[data-domain="group"][data-state="open"], + ha-state-icon[data-domain="group"][data-state="locked"], + ha-state-icon[data-domain="group"][data-state="problem"] { color: var(--paper-item-icon-active-color, #fdd835); } - ha-icon[data-domain="climate"][data-state="cooling"] { + ha-state-icon[data-domain="climate"][data-state="cooling"] { color: var(--cool-color, var(--state-climate-cool-color)); } - ha-icon[data-domain="climate"][data-state="heating"] { + ha-state-icon[data-domain="climate"][data-state="heating"] { color: var(--heat-color, var(--state-climate-heat-color)); } - ha-icon[data-domain="climate"][data-state="drying"] { + ha-state-icon[data-domain="climate"][data-state="drying"] { color: var(--dry-color, var(--state-climate-dry-color)); } - ha-icon[data-domain="alarm_control_panel"] { + ha-state-icon[data-domain="alarm_control_panel"] { color: var(--alarm-color-armed, var(--label-badge-red)); } - ha-icon[data-domain="alarm_control_panel"][data-state="disarmed"] { + ha-state-icon[data-domain="alarm_control_panel"][data-state="disarmed"] { color: var(--alarm-color-disarmed, var(--label-badge-green)); } - ha-icon[data-domain="alarm_control_panel"][data-state="pending"], - ha-icon[data-domain="alarm_control_panel"][data-state="arming"] { + ha-state-icon[data-domain="alarm_control_panel"][data-state="pending"], + ha-state-icon[data-domain="alarm_control_panel"][data-state="arming"] { color: var(--alarm-color-pending, var(--label-badge-yellow)); animation: pulse 1s infinite; } - ha-icon[data-domain="alarm_control_panel"][data-state="triggered"] { + ha-state-icon[data-domain="alarm_control_panel"][data-state="triggered"] { color: var(--alarm-color-triggered, var(--label-badge-red)); animation: pulse 1s infinite; } @@ -68,13 +68,13 @@ export const iconColorCSS = css` } } - ha-icon[data-domain="plant"][data-state="problem"], - ha-icon[data-domain="zwave"][data-state="dead"] { + ha-state-icon[data-domain="plant"][data-state="problem"], + ha-state-icon[data-domain="zwave"][data-state="dead"] { color: var(--state-icon-error-color); } /* Color the icon if unavailable */ - ha-icon[data-state="unavailable"] { + ha-state-icon[data-state="unavailable"] { color: var(--state-unavailable-color); } `; diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index c3c34b80bb..1362a00f79 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -747,10 +747,16 @@ export class HaDataTable extends LitElement { text-align: right; } - .mdc-data-table__cell--icon:first-child ha-icon { + .mdc-data-table__cell--icon:first-child ha-icon, + .mdc-data-table__cell--icon:first-child ha-state-icon, + .mdc-data-table__cell--icon:first-child ha-svg-icon { margin-left: 8px; } - :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-icon { + :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-icon, + :host([dir="rtl"]) + .mdc-data-table__cell--icon:first-child + ha-state-icon, + :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-svg-icon { margin-left: auto; margin-right: 8px; } diff --git a/src/components/entity/ha-battery-icon.ts b/src/components/entity/ha-battery-icon.ts index 40233ec4a3..814f9d332e 100644 --- a/src/components/entity/ha-battery-icon.ts +++ b/src/components/entity/ha-battery-icon.ts @@ -1,7 +1,7 @@ import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; -import { batteryIcon } from "../../common/entity/battery_icon"; -import "../ha-icon"; +import { batteryStateIcon } from "../../common/entity/battery_icon"; +import "../ha-svg-icon"; @customElement("ha-battery-icon") export class HaBatteryIcon extends LitElement { @@ -11,9 +11,18 @@ export class HaBatteryIcon extends LitElement { protected render() { return html` - + `; } } + +declare global { + interface HTMLElementTagNameMap { + "ha-battery-icon": HaBatteryIcon; + } +} diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts index 8196d2bdd5..b062078393 100644 --- a/src/components/entity/ha-state-label-badge.ts +++ b/src/components/entity/ha-state-label-badge.ts @@ -14,19 +14,18 @@ import secondsToDuration from "../../common/datetime/seconds_to_duration"; import { computeStateDisplay } from "../../common/entity/compute_state_display"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { computeStateName } from "../../common/entity/compute_state_name"; -import { stateIcon } from "../../common/entity/state_icon"; import { formatNumber } from "../../common/number/format_number"; import { UNAVAILABLE, UNKNOWN } from "../../data/entity"; import { timerTimeRemaining } from "../../data/timer"; import { HomeAssistant } from "../../types"; import "../ha-label-badge"; -import "../ha-icon"; +import "../ha-state-icon"; @customElement("ha-state-label-badge") export class HaStateLabelBadge extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; - @property() public state?: HassEntity; + @property({ attribute: false }) public state?: HassEntity; @property() public name?: string; @@ -76,15 +75,16 @@ export class HaStateLabelBadge extends LitElement { // 4. Icon determined via entity state // 5. Value string as fallback const domain = computeStateDomain(entityState); - const icon = this.icon ? this.icon : this._computeIcon(domain, entityState); - const image = this.icon + + const showIcon = this.icon || this._computeShowIcon(domain, entityState); + const image = showIcon ? "" : this.image ? this.image : entityState.attributes.entity_picture_local || entityState.attributes.entity_picture; const value = - !image && !icon ? this._computeValue(domain, entityState) : undefined; + !image && !showIcon ? this._computeValue(domain, entityState) : undefined; return html` - ${!image && icon ? html`` : ""} - ${value && !icon && !image + ${!image && showIcon + ? html`` + : ""} + ${value && !image && !showIcon ? html` 4 ? "big" : ""} >${value}` @@ -150,9 +155,9 @@ export class HaStateLabelBadge extends LitElement { } } - private _computeIcon(domain: string, entityState: HassEntity) { + private _computeShowIcon(domain: string, entityState: HassEntity): boolean { if (entityState.state === UNAVAILABLE) { - return null; + return false; } switch (domain) { case "alarm_control_panel": @@ -162,17 +167,13 @@ export class HaStateLabelBadge extends LitElement { case "person": case "scene": case "sun": - return stateIcon(entityState); + return true; case "timer": - return entityState.state === "active" - ? "hass:timer-outline" - : "hass:timer-off-outline"; + return true; case "sensor": - return entityState.attributes.device_class === "moon__phase" - ? stateIcon(entityState) - : null; + return entityState.attributes.device_class === "moon__phase"; default: - return null; + return false; } } diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index 2decae9151..404457b33d 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -1,3 +1,4 @@ +import { mdiAlert } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; import { css, @@ -12,10 +13,9 @@ import { ifDefined } from "lit/directives/if-defined"; import { styleMap } from "lit/directives/style-map"; import { computeActiveState } from "../../common/entity/compute_active_state"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; -import { stateIcon } from "../../common/entity/state_icon"; import { iconColorCSS } from "../../common/style/icon_color_css"; import type { HomeAssistant } from "../../types"; -import "../ha-icon"; +import "../ha-state-icon"; export class StateBadge extends LitElement { public hass?: HomeAssistant; @@ -39,7 +39,7 @@ export class StateBadge extends LitElement { // We either need a `stateObj` or one override if (!stateObj && !this.overrideIcon && !this.overrideImage) { return html`
- +
`; } @@ -49,18 +49,17 @@ export class StateBadge extends LitElement { const domain = stateObj ? computeStateDomain(stateObj) : undefined; - return html` - - `; + return html``; } public willUpdate(changedProps: PropertyValues) { @@ -154,7 +153,7 @@ export class StateBadge extends LitElement { :host([icon]:focus) { background: var(--divider-color); } - ha-icon { + ha-state-icon { transition: color 0.3s ease-in-out, filter 0.3s ease-in-out; } .missing { diff --git a/src/components/ha-cover-controls.ts b/src/components/ha-cover-controls.ts index dd935e0d54..85be8bf786 100644 --- a/src/components/ha-cover-controls.ts +++ b/src/components/ha-cover-controls.ts @@ -14,7 +14,6 @@ import { computeCloseIcon, computeOpenIcon } from "../common/entity/cover_icon"; import { UNAVAILABLE } from "../data/entity"; import type { HomeAssistant } from "../types"; import CoverEntity from "../util/cover-model"; -import "./ha-icon"; import "./ha-icon-button"; @customElement("ha-cover-controls") @@ -49,8 +48,8 @@ class HaCoverControls extends LitElement { )} @click=${this._onOpenTap} .disabled=${this._computeOpenDisabled()} + .path=${computeOpenIcon(this.stateObj)} > - -
`; diff --git a/src/components/ha-icon-input.ts b/src/components/ha-icon-input.ts deleted file mode 100644 index fb62e3addb..0000000000 --- a/src/components/ha-icon-input.ts +++ /dev/null @@ -1,63 +0,0 @@ -import "@polymer/paper-input/paper-input"; -import { css, html, LitElement, TemplateResult } from "lit"; -import { customElement, property } from "lit/decorators"; -import { fireEvent } from "../common/dom/fire_event"; -import "./ha-icon"; - -@customElement("ha-icon-input") -export class HaIconInput extends LitElement { - @property() public value?: string; - - @property() public label?: string; - - @property() public placeholder?: string; - - @property({ attribute: "error-message" }) public errorMessage?: string; - - @property({ type: Boolean }) public disabled = false; - - protected render(): TemplateResult { - return html` - - ${this.value || this.placeholder - ? html` - - - ` - : ""} - - `; - } - - private _valueChanged(ev: CustomEvent) { - this.value = ev.detail.value; - fireEvent( - this, - "value-changed", - { value: ev.detail.value }, - { - bubbles: false, - composed: false, - } - ); - } - - static get styles() { - return css` - ha-icon { - position: absolute; - bottom: 2px; - right: 0; - } - `; - } -} diff --git a/src/components/ha-icon-picker.ts b/src/components/ha-icon-picker.ts index added27c6e..96e3a0db6e 100644 --- a/src/components/ha-icon-picker.ts +++ b/src/components/ha-icon-picker.ts @@ -46,14 +46,14 @@ export class HaIconPicker extends LitElement { @property() public placeholder?: string; + @property() public fallbackPath?: string; + @property({ attribute: "error-message" }) public errorMessage?: string; @property({ type: Boolean }) public disabled = false; @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement; - @property({ type: Boolean }) private _opened = false; - protected render(): TemplateResult { return html` @@ -77,21 +76,22 @@ export class HaIconPicker extends LitElement { autocorrect="off" spellcheck="false" > - ${!this._opened && (this._value || this.placeholder) + ${this._value || this.placeholder ? html` ` + : this.fallbackPath + ? html`` : ""} `; } - private _openedChanged(ev: PolymerChangedEvent) { - this._opened = ev.detail.value; - } - private _valueChanged(ev: PolymerChangedEvent) { this._setValue(ev.detail.value); } @@ -132,10 +132,10 @@ export class HaIconPicker extends LitElement { static get styles() { return css` - ha-icon { - position: absolute; + ha-icon, + ha-svg-icon { + position: relative; bottom: 2px; - right: 0; } `; } diff --git a/src/components/ha-network.ts b/src/components/ha-network.ts index 451e709176..6b7957573a 100644 --- a/src/components/ha-network.ts +++ b/src/components/ha-network.ts @@ -1,26 +1,27 @@ +import { mdiStar } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, CSSResultGroup, html, - nothing, LitElement, + nothing, TemplateResult, } from "lit"; -import { customElement, state, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; +import { fireEvent } from "../common/dom/fire_event"; import { Adapter, - NetworkConfig, - IPv6ConfiguredAddress, IPv4ConfiguredAddress, + IPv6ConfiguredAddress, + NetworkConfig, } from "../data/network"; -import { fireEvent } from "../common/dom/fire_event"; import { haStyle } from "../resources/styles"; import { HomeAssistant } from "../types"; import "./ha-checkbox"; import type { HaCheckbox } from "./ha-checkbox"; import "./ha-settings-row"; -import "./ha-icon"; +import "./ha-svg-icon"; const format_addresses = ( addresses: IPv6ConfiguredAddress[] | IPv4ConfiguredAddress[] @@ -92,7 +93,8 @@ export class HaNetwork extends LitElement { Adapter: ${adapter.name} ${adapter.default - ? html` (Default)` + ? html` + (Default)` : ""} diff --git a/src/components/ha-state-icon.ts b/src/components/ha-state-icon.ts new file mode 100644 index 0000000000..eace7706bc --- /dev/null +++ b/src/components/ha-state-icon.ts @@ -0,0 +1,27 @@ +import { HassEntity } from "home-assistant-js-websocket"; +import { html, LitElement, TemplateResult } from "lit"; +import { customElement, property } from "lit/decorators"; +import { stateIconPath } from "../common/entity/state_icon_path"; +import "./ha-icon"; +import "./ha-svg-icon"; + +@customElement("ha-state-icon") +export class HaStateIcon extends LitElement { + @property({ attribute: false }) public state?: HassEntity; + + @property() public icon?: string; + + protected render(): TemplateResult { + if (this.icon || this.state?.attributes.icon) { + return html``; + } + return html``; + } +} +declare global { + interface HTMLElementTagNameMap { + "ha-state-icon": HaStateIcon; + } +} diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts index 9c9f92fb13..bafeb0230e 100644 --- a/src/components/ha-target-picker.ts +++ b/src/components/ha-target-picker.ts @@ -10,6 +10,7 @@ import { } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { + HassEntity, HassServiceTarget, UnsubscribeFunc, } from "home-assistant-js-websocket"; @@ -20,7 +21,6 @@ import { fireEvent } from "../common/dom/fire_event"; import { ensureArray } from "../common/ensure-array"; import { computeDomain } from "../common/entity/compute_domain"; import { computeStateName } from "../common/entity/compute_state_name"; -import { stateIcon } from "../common/entity/state_icon"; import { AreaRegistryEntry, subscribeAreaRegistry, @@ -41,15 +41,14 @@ import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker"; import "./entity/ha-entity-picker"; import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker"; import "./ha-area-picker"; -import "./ha-icon"; import "./ha-icon-button"; import "./ha-svg-icon"; @customElement("ha-target-picker") export class HaTargetPicker extends SubscribeMixin(LitElement) { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() public value?: HassServiceTarget; + @property({ attribute: false }) public value?: HassServiceTarget; @property() public label?: string; @@ -147,7 +146,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { "entity_id", entity_id, entity ? computeStateName(entity) : entity_id, - entity ? stateIcon(entity) : undefined + entity ); }) : ""} @@ -230,7 +229,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { type: string, id: string, name: string, - icon?: string, + entityState?: HassEntity, iconPath?: string ) { return html` @@ -245,11 +244,11 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { .path=${iconPath} >` : ""} - ${icon - ? html`` + .state=${entityState} + >` : ""} diff --git a/src/data/media-player.ts b/src/data/media-player.ts index 143b7e1bf0..f0431b7f57 100644 --- a/src/data/media-player.ts +++ b/src/data/media-player.ts @@ -10,8 +10,15 @@ import { mdiImage, mdiMovie, mdiMusic, + mdiPause, + mdiPlay, mdiPlaylistMusic, + mdiPlayPause, mdiPodcast, + mdiPower, + mdiSkipNext, + mdiSkipPrevious, + mdiStop, mdiTelevisionClassic, mdiVideo, mdiWeb, @@ -246,7 +253,7 @@ export const computeMediaControls = ( return supportsFeature(stateObj, SUPPORT_TURN_ON) ? [ { - icon: "hass:power", + icon: mdiPower, action: "turn_on", }, ] @@ -257,7 +264,7 @@ export const computeMediaControls = ( if (supportsFeature(stateObj, SUPPORT_TURN_OFF)) { buttons.push({ - icon: "hass:power", + icon: mdiPower, action: "turn_off", }); } @@ -267,7 +274,7 @@ export const computeMediaControls = ( supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK) ) { buttons.push({ - icon: "hass:skip-previous", + icon: mdiSkipPrevious, action: "media_previous_track", }); } @@ -285,12 +292,12 @@ export const computeMediaControls = ( buttons.push({ icon: state === "on" - ? "hass:play-pause" + ? mdiPlayPause : state !== "playing" - ? "hass:play" + ? mdiPlay : supportsFeature(stateObj, SUPPORT_PAUSE) - ? "hass:pause" - : "hass:stop", + ? mdiPause + : mdiStop, action: state !== "playing" ? "media_play" @@ -305,7 +312,7 @@ export const computeMediaControls = ( supportsFeature(stateObj, SUPPORT_NEXT_TRACK) ) { buttons.push({ - icon: "hass:skip-next", + icon: mdiSkipNext, action: "media_next_track", }); } diff --git a/src/data/weather.ts b/src/data/weather.ts index f3a6ef5346..17e91ccf6c 100644 --- a/src/data/weather.ts +++ b/src/data/weather.ts @@ -1,4 +1,5 @@ import { + mdiAlertCircleOutline, mdiGauge, mdiWaterPercent, mdiWeatherFog, @@ -12,7 +13,6 @@ import { import { css, html, svg, SVGTemplateResult, TemplateResult } from "lit"; import { styleMap } from "lit/directives/style-map"; import { formatNumber } from "../common/number/format_number"; -import "../components/ha-icon"; import "../components/ha-svg-icon"; import type { HomeAssistant } from "../types"; @@ -57,7 +57,7 @@ export const weatherSVGs = new Set([ ]); export const weatherIcons = { - exceptional: "hass:alert-circle-outline", + exceptional: mdiAlertCircleOutline, }; export const weatherAttrIcons = { @@ -433,7 +433,10 @@ export const getWeatherStateIcon = ( if (state in weatherIcons) { return html` - + `; } diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index f481c2cb3f..8f27cdb034 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -1,5 +1,7 @@ import "@material/mwc-button/mwc-button"; import { + mdiLoginVariant, + mdiMusicNote, mdiPlayBoxMultiple, mdiSend, mdiVolumeHigh, @@ -15,8 +17,8 @@ import { customElement, property, query } from "lit/decorators"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { supportsFeature } from "../../../common/entity/supports-feature"; import { computeRTLDirection } from "../../../common/util/compute_rtl"; -import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; +import "../../../components/ha-svg-icon"; import "../../../components/ha-paper-dropdown-menu"; import "../../../components/ha-slider"; import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog"; @@ -62,8 +64,8 @@ class MoreInfoMediaPlayer extends LitElement { - ` )} @@ -130,7 +132,10 @@ class MoreInfoMediaPlayer extends LitElement { stateObj.attributes.source_list?.length ? html`
- + @@ -155,7 +160,7 @@ class MoreInfoMediaPlayer extends LitElement { stateObj.attributes.sound_mode_list?.length ? html`
- + - + ${stateObj.attributes.fan_speed}
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts index dcb39f0155..80afe58dd7 100644 --- a/src/dialogs/quick-bar/ha-quick-bar.ts +++ b/src/dialogs/quick-bar/ha-quick-bar.ts @@ -386,10 +386,14 @@ export class QuickBar extends LitElement { private _generateEntityItems(): EntityItem[] { return Object.keys(this.hass.states) .map((entityId) => { + const entityState = this.hass.states[entityId]; const entityItem = { - primaryText: computeStateName(this.hass.states[entityId]), + primaryText: computeStateName(entityState), altText: entityId, - icon: domainIcon(computeDomain(entityId), this.hass.states[entityId]), + icon: entityState.attributes.icon, + iconPath: entityState.attributes.icon + ? undefined + : domainIcon(computeDomain(entityId), entityState), action: () => fireEvent(this, "hass-more-info", { entityId }), }; diff --git a/src/onboarding/action-badge.ts b/src/onboarding/action-badge.ts index e97c9c5bd8..c53f57ca52 100644 --- a/src/onboarding/action-badge.ts +++ b/src/onboarding/action-badge.ts @@ -1,6 +1,6 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; -import "../components/ha-icon"; +import "../components/ha-svg-icon"; @customElement("action-badge") class ActionBadge extends LitElement { @@ -15,9 +15,12 @@ class ActionBadge extends LitElement { protected render(): TemplateResult { return html`
- + ${this.badgeIcon - ? html` ` + ? html`` : ""}
${this.title}
diff --git a/src/onboarding/integration-badge.ts b/src/onboarding/integration-badge.ts index c7a18f07ca..62e48d1b00 100644 --- a/src/onboarding/integration-badge.ts +++ b/src/onboarding/integration-badge.ts @@ -1,6 +1,6 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; -import "../components/ha-icon"; +import "../components/ha-svg-icon"; import { brandsUrl } from "../util/brands-url"; @customElement("integration-badge") @@ -27,7 +27,10 @@ class IntegrationBadge extends LitElement { referrerpolicy="no-referrer" /> ${this.badgeIcon - ? html` ` + ? html`` : ""}
${this.title}
diff --git a/src/onboarding/onboarding-integrations.ts b/src/onboarding/onboarding-integrations.ts index a914d6855d..9b0370bb9b 100644 --- a/src/onboarding/onboarding-integrations.ts +++ b/src/onboarding/onboarding-integrations.ts @@ -8,6 +8,7 @@ import { TemplateResult, } from "lit"; import { customElement, property, state } from "lit/decorators"; +import { mdiCheck, mdiDotsHorizontal } from "@mdi/js"; import { fireEvent } from "../common/dom/fire_event"; import { stringCompare } from "../common/string/compare"; import { isComponentLoaded } from "../common/config/is_component_loaded"; @@ -79,7 +80,7 @@ class OnboardingIntegrations extends LitElement { `, @@ -120,7 +121,7 @@ class OnboardingIntegrations extends LitElement { title=${this.onboardingLocalize( "ui.panel.page-onboarding.integration.more_integrations" )} - icon="hass:dots-horizontal" + .icon=${mdiDotsHorizontal} >
diff --git a/src/panels/config/core/ha-config-core.js b/src/panels/config/core/ha-config-core.js index 5b41675898..4e01b9d6af 100644 --- a/src/panels/config/core/ha-config-core.js +++ b/src/panels/config/core/ha-config-core.js @@ -3,7 +3,6 @@ import "@polymer/app-layout/app-toolbar/app-toolbar"; import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "../../../components/ha-icon-button"; import "../../../layouts/hass-tabs-subpage"; import LocalizeMixin from "../../../mixins/localize-mixin"; import "../../../styles/polymer-ha-style"; diff --git a/src/panels/config/devices/device-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts index 1cd5ee4051..a943914264 100644 --- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts @@ -132,10 +132,10 @@ export class HaDeviceEntitiesCard extends LitElement { private _renderEntry(entry: EntityRegistryStateEntry): TemplateResult { return html` - + .path=${domainIcon(computeDomain(entry.entity_id))} + >
${entry.stateName || entry.entity_id}
 diff --git a/src/panels/config/energy/components/ha-energy-device-settings.ts b/src/panels/config/energy/components/ha-energy-device-settings.ts index c805e92abf..fe75d061f6 100644 --- a/src/panels/config/energy/components/ha-energy-device-settings.ts +++ b/src/panels/config/energy/components/ha-energy-device-settings.ts @@ -4,9 +4,9 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import { computeStateName } from "../../../../common/entity/compute_state_name"; -import { stateIcon } from "../../../../common/entity/state_icon"; import "../../../../components/ha-card"; import "../../../../components/ha-icon-button"; +import "../../../../components/ha-state-icon"; import { DeviceConsumptionEnergyPreference, EnergyPreferences, @@ -79,7 +79,7 @@ export class EnergyDeviceSettings extends LitElement { const entityState = this.hass.states[device.stat_consumption]; return html`
- + ${entityState ? computeStateName(entityState) diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts index 15dacde33d..96fab20b01 100644 --- a/src/panels/config/entities/entity-registry-settings.ts +++ b/src/panels/config/entities/entity-registry-settings.ts @@ -137,11 +137,10 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) { .value=${this._icon} @value-changed=${this._iconChanged} .label=${this.hass.localize("ui.dialogs.entity_registry.editor.icon")} - .placeholder=${this.entry.original_icon || - domainIcon( - computeDomain(this.entry.entity_id), - this.hass.states[this.entry.entity_id] - )} + .placeholder=${this.entry.original_icon || stateObj?.attributes.icon} + .fallbackPath=${!this._icon && !stateObj?.attributes.icon && stateObj + ? domainIcon(computeDomain(stateObj.entity_id), stateObj) + : undefined} .disabled=${this._submitting} > html` - + template: (_, entry: any) => html` + `, }, name: { @@ -249,18 +253,18 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { tabindex="0" style="display:inline-block; position: relative;" > - + ? mdiCancel + : mdiPencilOff} + > ${entity.restored ? this.hass.localize( @@ -371,9 +375,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { result.push({ ...entry, - icon: entity - ? stateIcon(entity) - : domainIcon(computeDomain(entry.entity_id)), + entity, name: computeEntityRegistryName(this.hass!, entry) || this.hass.localize("state.default.unavailable"), diff --git a/src/panels/config/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts index af6bece8df..9ae73825f4 100644 --- a/src/panels/config/helpers/dialog-helper-detail.ts +++ b/src/panels/config/helpers/dialog-helper-detail.ts @@ -121,10 +121,10 @@ export class DialogHelperDetail extends LitElement { .platform=${platform} dialogInitialFocus > - + .path=${domainIcon(platform)} + > ${this.hass.localize( `ui.panel.config.helpers.types.${platform}` diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts index a8edf6af28..d33d73e32b 100644 --- a/src/panels/config/helpers/ha-config-helpers.ts +++ b/src/panels/config/helpers/ha-config-helpers.ts @@ -1,4 +1,4 @@ -import { mdiPlus } from "@mdi/js"; +import { mdiPencilOff, mdiPlus } from "@mdi/js"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-listbox/paper-listbox"; @@ -42,9 +42,12 @@ export class HaConfigHelpers extends LitElement { icon: { title: "", type: "icon", - template: (icon, helper: any) => html` - - `, + template: (icon, helper: any) => + icon + ? html` ` + : html``, }, name: { title: this.hass.localize( @@ -93,7 +96,7 @@ export class HaConfigHelpers extends LitElement { tabindex="0" style="display:inline-block; position: relative;" > - + ${this.hass.localize( "ui.panel.config.entities.picker.status.readonly" diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 51ffe7e2f4..a3dbdff879 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -691,9 +691,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { margin-left: 4px; font-size: 14px; } - .active-filters ha-icon { - color: var(--primary-color); - } .active-filters mwc-button { margin-left: 8px; } diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts index 46ba6fbd7d..7dc5478939 100644 --- a/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts @@ -6,7 +6,6 @@ import { classMap } from "lit/directives/class-map"; import { navigate } from "../../../../../common/navigate"; import "../../../../../components/buttons/ha-call-service-button"; import "../../../../../components/ha-card"; -import "../../../../../components/ha-icon-next"; import { fetchOZWNetworkStatistics, fetchOZWNetworkStatus, diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts index ce9ec48b4b..8547058884 100644 --- a/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts @@ -11,7 +11,6 @@ import { RowClickedEvent, } from "../../../../../components/data-table/ha-data-table"; import "../../../../../components/ha-card"; -import "../../../../../components/ha-icon-next"; import { fetchOZWNodes, OZWDevice } from "../../../../../data/ozw"; import "../../../../../layouts/hass-tabs-subpage"; import "../../../../../layouts/hass-tabs-subpage-data-table"; diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts index 336d2ee893..7c29bf2cbc 100644 --- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts @@ -4,7 +4,6 @@ import { customElement, property, state } from "lit/decorators"; import { navigate } from "../../../../../common/navigate"; import "../../../../../components/buttons/ha-call-service-button"; import "../../../../../components/ha-card"; -import "../../../../../components/ha-icon-next"; import { fetchOZWNodeConfig, fetchOZWNodeMetadata, diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts index a5c6fc76ca..ec45071c16 100644 --- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts @@ -4,7 +4,6 @@ import { customElement, property, state } from "lit/decorators"; import { navigate } from "../../../../../common/navigate"; import "../../../../../components/buttons/ha-call-service-button"; import "../../../../../components/ha-card"; -import "../../../../../components/ha-icon-next"; import { fetchOZWNodeMetadata, fetchOZWNodeStatus, diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts index 7cb7194876..0b64806fdf 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts @@ -10,7 +10,6 @@ import { } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../../../components/ha-circular-progress"; -import "../../../../../components/ha-icon-button"; import "../../../../../components/ha-service-description"; import { DEVICE_MESSAGE_TYPES, diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts index 4e87e96b1b..f49090c2ad 100644 --- a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts +++ b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts @@ -1,4 +1,4 @@ -import { mdiHelpCircle } from "@mdi/js"; +import { mdiCheckboxMarkedCircle, mdiClose, mdiHelpCircle } from "@mdi/js"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -6,7 +6,7 @@ import "../../../../../components/buttons/ha-call-api-button"; import "../../../../../components/buttons/ha-call-service-button"; import "../../../../../components/ha-card"; import "../../../../../components/ha-circular-progress"; -import "../../../../../components/ha-icon"; +import "../../../../../components/ha-svg-icon"; import "../../../../../components/ha-icon-button"; import "../../../../../components/ha-service-description"; import { @@ -81,7 +81,7 @@ export class ZwaveNetwork extends LitElement {
${this._networkStatus.state === ZWAVE_NETWORK_STATE_STOPPED ? html` - + ${this.hass!.localize( "ui.panel.config.zwave.network_status.network_stopped" )} @@ -100,7 +100,9 @@ export class ZwaveNetwork extends LitElement { ` : this._networkStatus.state === ZWAVE_NETWORK_STATE_AWAKED ? html` - + ${this.hass!.localize( "ui.panel.config.zwave.network_status.network_started" )}
@@ -252,7 +254,7 @@ export class ZwaveNetwork extends LitElement { padding: 24px; } - .network-status ha-icon { + .network-status ha-svg-icon { display: block; margin: 0px auto 16px; width: 48px; diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts index 26b0551106..6cb5b4f5a4 100644 --- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts +++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts @@ -1,4 +1,9 @@ -import { mdiOpenInNew, mdiPlus } from "@mdi/js"; +import { + mdiCheck, + mdiCheckCircleOutline, + mdiOpenInNew, + mdiPlus, +} from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -65,10 +70,10 @@ export class HaConfigLovelaceDashboards extends LitElement { ${title} ${dashboard.default ? html` - + .path=${mdiCheckCircleOutline} + > ${this.hass.localize( `ui.panel.config.lovelace.dashboards.default_dashboard` @@ -127,7 +132,7 @@ export class HaConfigLovelaceDashboards extends LitElement { width: "100px", template: (requireAdmin: boolean) => requireAdmin - ? html` ` + ? html` ` : html` - `, }; columns.show_in_sidebar = { @@ -137,7 +142,9 @@ export class HaConfigLovelaceDashboards extends LitElement { type: "icon", width: "121px", template: (sidebar) => - sidebar ? html` ` : html` - `, + sidebar + ? html` ` + : html` - `, }; } diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts index b5a7f2859d..75748a23b6 100644 --- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts +++ b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts @@ -11,7 +11,6 @@ import { RowClickedEvent, } from "../../../../components/data-table/ha-data-table"; import "../../../../components/ha-fab"; -import "../../../../components/ha-icon"; import "../../../../components/ha-svg-icon"; import { createResource, diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index 46d40bcaae..039611f15a 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -13,12 +13,11 @@ import { ifDefined } from "lit/directives/if-defined"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import { stateIcon } from "../../../common/entity/state_icon"; import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table"; import "../../../components/ha-button-related-filter-menu"; import "../../../components/ha-fab"; -import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; +import "../../../components/ha-state-icon"; import "../../../components/ha-svg-icon"; import { forwardHaptic } from "../../../data/haptics"; import { activateScene, SceneEntity } from "../../../data/scene"; @@ -60,7 +59,6 @@ class HaSceneDashboard extends LitElement { ).map((scene) => ({ ...scene, name: computeStateName(scene), - icon: stateIcon(scene), })); } ); @@ -85,7 +83,8 @@ class HaSceneDashboard extends LitElement { icon: { title: "", type: "icon", - template: (icon) => html` `, + template: (_, scene) => + html` `, }, name: { title: this.hass.localize("ui.panel.config.scene.picker.headers.name"), diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index 2f3eff6b3e..f2d68cca59 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -13,7 +13,6 @@ import memoizeOne from "memoize-one"; import { formatDateTime } from "../../../common/datetime/format_date_time"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import { stateIcon } from "../../../common/entity/state_icon"; import { computeRTL } from "../../../common/util/compute_rtl"; import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table"; import "../../../components/ha-button-related-filter-menu"; @@ -61,7 +60,6 @@ class HaScriptPicker extends LitElement { ).map((script) => ({ ...script, name: computeStateName(script), - icon: stateIcon(script), last_triggered: script.attributes.last_triggered || undefined, })); } @@ -87,7 +85,8 @@ class HaScriptPicker extends LitElement { icon: { title: "", type: "icon", - template: (icon) => html` `, + template: (_icon, script) => + html` `, }, name: { title: this.hass.localize("ui.panel.config.script.picker.headers.name"), diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts index ac5d4394f2..84b0ca9f11 100644 --- a/src/panels/config/users/ha-config-users.ts +++ b/src/panels/config/users/ha-config-users.ts @@ -1,4 +1,4 @@ -import { mdiPlus } from "@mdi/js"; +import { mdiCheck, mdiPlus } from "@mdi/js"; import { html, LitElement, PropertyValues } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -89,7 +89,9 @@ export class HaConfigUsers extends LitElement { filterable: true, width: "80px", template: (is_active) => - is_active ? html` ` : "", + is_active + ? html` ` + : "", }, system_generated: { title: this.hass.localize( @@ -100,7 +102,9 @@ export class HaConfigUsers extends LitElement { filterable: true, width: "160px", template: (generated) => - generated ? html` ` : "", + generated + ? html` ` + : "", }, }; diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index 1a218e9a24..a3c1c7a897 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -4,7 +4,6 @@ import "@polymer/paper-tabs/paper-tab"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { navigate } from "../../common/navigate"; -import "../../components/ha-icon-button"; import "../../components/ha-menu-button"; import "../../components/ha-tabs"; import "../../layouts/ha-app-layout"; diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts index 09673e961f..fe5c64e361 100644 --- a/src/panels/energy/ha-panel-energy.ts +++ b/src/panels/energy/ha-panel-energy.ts @@ -122,9 +122,6 @@ class PanelEnergy extends LitElement { return [ haStyle, css` - ha-icon-button { - color: var(--text-primary-color); - } app-toolbar { display: flex; justify-content: space-between; diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts index 8565b47cdd..3f3c4b3014 100644 --- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts +++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts @@ -155,7 +155,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { .label=${this._stateIconLabel(stateObj.state)} @click=${this._handleMoreInfo} > - +
${(stateObj.state === "disarmed" diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index 6893279f1a..a490f9277c 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -26,7 +26,6 @@ import { computeDomain } from "../../../common/entity/compute_domain"; import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { computeStateDomain } from "../../../common/entity/compute_state_domain"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import { stateIcon } from "../../../common/entity/state_icon"; import { isValidEntityId } from "../../../common/entity/valid_entity_id"; import { iconColorCSS } from "../../../common/style/icon_color_css"; import "../../../components/ha-card"; @@ -167,7 +166,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { > ${this._config.show_icon ? html` - + > ` : ""} ${this._config.show_name @@ -270,18 +269,18 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { outline: none; } - ha-icon { + ha-state-icon { width: 40%; height: auto; color: var(--paper-item-icon-color, #44739e); --mdc-icon-size: 100%; } - ha-icon + span { + ha-state-icon + span { margin-top: 8px; } - ha-icon, + ha-state-icon, span { outline: none; } diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts index 84436c04b4..8b868dc255 100644 --- a/src/panels/lovelace/cards/hui-calendar-card.ts +++ b/src/panels/lovelace/cards/hui-calendar-card.ts @@ -12,7 +12,6 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen import { HASSDomEvent } from "../../../common/dom/fire_event"; import { debounce } from "../../../common/util/debounce"; import "../../../components/ha-card"; -import "../../../components/ha-icon"; import { Calendar, fetchCalendarEvents } from "../../../data/calendar"; import type { CalendarEvent, diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts index d63d721a05..6e3e3d4728 100644 --- a/src/panels/lovelace/cards/hui-entity-card.ts +++ b/src/panels/lovelace/cards/hui-entity-card.ts @@ -14,7 +14,6 @@ import { computeActiveState } from "../../../common/entity/compute_active_state" import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { computeStateDomain } from "../../../common/entity/compute_state_domain"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import { stateIcon } from "../../../common/entity/state_icon"; import { isValidEntityId } from "../../../common/entity/valid_entity_id"; import { formatNumber } from "../../../common/number/format_number"; import { iconColorCSS } from "../../../common/style/icon_color_css"; @@ -122,8 +121,9 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
${name}
- + >
diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index a0ae8b82f8..ce5e92c062 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -15,10 +15,9 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import { stateIcon } from "../../../common/entity/state_icon"; import "../../../components/ha-card"; -import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; +import "../../../components/ha-state-icon"; import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity"; import { LightEntity, lightSupportsDimming } from "../../../data/light"; import { ActionHandlerEvent } from "../../../data/lovelace"; @@ -145,9 +144,10 @@ export class HuiLightCard extends LitElement implements LovelaceCard { })} tabindex="0" > - +
diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 7656cb8400..b078463f4a 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -15,12 +15,11 @@ import { styleMap } from "lit/directives/style-map"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import { stateIcon } from "../../../common/entity/state_icon"; import { supportsFeature } from "../../../common/entity/supports-feature"; import { extractColors } from "../../../common/image/extract_color"; import { debounce } from "../../../common/util/debounce"; import "../../../components/ha-card"; -import "../../../components/ha-icon"; +import "../../../components/ha-state-icon"; import "../../../components/ha-icon-button"; import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog"; import { UNAVAILABLE_STATES } from "../../../data/entity"; @@ -227,7 +226,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { >
- +
${this._config!.name || computeStateName(this.hass!.states[this._config!.entity])} @@ -272,10 +271,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { .label=${this.hass.localize( `ui.card.media_player.${control.action}` )} + .path=${control.icon} action=${control.action} @click=${this._handleClick} > - ` )} @@ -706,7 +705,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { align-items: center; } - .icon-name ha-icon { + .icon-name ha-state-icon { padding-right: 8px; } diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index 13b5e442ee..c46d669a9f 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -14,10 +14,9 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen import { computeDomain } from "../../../common/entity/compute_domain"; import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import { stateIcon } from "../../../common/entity/state_icon"; import "../../../components/ha-card"; -import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; +import "../../../components/ha-state-icon"; import { ActionHandlerEvent } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; import { actionHandler } from "../common/directives/action-handler-directive"; @@ -253,14 +252,18 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { class=${classMap({ "state-on": !STATES_OFF.has(stateObj.state), })} - .label=${`${computeStateName(stateObj)} : ${computeStateDisplay( + title=${`${computeStateName(stateObj)} : ${computeStateDisplay( this.hass!.localize, stateObj, this.hass!.locale )}`} > - + + ${this._config!.show_state !== true && entityConf.show_state !== true ? html`
` : html` diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts index ed3dd31f25..010388ccf0 100644 --- a/src/panels/lovelace/cards/hui-plant-status-card.ts +++ b/src/panels/lovelace/cards/hui-plant-status-card.ts @@ -1,3 +1,9 @@ +import { + mdiEmoticonPoop, + mdiThermometer, + mdiWater, + mdiWhiteBalanceSunny, +} from "@mdi/js"; import { HassEntity } from "home-assistant-js-websocket"; import { css, @@ -10,9 +16,10 @@ import { import { customElement, property, state } from "lit/decorators"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { fireEvent } from "../../../common/dom/fire_event"; +import { batteryIcon } from "../../../common/entity/battery_icon"; import { computeStateName } from "../../../common/entity/compute_state_name"; import "../../../components/ha-card"; -import "../../../components/ha-icon"; +import "../../../components/ha-svg-icon"; import { HomeAssistant } from "../../../types"; import { actionHandler } from "../common/directives/action-handler-directive"; import { findEntities } from "../common/find-entities"; @@ -21,12 +28,12 @@ import { createEntityNotFoundWarning } from "../components/hui-warning"; import { LovelaceCard, LovelaceCardEditor } from "../types"; import { PlantAttributeTarget, PlantStatusCardConfig } from "./types"; -const SENSORS = { - moisture: "hass:water", - temperature: "hass:thermometer", - brightness: "hass:white-balance-sunny", - conductivity: "hass:emoticon-poop", - battery: "hass:battery", +const SENSOR_ICONS = { + moisture: mdiWater, + temperature: mdiThermometer, + brightness: mdiWhiteBalanceSunny, + conductivity: mdiEmoticonPoop, + battery: undefined, }; @customElement("hui-plant-status-card") @@ -132,9 +139,9 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard { .value=${item} >
- +
key in stateObj.attributes); + return Object.keys(SENSOR_ICONS).filter( + (key) => key in stateObj.attributes + ); } private computeIcon(attr: string, batLvl: number): string { - const icon = SENSORS[attr]; if (attr === "battery") { - if (batLvl <= 5) { - return `${icon}-alert`; - } - if (batLvl < 95) { - return `${icon}-${Math.round(batLvl / 10 - 0.01) * 10}`; - } + return batteryIcon(batLvl); } - return icon; + return SENSOR_ICONS[attr]; } private _handleMoreInfo(ev: Event): void { diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts index 491ce3e245..7063c86a67 100644 --- a/src/panels/lovelace/cards/hui-shopping-list-card.ts +++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts @@ -15,7 +15,7 @@ import { guard } from "lit/directives/guard"; import { repeat } from "lit/directives/repeat"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import "../../../components/ha-card"; -import "../../../components/ha-icon"; +import "../../../components/ha-svg-icon"; import "../../../components/ha-checkbox"; import { addItem, @@ -366,11 +366,6 @@ class HuiShoppingListCard align-items: center; } - .addRow ha-icon { - color: var(--secondary-text-color); - --mdc-icon-size: 26px; - } - .addButton { padding-right: 16px; cursor: pointer; diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index dd1b8ae477..7ace186bc7 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -1,4 +1,13 @@ -import { mdiDotsVertical } from "@mdi/js"; +import { + mdiAutorenew, + mdiCalendarSync, + mdiDotsVertical, + mdiFan, + mdiFire, + mdiPower, + mdiSnowflake, + mdiWaterPercent, +} from "@mdi/js"; import "@thomasloven/round-slider"; import { HassEntity } from "home-assistant-js-websocket"; import { @@ -19,7 +28,6 @@ import { computeStateName } from "../../../common/entity/compute_state_name"; import { formatNumber } from "../../../common/number/format_number"; import "../../../components/ha-card"; import type { HaCard } from "../../../components/ha-card"; -import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; import { ClimateEntity, @@ -36,13 +44,13 @@ import { LovelaceCard, LovelaceCardEditor } from "../types"; import { ThermostatCardConfig } from "./types"; const modeIcons: { [mode in HvacMode]: string } = { - auto: "hass:calendar-sync", - heat_cool: "hass:autorenew", - heat: "hass:fire", - cool: "hass:snowflake", - off: "hass:power", - fan_only: "hass:fan", - dry: "hass:water-percent", + auto: mdiCalendarSync, + heat_cool: mdiAutorenew, + heat: mdiFire, + cool: mdiSnowflake, + off: mdiPower, + fan_only: mdiFan, + dry: mdiWaterPercent, }; @customElement("hui-thermostat-card") @@ -418,8 +426,8 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { .mode=${mode} @click=${this._handleAction} tabindex="0" + .path=${modeIcons[mode]} > - `; } diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 7e6acae221..a22b2c3a3a 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -12,12 +12,11 @@ import { formatTime } from "../../../common/datetime/format_time"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import { stateIcon } from "../../../common/entity/state_icon"; import { isValidEntityId } from "../../../common/entity/valid_entity_id"; import { formatNumber } from "../../../common/number/format_number"; import { debounce } from "../../../common/util/debounce"; import "../../../components/ha-card"; -import "../../../components/ha-icon"; +import "../../../components/ha-svg-icon"; import { UNAVAILABLE } from "../../../data/entity"; import { ActionHandlerEvent } from "../../../data/lovelace"; import { @@ -207,10 +206,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
${weatherStateIcon || html` - + .state=${stateObj} + > `}
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts index b1554bfcdd..88094f7dd9 100644 --- a/src/panels/lovelace/components/hui-generic-entity-row.ts +++ b/src/panels/lovelace/components/hui-generic-entity-row.ts @@ -15,7 +15,6 @@ import { computeDomain } from "../../../common/entity/compute_domain"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeRTL } from "../../../common/util/compute_rtl"; import "../../../components/entity/state-badge"; -import "../../../components/ha-icon"; import "../../../components/ha-relative-time"; import { ActionHandlerEvent } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; diff --git a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts index 19ab1a8d46..c843f2b52b 100644 --- a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts @@ -1,3 +1,4 @@ +import { mdiClose } from "@mdi/js"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; @@ -6,7 +7,7 @@ import { customElement, property, state } from "lit/decorators"; import { array, assert, assign, object, optional, string } from "superstruct"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/entity/ha-entity-picker"; -import "../../../../components/ha-icon"; +import "../../../../components/ha-svg-icon"; import { HomeAssistant } from "../../../../types"; import { AlarmPanelCardConfig } from "../../cards/types"; import "../../components/hui-theme-select-editor"; @@ -73,12 +74,11 @@ export class HuiAlarmPanelCardEditor return html`
html`
${entityState} - + >
` )} @@ -146,7 +145,7 @@ export class HuiAlarmPanelCardEditor .states:hover > .deleteState { visibility: visible; } - ha-icon { + ha-svg-icon { padding-top: 12px; } `, diff --git a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts index 777063b1dc..417c4f327e 100644 --- a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts @@ -3,7 +3,6 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { assert, boolean, object, optional, string, assign } from "superstruct"; import { fireEvent } from "../../../../common/dom/fire_event"; -import { stateIcon } from "../../../../common/entity/state_icon"; import { computeRTLDirection } from "../../../../common/util/compute_rtl"; import "../../../../components/ha-formfield"; import "../../../../components/ha-icon-picker"; @@ -19,6 +18,8 @@ import { actionConfigStruct } from "../structs/action-struct"; import { EditorTarget } from "../types"; import { configElementStyle } from "./config-elements-style"; import { baseLovelaceCardConfig } from "../structs/base-card-struct"; +import { computeDomain } from "../../../../common/entity/compute_domain"; +import { domainIcon } from "../../../../common/entity/domain_icon"; const cardConfigStruct = assign( baseLovelaceCardConfig, @@ -107,6 +108,7 @@ export class HuiButtonCardEditor } const dir = computeRTLDirection(this.hass!); + const entityState = this.hass.states[this._entity]; return html`
@@ -140,8 +142,12 @@ export class HuiButtonCardEditor "ui.panel.lovelace.editor.card.config.optional" )})" .value=${this._icon} - .placeholder=${this._icon || - stateIcon(this.hass.states[this._entity])} + .placeholder=${this._icon || entityState?.attributes.icon} + .fallbackPath=${!this._icon && + !entityState?.attributes.icon && + entityState + ? domainIcon(computeDomain(entityState.entity_id), entityState) + : undefined} .configValue=${"icon"} @value-changed=${this._valueChanged} > diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts index 51796a5546..845743d300 100644 --- a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts @@ -3,7 +3,8 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { assert, assign, boolean, object, optional, string } from "superstruct"; import { fireEvent } from "../../../../common/dom/fire_event"; -import { stateIcon } from "../../../../common/entity/state_icon"; +import { computeDomain } from "../../../../common/entity/compute_domain"; +import { domainIcon } from "../../../../common/entity/domain_icon"; import "../../../../components/entity/ha-entity-attribute-picker"; import "../../../../components/ha-icon-picker"; import { HomeAssistant } from "../../../../types"; @@ -77,6 +78,7 @@ export class HuiEntityCardEditor if (!this.hass || !this._config) { return html``; } + const entityState = this.hass.states[this._entity]; return html`
@@ -110,8 +112,12 @@ export class HuiEntityCardEditor "ui.panel.lovelace.editor.card.config.optional" )})" .value=${this._icon} - .placeholder=${this._icon || - stateIcon(this.hass.states[this._entity])} + .placeholder=${this._icon || entityState?.attributes.icon} + .fallbackPath=${!this._icon && + !entityState?.attributes.icon && + entityState + ? domainIcon(computeDomain(entityState.entity_id), entityState) + : undefined} .configValue=${"icon"} @value-changed=${this._valueChanged} > diff --git a/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts b/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts index e5c12a103a..083920c9b5 100644 --- a/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts @@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators"; import { assert } from "superstruct"; import { fireEvent } from "../../../../common/dom/fire_event"; import { computeDomain } from "../../../../common/entity/compute_domain"; -import { stateIcon } from "../../../../common/entity/state_icon"; +import { domainIcon } from "../../../../common/entity/domain_icon"; import "../../../../components/ha-formfield"; import "../../../../components/ha-icon-picker"; import "../../../../components/ha-switch"; @@ -64,6 +64,7 @@ export class HuiGenericEntityRowEditor } const domain = computeDomain(this._entity); + const entityState = this.hass.states[this._entity]; return html`
@@ -88,8 +89,13 @@ export class HuiGenericEntityRowEditor "ui.panel.lovelace.editor.card.generic.icon" )} .value=${this._config.icon} - .placeholder=${stateIcon(this.hass!.states[this._config.entity])} .configValue=${"icon"} + .placeholder=${entityState?.attributes.icon} + .fallbackPath=${!this._icon && + !entityState?.attributes.icon && + entityState + ? domainIcon(computeDomain(entityState.entity_id), entityState) + : undefined} @value-changed=${this._valueChanged} >
diff --git a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts index d1b923533a..7671f60b6e 100644 --- a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts @@ -3,7 +3,6 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { assert, object, optional, string, assign } from "superstruct"; import { fireEvent } from "../../../../common/dom/fire_event"; -import { stateIcon } from "../../../../common/entity/state_icon"; import "../../../../components/ha-icon-picker"; import { ActionConfig } from "../../../../data/lovelace"; import { HomeAssistant } from "../../../../types"; @@ -16,6 +15,8 @@ import { actionConfigStruct } from "../structs/action-struct"; import { EditorTarget } from "../types"; import { configElementStyle } from "./config-elements-style"; import { baseLovelaceCardConfig } from "../structs/base-card-struct"; +import { domainIcon } from "../../../../common/entity/domain_icon"; +import { computeDomain } from "../../../../common/entity/compute_domain"; const cardConfigStruct = assign( baseLovelaceCardConfig, @@ -83,6 +84,8 @@ export class HuiLightCardEditor "none", ]; + const entityState = this.hass.states[this._entity]; + return html`
diff --git a/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts index 9b4855bb0f..2eb8827290 100644 --- a/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts @@ -4,7 +4,6 @@ import { customElement, property, state } from "lit/decorators"; import { assert, assign, object, optional, string } from "superstruct"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/entity/ha-entity-picker"; -import "../../../../components/ha-icon"; import { HomeAssistant } from "../../../../types"; import { PlantStatusCardConfig } from "../../cards/types"; import "../../components/hui-theme-select-editor"; diff --git a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts index 270d14b8f3..811d4a8150 100644 --- a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts @@ -6,7 +6,8 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { assert, assign, number, object, optional, string } from "superstruct"; import { fireEvent } from "../../../../common/dom/fire_event"; -import { stateIcon } from "../../../../common/entity/state_icon"; +import { computeDomain } from "../../../../common/entity/compute_domain"; +import { domainIcon } from "../../../../common/entity/domain_icon"; import "../../../../components/entity/ha-entity-picker"; import "../../../../components/ha-formfield"; import "../../../../components/ha-icon-picker"; @@ -88,6 +89,8 @@ export class HuiSensorCardEditor const graphs = ["line", "none"]; + const entityState = this.hass.states[this._entity]; + return html`
diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts index 9f76adeadc..b261b3c549 100644 --- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts +++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts @@ -8,7 +8,6 @@ import { navigate } from "../../../../common/navigate"; import "../../../../components/ha-circular-progress"; import "../../../../components/ha-dialog"; import "../../../../components/ha-alert"; -import "../../../../components/ha-icon-button"; import type { LovelaceBadgeConfig, LovelaceCardConfig, diff --git a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts index 2f5c1fd115..8d06737195 100644 --- a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts @@ -13,7 +13,6 @@ import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const"; import { computeDomain } from "../../../common/entity/compute_domain"; import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import { stateIcon } from "../../../common/entity/state_icon"; import { formatNumber } from "../../../common/number/format_number"; import "../../../components/entity/state-badge"; import { UNAVAILABLE_STATES } from "../../../data/entity"; @@ -89,7 +88,10 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow { > ${weatherStateIcon || html` - + `}
- + +
${name}