Option to override icon with an image (#639)

README.md

@@ -83,6 +83,7 @@ Inspired by [Custom UI: Mini media player](https://community.home-assistant.io/t
 | entity | string | **required** | v0.1 | An entity_id from an entity within the `media_player` domain.
 | name | string | optional | v0.6 | Override the entities friendly name.
 | icon | string | optional | v0.1 | Specify a custom icon from any of the available mdi icons.
+| icon_image | string | optional | v1.16.2 | Override icon with an image url
 | tap_action | [action object](#action-object-options) | true | v0.7.0 | Action on click/tap.
 | group | boolean | optional | v0.1 | Removes paddings, background color and box-shadow.
 | hide | object | optional | v1.0.0 | Manage visible UI elements, see [hide object](#hide-object) for available options.

src/config/types.ts

@@ -3,6 +3,7 @@ export interface MiniMediaPlayerBaseConfiguration {
   entity: string;
   name?: string;
   icon?: string;
+  icon_image?: string;
   tap_action?: MiniMediaPlayerAction;
   group?: boolean;
   hide?: MiniMediaPlayerHideConfiguration;

src/editor.js

@@ -121,6 +121,13 @@ export default class MiniMediaPlayerEditor extends LitElement {
               .configValue="${'icon'}"
               @value-changed=${this.valueChanged}
             ></paper-input>
+
+            <paper-input
+              label="Icon Image"
+              .value="${this._config.icon_image}"
+              .configValue="${'icon_image'}"
+              @value-changed=${this.valueChanged}
+            ></paper-input>
           </div>
 
           <div class="editor-side-by-side">

src/main.ts

@@ -293,6 +293,12 @@ class MiniMediaPlayer extends LitElement {
       </div>`;
     }
 
+    if (this.config.icon_image != undefined){
+      return html` <div class="entity__icon">
+        <img src="${this.config.icon_image}" height=25/>
+      </div>`;
+    }
+
     const active = !this.config.hide.icon_state && this.player.isActive;
     return html` <div class="entity__icon" ?color=${active}>
       <ha-icon .icon=${this.computeIcon()}></ha-icon>