From 63c73b5b9aab3132e91dd79e87fd8d44030aed0c Mon Sep 17 00:00:00 2001
From: regevbr <regevbr@gmail.com>
Date: Thu, 28 Oct 2021 13:01:51 +0300
Subject: [PATCH 1/2] fix icons

---
 src/components/dropdown.js      |  1 +
 src/components/mediaControls.js | 11 +++++++++++
 src/components/powerstrip.js    |  3 +++
 3 files changed, 15 insertions(+)

diff --git a/src/components/dropdown.js b/src/components/dropdown.js
index 9d8df6b..ccfa64c 100755
--- a/src/components/dropdown.js
+++ b/src/components/dropdown.js
@@ -42,6 +42,7 @@ class MiniMediaPlayerDropdown extends LitElement {
             class='mmp-dropdown__button icon'
             slot='dropdown-trigger'
             .icon=${ICON.DROPDOWN}>
+            <ha-icon .icon=${ICON.DROPDOWN}></ha-icon>
           </ha-icon-button>
         ` : html`
           <mmp-button class='mmp-dropdown__button' slot='dropdown-trigger'>
diff --git a/src/components/mediaControls.js b/src/components/mediaControls.js
index 5695731..c4b396b 100755
--- a/src/components/mediaControls.js
+++ b/src/components/mediaControls.js
@@ -49,6 +49,7 @@ class MiniMediaPlayerMediaControls extends LitElement {
             <ha-icon-button
               @click=${e => this.player.prev(e)}
               .icon=${ICON.PREV}>
+             <ha-icon .icon=${ICON.PREV}></ha-icon>
             </ha-icon-button>` : ''}
           ${this.renderJumpBackwardButton()}
           ${this.renderPlayButtons()}
@@ -57,6 +58,7 @@ class MiniMediaPlayerMediaControls extends LitElement {
             <ha-icon-button
               @click=${e => this.player.next(e)}
               .icon=${ICON.NEXT}>
+             <ha-icon .icon=${ICON.NEXT}></ha-icon>
             </ha-icon-button>` : ''}
         </div>
       ` : html``}
@@ -133,10 +135,12 @@ class MiniMediaPlayerMediaControls extends LitElement {
       <ha-icon-button
         @click=${e => this.player.volumeDown(e)}
         .icon=${ICON.VOL_DOWN}>
+          <ha-icon .icon=${ICON.VOL_DOWN}></ha-icon>
       </ha-icon-button>
       <ha-icon-button
         @click=${e => this.player.volumeUp(e)}
         .icon=${ICON.VOL_UP}>
+          <ha-icon .icon=${ICON.VOL_UP}></ha-icon>
       </ha-icon-button>
     `;
   }
