diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index 52e3589ca8..e6e1c2678b 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -5,6 +5,7 @@ import {
   PropertyDeclarations,
   TemplateResult,
 } from "lit-element";
+import "@polymer/paper-icon-button/paper-icon-button";
 
 import { fireEvent } from "../../../common/dom/fire_event";
 import { styleMap } from "lit-html/directives/style-map";
@@ -96,11 +97,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
               </div>
             `
           : html`
-              <ha-icon
+              <paper-icon-button
                 icon="hass:dots-vertical"
                 class="more-info"
                 @click="${this._handleMoreInfo}"
-              ></ha-icon>
+              ></paper-icon-button>
               <div id="light"></div>
               <div id="tooltip">
                 <div class="icon-state">
@@ -286,10 +287,10 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
           padding: 8px;
         }
         .more-info {
-          float: right;
+          position: absolute;
           cursor: pointer;
-          padding-top: 16px;
-          padding-right: 16px;
+          top: 0;
+          right: 0;
           z-index: 25;
           color: var(--secondary-text-color);
         }
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 4813e8b642..8ddd773838 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -6,6 +6,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
+import "@polymer/paper-icon-button/paper-icon-button";
 
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
@@ -123,11 +124,11 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
           small: !this._broadCard,
         })}">
         <div id="root">
-          <ha-icon
+          <paper-icon-button
             icon="hass:dots-vertical"
             class="more-info"
             @click="${this._handleMoreInfo}"
-          ></ha-icon>
+          ></paper-icon-button>
           <div id="thermostat"></div>
           <div id="tooltip">
             <div class="title">${this._config.name ||
@@ -548,10 +549,10 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
           margin-left: var(--uom-margin-left);
         }
         .more-info {
-          float: right;
+          position: absolute;
           cursor: pointer;
-          padding-top: 16px;
-          padding-right: 16px;
+          top: 0;
+          right: 0;
           z-index: 25;
           color: var(--secondary-text-color);
         }