Configurable drawer icons.

src/components/drawer.ts

@@ -15,6 +15,11 @@ import drawerStyle from '../scss/drawer.scss';
 import { stopEventFromActivatingCardWideActions } from '../utils/action';
 import { isHoverableDevice } from '../utils/basic';
 
+export interface DrawerIcons {
+  open?: string;
+  closed?: string;
+}
+
 @customElement('frigate-card-drawer')
 export class FrigateCardDrawer extends LitElement {
   @property({ attribute: true, reflect: true })
@@ -26,6 +31,9 @@ export class FrigateCardDrawer extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: true })
   public open = false;
 
+  @property({ attribute: false })
+  public icons?: DrawerIcons;
+
   // The 'empty' attribute is used in the styling to change the drawer
   // visibility and that of all descendants if there is no content. Styling is
   // used rather than display or hidden in order to ensure the contents continue
@@ -111,7 +119,9 @@ export class FrigateCardDrawer extends LitElement {
               >
                 <ha-icon
                   class="control"
-                  icon="${this.open ? 'mdi:menu-open' : 'mdi:menu'}"
+                  icon="${this.open
+                    ? this.icons?.open ?? 'mdi:menu-open'
+                    : this.icons?.closed ?? 'mdi:menu'}"
                   @mouseenter=${() => {
                     // Only open the drawer on mousenter when the device
                     // supports hover (otherwise iOS may end up passing on

src/components/gallery.ts

@@ -103,7 +103,14 @@ export class FrigateCardGallery extends LitElement {
 
     // TODO Make this slot choice configuration left/right.
     return html`
-      <frigate-card-surround-basic>
+      <frigate-card-surround-basic
+        .drawerIcons=${{
+          'right': {
+            closed: 'mdi:filter-cog-outline',
+            open: 'mdi:filter-cog'
+          }
+        }}
+      >
         <frigate-card-media-filter
           .hass=${this.hass}
           .cameras=${this.cameras}

src/components/surround-basic.ts

@@ -1,8 +1,7 @@
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
-import { customElement } from 'lit/decorators.js';
-
-import { FrigateCardDrawer } from './drawer.js';
+import { customElement, property } from 'lit/decorators.js';
+import { DrawerIcons, FrigateCardDrawer } from './drawer.js';
 
 import './drawer.js';
 
@@ -14,6 +13,12 @@ interface FrigateCardDrawerOpen {
 
 @customElement('frigate-card-surround-basic')
 export class FrigateCardSurroundBasic extends LitElement {
+  @property({ attribute: false })
+  public drawerIcons?: {
+    left?: DrawerIcons;
+    right?: DrawerIcons;
+  };
+
   protected _refDrawerLeft: Ref<FrigateCardDrawer> = createRef();
   protected _refDrawerRight: Ref<FrigateCardDrawer> = createRef();
   protected _boundDrawerHandler = this._drawerHandler.bind(this);
@@ -53,10 +58,18 @@ export class FrigateCardSurroundBasic extends LitElement {
   protected render(): TemplateResult | void {
     return html` <slot name="above"></slot>
       <slot></slot>
-      <frigate-card-drawer ${ref(this._refDrawerLeft)} location="left">
+      <frigate-card-drawer
+        ${ref(this._refDrawerLeft)}
+        location="left"
+        .icons=${this.drawerIcons?.left}
+      >
         <slot name="left"></slot>
       </frigate-card-drawer>
-      <frigate-card-drawer ${ref(this._refDrawerRight)} location="right">
+      <frigate-card-drawer
+        ${ref(this._refDrawerRight)}
+        location="right"
+        .icons=${this.drawerIcons?.right}
+      >
         <slot name="right"></slot>
       </frigate-card-drawer>
       <slot name="below"></slot>`;