Media browser RTL fixes (#12506)

src/components/media-player/dialog-media-manage.ts

@@ -302,6 +302,10 @@ class DialogMediaManage extends LitElement {
           --mdc-theme-primary: var(--mdc-theme-on-primary);
         }
 
+        mwc-list {
+          direction: ltr;
+        }
+
         .danger {
           --mdc-theme-primary: var(--error-color);
         }
@@ -310,6 +314,11 @@ class DialogMediaManage extends LitElement {
           vertical-align: middle;
         }
 
+        :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
+          margin-left: 8px !important;
+          margin-right: 0px !important;
+        }
+
         .refresh {
           display: flex;
           height: 200px;

src/components/media-player/ha-media-manage-button.ts

@@ -59,6 +59,11 @@ class MediaManageButton extends LitElement {
     ha-circular-progress[slot="icon"] {
       vertical-align: middle;
     }
+
+    :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
+      margin-left: 8px;
+      margin-right: 0px;
+    }
   `;
 }
 

src/components/media-player/ha-media-upload-button.ts

@@ -119,6 +119,11 @@ class MediaUploadButton extends LitElement {
     ha-circular-progress[slot="icon"] {
       vertical-align: middle;
     }
+
+    :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
+      margin-left: 8px;
+      margin-right: 0px;
+    }
   `;
 }
 

src/panels/media-browser/ha-panel-media-browser.ts

@@ -16,6 +16,7 @@ import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
 import { navigate } from "../../common/navigate";
 import "../../components/ha-menu-button";
 import "../../components/ha-icon-button";
+import "../../components/ha-icon-button-arrow-prev";
 import "../../components/media-player/ha-media-player-browse";
 import "../../components/media-player/ha-media-manage-button";
 import type {
@@ -85,10 +86,10 @@ class PanelMediaBrowser extends LitElement {
           <app-toolbar>
             ${this._navigateIds.length > 1
               ? html`
-                  <ha-icon-button
+                  <ha-icon-button-arrow-prev
                     .path=${mdiArrowLeft}
                     @click=${this._goBack}
-                  ></ha-icon-button>
+                  ></ha-icon-button-arrow-prev>
                 `
               : html`
                   <ha-menu-button