@@ -156,6 +160,7 @@ class MiniMediaPlayerMediaControls extends LitElement {
           <ha-icon-button
             @click=${e => this.player.playPause(e)}
             .icon=${ICON.PLAY[this.player.isPlaying]}>
+            <ha-icon .icon=${ICON.PLAY[this.player.isPlaying]}></ha-icon>
           </ha-icon-button>
         `;
       case 'stop':
@@ -163,6 +168,7 @@ class MiniMediaPlayerMediaControls extends LitElement {
           <ha-icon-button
             @click=${e => this.player.stop(e)}
             .icon=${ICON.STOP.true}>
+            <ha-icon .icon=${ICON.STOP.true}></ha-icon>
           </ha-icon-button>
         `;
       case 'play_stop':
@@ -170,6 +176,7 @@ class MiniMediaPlayerMediaControls extends LitElement {
           <ha-icon-button
             @click=${e => this.player.playStop(e)}
             .icon=${ICON.STOP[this.player.isPlaying]}>
+            <ha-icon .icon=${ICON.STOP[this.player.isPlaying]}></ha-icon>
           </ha-icon-button>
         `;
       case 'next':
@@ -177,6 +184,7 @@ class MiniMediaPlayerMediaControls extends LitElement {
           <ha-icon-button
             @click=${e => this.player.next(e)}
             .icon=${ICON.NEXT}>
+            <ha-icon .icon=${ICON.NEXT}></ha-icon>
           </ha-icon-button>
         `;
       default:
@@ -185,6 +193,7 @@ class MiniMediaPlayerMediaControls extends LitElement {
           <ha-icon-button
             @click=${e => this.player.toggleMute(e)}
             .icon=${ICON.MUTE[muted]}>
+            <ha-icon .icon=${ICON.MUTE[muted]}></ha-icon>
           </ha-icon-button>
         `;
     }
@@ -197,12 +206,14 @@ class MiniMediaPlayerMediaControls extends LitElement {
         <ha-icon-button
           @click=${e => this.player.playPause(e)}
           .icon=${ICON.PLAY[this.player.isPlaying]}>
+            <ha-icon .icon=${ICON.PLAY[this.player.isPlaying]}></ha-icon>
         </ha-icon-button>
       ` : html``}
       ${!hide.play_stop ? html`
         <ha-icon-button
           @click=${e => this.handleStop(e)}
           .icon=${hide.play_pause ? ICON.STOP[this.player.isPlaying] : ICON.STOP.true}>
+            <ha-icon .icon=${hide.play_pause ? ICON.STOP[this.player.isPlaying] : ICON.STOP.true}></ha-icon>
         </ha-icon-button>
       ` : html``}
     `;
diff --git a/src/components/powerstrip.js b/src/components/powerstrip.js
index c17d4d8..c8a9fcd 100755
--- a/src/components/powerstrip.js
+++ b/src/components/powerstrip.js
@@ -94,12 +94,14 @@ class MiniMediaPlayerPowerstrip extends LitElement {
           ?inactive=${!this.player.isGrouped}
           ?color=${this.groupVisible}
           @click=${this.handleGroupClick}>
+          <ha-icon .icon=${this.icon}></ha-icon>
         </ha-icon-button>` : ''}
       ${this.showPowerButton ? html`
         <ha-icon-button class='power-button'
           .icon=${ICON.POWER}
           @click=${e => this.player.toggle(e)}
           ?color=${this.powerColor}>
+          <ha-icon .icon=${ICON.POWER}></ha-icon>
         </ha-icon-button>` : ''}
     `;
   }
@@ -115,6 +117,7 @@ class MiniMediaPlayerPowerstrip extends LitElement {
         <ha-icon-button
           .icon=${ICON.PLAY[this.player.isPlaying]}
           @click=${e => this.player.playPause(e)}>
+          <ha-icon .icon=${ICON.PLAY[this.player.isPlaying]}></ha-icon>
         </ha-icon-button>`;
     else if (this.showLabel)
       return html`

From 9e5630076e960a839b0558876451521b2ba9597f Mon Sep 17 00:00:00 2001
From: regevbr <regevbr@gmail.com>
Date: Thu, 28 Oct 2021 23:55:43 +0300
Subject: [PATCH 2/2] fix icons

---
 src/components/mediaControls.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/mediaControls.js b/src/components/mediaControls.js
index c4b396b..49c850e 100755
--- a/src/components/mediaControls.js
+++ b/src/components/mediaControls.js
@@ -73,6 +73,7 @@ class MiniMediaPlayerMediaControls extends LitElement {
           @click=${e => this.player.toggleShuffle(e)}
           .icon=${ICON.SHUFFLE}
           ?color=${this.player.shuffle}>
+          <ha-icon .icon=${ICON.SHUFFLE}></ha-icon>
         </ha-icon-button>
       </div>
     ` : html``;
@@ -89,6 +90,7 @@ class MiniMediaPlayerMediaControls extends LitElement {
           @click=${e => this.player.toggleRepeat(e)}
           .icon=${ICON.REPEAT[this.player.repeat]}
           ?color=${colored}>
+          <ha-icon .icon=${ICON.REPEAT[this.player.repeat]}></ha-icon>
         </ha-icon-button>
       </div>
     `;
@@ -226,6 +228,7 @@ class MiniMediaPlayerMediaControls extends LitElement {
       <ha-icon-button
         @click=${e => this.player.jump(e, this.jumpAmount)}
         .icon=${ICON.FAST_FORWARD}>
+        <ha-icon .icon=${ICON.FAST_FORWARD}></ha-icon>
       </ha-icon-button>
     `;
   }
@@ -237,6 +240,7 @@ class MiniMediaPlayerMediaControls extends LitElement {
       <ha-icon-button
         @click=${e => this.player.jump(e, -this.jumpAmount)}
         .icon=${ICON.REWIND}>
+        <ha-icon .icon=${ICON.REWIND}></ha-icon>
       </ha-icon-button>
     `;
   }