👽 Switch to new ha-icon component (#304)

kalkih · May 19, 2020 · 2809dc5 · 2809dc5
1 parent fa1427d
commit 2809dc5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/components/dropdown.js b/src/components/dropdown.js
@@ -50,14 +50,14 @@ class MiniMediaPlayerDropdown extends LitElement {
               <span class='mmp-dropdown__label ellipsis'>
                 ${this.selected || this.label}
               </span>
-              <iron-icon class='mmp-dropdown__icon' .icon=${ICON.DROPDOWN}></iron-icon>
+              <ha-icon class='mmp-dropdown__icon' .icon=${ICON.DROPDOWN}></ha-icon>
             </div>
           </mmp-button>
         `}
         <paper-listbox slot="dropdown-content" .selected=${this.selectedId} @iron-select=${this.onChange}>
           ${this.items.map(item => html`
             <paper-item value=${item.id || item.name}>
-              ${item.icon ? html`<iron-icon .icon=${item.icon}></iron-icon>` : ''}
+              ${item.icon ? html`<ha-icon .icon=${item.icon}></ha-icon>` : ''}
               ${item.name ? html`<span class='mmp-dropdown__item__label'>${item.name}</span>` : ''}
             </paper-item>`)}
         </paper-listbox>
@@ -121,7 +121,7 @@ class MiniMediaPlayerDropdown extends LitElement {
         paper-item > *:nth-child(2) {
           margin-left: 4px;
         }
-        paper-menu-button[focused] mmp-button iron-icon {
+        paper-menu-button[focused] mmp-button ha-icon {
           color: var(--mmp-accent-color);
           transform: rotate(180deg);
         }

diff --git a/src/components/shortcuts.js b/src/components/shortcuts.js
@@ -57,7 +57,7 @@ class MiniMediaPlayerShortcuts extends LitElement {
             class='mmp-shortcuts__button'
             @click=${e => this.handleShortcut(e, item)}>
             <div align=${this.shortcuts.align_text}>
-              ${item.icon ? html`<iron-icon .icon=${item.icon}></iron-icon>` : ''}
+              ${item.icon ? html`<ha-icon .icon=${item.icon}></ha-icon>` : ''}
               ${item.image ? html`<img src=${item.image}>` : ''}
               ${item.name ? html`<span class="ellipsis">${item.name}</span>` : ''}
             </div>
@@ -134,7 +134,7 @@ class MiniMediaPlayerShortcuts extends LitElement {
           line-height: calc(var(--mmp-unit) * .6);
           text-transform: initial;
         }
-        .mmp-shortcuts__button > div > iron-icon {
+        .mmp-shortcuts__button > div > ha-icon {
           width: calc(var(--mmp-unit) * .6);
           height: calc(var(--mmp-unit) * .6);
         }

diff --git a/src/main.js b/src/main.js
@@ -37,6 +37,13 @@ if (!customElements.get('ha-icon-button')) {
   );
 }
 
+if (!customElements.get('ha-icon')) {
+  customElements.define(
+    'ha-icon',
+    class extends customElements.get('iron-icon') {},
+  );
+}
+
 class MiniMediaPlayer extends LitElement {
   constructor() {
     super();