diff --git a/custom_components/browser_mod/browser_mod.js b/custom_components/browser_mod/browser_mod.js
index 8873d5b..241bb96 100644
--- a/custom_components/browser_mod/browser_mod.js
+++ b/custom_components/browser_mod/browser_mod.js
@@ -93,7 +93,9 @@ const e="lovelace-player-device-id";function t(){if(!localStorage[e]){const t=()
             <ha-icon-button
               .icon=${e.muted?"mdi:volume-off":"mdi:volume-high"}
               @click=${this.handleMute}
-            ></ha-icon-button>
+            >
+              <ha-icon .icon=${e.muted?"mdi:volume-off":"mdi:volume-high"}></ha-icon>
+            </ha-icon-button>
             <ha-slider
               min="0"
               max="1"
@@ -108,12 +110,16 @@ const e="lovelace-player-device-id";function t(){if(!localStorage[e]){const t=()
                     .icon=${e.paused?"mdi:play":"mdi:pause"}
                     @click=${this.handlePlayPause}
                     highlight
-                  ></ha-icon-button>
+                  >
+                    <ha-icon .icon=${e.paused?"mdi:play":"mdi:pause"}></ha-icon>
+                  </ha-icon-button>
                 `}
             <ha-icon-button
               .icon=${"mdi:cog"}
               @click=${this.handleMoreInfo}
-            ></ha-icon-button>
+            >
+              <ha-icon .icon=${"mdi:cog"}></ha-icon>
+            </ha-icon-button>
           </div>
 
           <div class="device-id" @click=${this.setDeviceID}>${s}</div>
diff --git a/js/browser-player.js b/js/browser-player.js
index 91d97ef..893502b 100644
--- a/js/browser-player.js
+++ b/js/browser-player.js
@@ -75,7 +75,9 @@ Promise.race(bases).then(() => {
             <ha-icon-button
               .icon=${player.muted ? "mdi:volume-off" : "mdi:volume-high"}
               @click=${this.handleMute}
-            ></ha-icon-button>
+            >
+              <ha-icon .icon=${player.muted ? "mdi:volume-off" : "mdi:volume-high"}></ha-icon>
+            </ha-icon-button>
             <ha-slider
               min="0"
               max="1"
@@ -92,12 +94,16 @@ Promise.race(bases).then(() => {
                     .icon=${player.paused ? "mdi:play" : "mdi:pause"}
                     @click=${this.handlePlayPause}
                     highlight
-                  ></ha-icon-button>
+                  >
+                    <ha-icon .icon=${player.paused ? "mdi:play" : "mdi:pause"}></ha-icon>
+                  </ha-icon-button>
                 `}
             <ha-icon-button
               .icon=${"mdi:cog"}
               @click=${this.handleMoreInfo}
-            ></ha-icon-button>
+            >
+              <ha-icon .icon=${"mdi:cog"}></ha-icon>
+            </ha-icon-button>
           </div>
 
           <div class="device-id" @click=${this.setDeviceID}>${deviceID}</div>