Add icon option for apps

.devcontainer/ui-lovelace.yaml

@@ -5,3 +5,7 @@ views:
   - cards:
       - type: custom:roku-card
         entity: media_player.office_roku
+        tv: true
+        apps:
+          - app: Netflix
+            icon: mdi:netflix

README.md

@@ -31,8 +31,8 @@ Use [HACS](https://hacs.xyz) or follow this [guide](https://github.com/thomaslov
 
 ```yaml
 resources:
-    url: /local/roku-card.js
-    type: module
+  url: /local/roku-card.js
+  type: module
 ```
 
 ## Options
@@ -68,6 +68,7 @@ resources:
 | ----------------- | -------- | ------------ | ----------------------------------------------------------- |
 | app               | `string` | **Optional** | Name of the source to launch as `tap_action`                |
 | image             | `string` | **Optional** | Path to image to use for app                                |
+| icon              | `string` | **Optional** | mdi icon to use instead of an image for app                 |
 | tap_action        | `map`    | **Optional** | Tap action map [See action options](#action-options)        |
 | hold_action       | `map`    | **Optional** | Hold action map [See action options](#action-options)       |
 | double_tap_action | `map`    | **Optional** | Doulbe Tap action map [See action options](#action-options) |
@@ -97,7 +98,7 @@ resources:
 ## Usage
 
 ```yaml
-type: "custom:roku-card"
+type: 'custom:roku-card'
 entity: media_player.basement_roku
 tv: true
 apps:
@@ -139,7 +140,7 @@ volume_down:
    `resources:`
 
 ```yaml
-- url: "http://127.0.0.1:5000/roku-card.js"
+- url: 'http://127.0.0.1:5000/roku-card.js'
   type: module
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "roku-card",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Lovelace Roku Card",
   "keywords": [
     "home-assistant",
@@ -48,4 +48,4 @@
     "lint": "eslint src/*.ts",
     "rollup": "rollup -c"
   }
-}
+}

src/const.ts

@@ -1 +1 @@
-export const CARD_VERSION = '1.1.3';
+export const CARD_VERSION = '1.1.4';

src/roku-card.ts

@@ -158,18 +158,31 @@ export class RokuCard extends LitElement {
 
   private _renderImage(index: number): TemplateResult {
     return this._config && this._config.apps && this._config.apps.length > index
-      ? html`
-          <img
-            src=${this._config.apps[index].image || ''}
-            .app=${this._config.apps[index].app}
-            .config=${this._config.apps[index]}
-            @action=${this._handleAction}
-            .actionHandler=${actionHandler({
-              hasHold: hasAction(this._config.apps[index].hold_action),
-              hasDoubleClick: hasAction(this._config.apps[index].double_tap_action),
-            })}
-          />
-        `
+      ? this._config.apps[index].icon
+        ? html`
+            <ha-icon-button
+              .app=${this._config.apps[index].app}
+              icon=${this._config.apps[index].icon!}
+              title=${this._config.apps[index].app!}
+              @action=${this._handleAction}
+              .actionHandler=${actionHandler({
+                hasHold: hasAction(this._config.apps[index].hold_action),
+                hasDoubleClick: hasAction(this._config.apps[index].double_tap_action),
+              })}
+            ></ha-icon-button>
+          `
+        : html`
+            <img
+              src=${this._config.apps[index].image || ''}
+              .app=${this._config.apps[index].app}
+              .config=${this._config.apps[index]}
+              @action=${this._handleAction}
+              .actionHandler=${actionHandler({
+                hasHold: hasAction(this._config.apps[index].hold_action),
+                hasDoubleClick: hasAction(this._config.apps[index].double_tap_action),
+              })}
+            />
+          `
       : html` <ha-icon-button></ha-icon-button> `;
   }
 

src/types.ts

@@ -35,6 +35,7 @@ export interface ActionButtonConfig {
 export interface AppConfig {
   app?: string;
   image?: string;
+  icon?: string;
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;