diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.js b/src/panels/lovelace/cards/hui-picture-elements-card.js index bb7a6c1f68..b169ec3cd6 100644 --- a/src/panels/lovelace/cards/hui-picture-elements-card.js +++ b/src/panels/lovelace/cards/hui-picture-elements-card.js @@ -21,6 +21,7 @@ const VALID_TYPES = new Set([ 'image', 'navigation', 'service-button', + 'service-icon', 'state-badge', 'state-icon', 'state-label', @@ -139,6 +140,13 @@ class HuiPictureElementsCard extends NavigateMixin(EventsMixin(LocalizeMixin(Pol el.innerText = element.title; el.hass = this.hass; break; + case 'service-icon': + el = document.createElement('ha-icon'); + el.icon = element.icon; + el.title = element.title || ''; + el.addEventListener('click', () => this._handleClick(element)); + el.classList.add('clickable'); + break; case 'state-badge': el = document.createElement('ha-state-label-badge'); el.state = this.hass.states[entityId]; @@ -232,16 +240,17 @@ class HuiPictureElementsCard extends NavigateMixin(EventsMixin(LocalizeMixin(Pol } _handleClick(elementConfig) { - const tapAction = elementConfig.tap_action || 'more_info'; + const tapAction = elementConfig.tap_action || (elementConfig.type === 'service-icon' ? + 'call-service' : 'more-info'); switch (tapAction) { - case 'more_info': + case 'more-info': this.fire('hass-more-info', { entityId: elementConfig.entity }); break; case 'toggle': toggleEntity(this.hass, elementConfig.entity); break; - case 'call_service': { + case 'call-service': { const [domain, service] = elementConfig.service.split('.', 2); const serviceData = Object.assign( {}, { entity_id: elementConfig.entity },