Merge pull request #7 from siggibjarna/master

Default entity icon is used and is clickable to toggle entity
tcarlsen · Apr 2, 2020 · 0110446 · 0110446
2 parents 637e8a7 + 3687dbe
commit 0110446
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/light-with-profiles.js b/light-with-profiles.js
@@ -29,6 +29,7 @@ class LightWithProfiles extends LitElement {
             const stateObj = this.hass.states[ent.entity];
             return stateObj
               ? html`
+                  <ha-icon class="entity-icon" ?active="${stateObj.state === 'on'}" .icon="${ent.icon ? ent.icon : stateObj.attributes.icon}" @click="${() => this.toggleLight(ent.entity)}"></ha-icon>
                   <span class="label">
                     ${ent.name ? ent.name : stateObj.attributes.friendly_name}
                     ${this.config.debug
@@ -109,11 +110,19 @@ class LightWithProfiles extends LitElement {
     return css`
       .entities {
         display: grid;
-        grid-template-columns: auto auto 46px;
+        grid-template-columns: 24px auto auto 46px;
         gap: 16px 10px;
         margin-top: 8px;
       }
 
+      .entity-icon {
+        fill: var(--disabled-text-color);
+      }
+
+      .entity-icon[active] {
+        fill: var(--primary-color);
+      }
+
       .label {
         font-size: 1.2rem;
         font-weight: 500;