Support icon_height for entity button (#2800)

* 🎨 Add support for icon_height

* 🎨 Add icon_height to config ui

* 🔨 Don't expose css for icon_height

* 🔨 Post rebase changes and allow advanced css height

src/panels/lovelace/cards/hui-entity-button-card.ts

@@ -131,6 +131,9 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
                 style="${styleMap({
                   filter: this._computeBrightness(stateObj),
                   color: this._computeColor(stateObj),
+                  height: this._config.icon_height
+                    ? this._config.icon_height
+                    : "auto",
                 })}"
               ></ha-icon>
             `

src/panels/lovelace/editor/config-elements/config-elements-style.ts

@@ -12,5 +12,8 @@ export const configElementStyle = html`
       flex: 1;
       padding-right: 4px;
     }
+    .suffix {
+      margin: 0 8px;
+    }
   </style>
 `;

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

@@ -31,6 +31,7 @@ const cardConfigStruct = struct({
   show_name: "boolean?",
   icon: "string?",
   show_icon: "boolean?",
+  icon_height: "string?",
   tap_action: struct.optional(actionConfigStruct),
   hold_action: struct.optional(actionConfigStruct),
   theme: "string?",
@@ -68,6 +69,12 @@ export class HuiEntityButtonCardEditor extends LitElement
     return this._config!.show_icon || true;
   }
 
+  get _icon_height(): string {
+    return this._config!.icon_height && this._config!.icon_height.includes("px")
+      ? String(parseFloat(this._config!.icon_height))
+      : "";
+  }
+
   get _tap_action(): ActionConfig {
     return this._config!.tap_action || { action: "more-info" };
   }
@@ -125,12 +132,24 @@ export class HuiEntityButtonCardEditor extends LitElement
             >Show Icon?</paper-toggle-button
           >
         </div>
+        <div class="side-by-side">
+          <paper-input
+            label="Icon Height (Optional)"
+            .value="${this._icon_height}"
+            .configValue="${"icon_height"}"
+            @value-changed="${this._valueChanged}"
+            type="number"
+          ><div class="suffix" slot="suffix">px</div>
+          </paper-input>
           <hui-theme-select-editor
             .hass="${this.hass}"
             .value="${this._theme}"
             .configValue="${"theme"}"
             @theme-changed="${this._valueChanged}"
           ></hui-theme-select-editor>
+        </paper-input>
+
+        </div>
         <div class="side-by-side">
           <hui-action-editor
             label="Tap Action"
@@ -169,11 +188,20 @@ export class HuiEntityButtonCardEditor extends LitElement
       if (target.value === "") {
         delete this._config[target.configValue!];
       } else {
+        let newValue: string | undefined;
+        if (
+          target.configValue === "icon_height" &&
+          !isNaN(Number(target.value))
+        ) {
+          newValue = `${String(target.value)}px`;
+        }
         this._config = {
           ...this._config,
           [target.configValue!]:
             target.checked !== undefined
               ? target.checked
+              : newValue !== undefined
+              ? newValue
               : target.value
               ? target.value
               : target.config,