light-card: icon option (#3771)

* light-card: icon option

closes https://github.com/home-assistant/home-assistant-polymer/issues/3768

* add theme select label property

* address review comments

src/panels/lovelace/cards/hui-light-card.ts

@@ -107,7 +107,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
           <ha-icon
             class="light-icon"
             data-state="${stateObj.state}"
-            .icon="${stateIcon(stateObj)}"
+            .icon="${this._config.icon || stateIcon(stateObj)}"
             style="${styleMap({
               filter: this._computeBrightness(stateObj),
               color: this._computeColor(stateObj),

src/panels/lovelace/cards/types.ts

@@ -107,6 +107,7 @@ export interface LightCardConfig extends LovelaceCardConfig {
   entity: string;
   name?: string;
   theme?: string;
+  icon?: string;
 }
 
 export interface MapCardConfig extends LovelaceCardConfig {

src/panels/lovelace/components/hui-theme-select-editor.ts

@@ -26,7 +26,7 @@ declare global {
 @customElement("hui-theme-select-editor")
 export class HuiThemeSelectEditor extends LitElement {
   @property() public value?: string;
-
+  @property() public label?: string;
   @property() public hass?: HomeAssistant;
 
   protected render(): TemplateResult | void {
@@ -36,7 +36,8 @@ export class HuiThemeSelectEditor extends LitElement {
 
     return html`
       <paper-dropdown-menu
-        label="Theme"
+        .label=${this.label ||
+          this.hass!.localize("ui.panel.lovelace.editor.theme_select.theme")}
         dynamic-align
         @value-changed="${this._changed}"
       >

src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts

@@ -23,6 +23,7 @@ const cardConfigStruct = struct({
   name: "string?",
   entity: "string?",
   theme: "string?",
+  icon: "string?",
 });
 
 @customElement("hui-light-card-editor")
@@ -49,6 +50,10 @@ export class HuiLightCardEditor extends LitElement
     return this._config!.entity || "";
   }
 
+  get _icon(): string {
+    return this._config!.icon || "";
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return html``;
@@ -57,28 +62,37 @@ export class HuiLightCardEditor extends LitElement
     return html`
       ${configElementStyle}
       <div class="card-config">
-        <paper-input
+        <ha-entity-picker
-          label="Name"
+          label="Light Entity (Required)"
-          .value="${this._name}"
+          .hass="${this.hass}"
-          .configValue="${"name"}"
+          .value="${this._entity}"
-          @value-changed="${this._valueChanged}"
+          .configValue=${"entity"}
-        ></paper-input>
+          domain-filter="light"
+          @change="${this._valueChanged}"
+          allow-custom-entity
+        ></ha-entity-picker>
         <div class="side-by-side">
-          <ha-entity-picker
+          <paper-input
-            .hass="${this.hass}"
+            label="Name (Optional)"
-            .value="${this._entity}"
+            .value="${this._name}"
-            .configValue=${"entity"}
+            .configValue="${"name"}"
-            domain-filter="light"
+            @value-changed="${this._valueChanged}"
-            @change="${this._valueChanged}"
+          ></paper-input>
-            allow-custom-entity
+          <paper-input
-          ></ha-entity-picker>
+            label="Icon (Optional)"
-          <hui-theme-select-editor
+            .value="${this._icon}"
-            .hass="${this.hass}"
+            .configValue="${"icon"}"
-            .value="${this._theme}"
+            @value-changed="${this._valueChanged}"
-            .configValue="${"theme"}"
+          ></paper-input>
-            @theme-changed="${this._valueChanged}"
-          ></hui-theme-select-editor>
         </div>
+
+        <hui-theme-select-editor
+          label="Theme (Optional)"
+          .hass="${this.hass}"
+          .value="${this._theme}"
+          .configValue="${"theme"}"
+          @theme-changed="${this._valueChanged}"
+        ></hui-theme-select-editor>
       </div>
     `;
   }

src/translations/en.json

@@ -1110,6 +1110,9 @@
             "para_no_id": "This element doesn't have an ID. Please add an ID to this element in 'ui-lovelace.yaml'.",
             "para_migrate": "Home Assistant can add ID's to all your cards and views automatically for you by pressing the 'Migrate config' button.",
             "migrate": "Migrate config"
+          },
+          "theme": {
+            "theme": "Theme (Optional)"
           }
         },
         "warning": {