diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts
index 2a54b7053c..85ac9db862 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -1,4 +1,6 @@
 import "@material/mwc-button/mwc-button";
+import "@material/mwc-icon-button";
+import { mdiPlayBoxMultiple } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
@@ -19,6 +21,7 @@ import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-paper-dropdown-menu";
 import "../../../components/ha-slider";
+import "../../../components/ha-svg-icon";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
 import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity";
 import {
@@ -75,14 +78,13 @@ class MoreInfoMediaPlayer extends LitElement {
               </div>
               ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
                 ? html`
-                    <ha-icon-button
-                      icon="hass:folder-multiple"
+                    <mwc-icon-button
                       .title=${this.hass.localize(
                         "ui.card.media_player.browse_media"
                       )}
                       @click=${this._showBrowseMedia}
-                    >
-                    </ha-icon-button>
+                      ><ha-svg-icon .path=${mdiPlayBoxMultiple}></ha-svg-icon
+                    ></mwc-icon-button>
                   `
                 : ""}
             </div>
diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index 0aa6389e21..e5d17956bc 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -1,3 +1,5 @@
+import "@material/mwc-icon-button";
+import { mdiPlayBoxMultiple } from "@mdi/js";
 import "@polymer/paper-progress/paper-progress";
 import type { PaperProgressElement } from "@polymer/paper-progress/paper-progress";
 import {
@@ -25,6 +27,7 @@ import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-svg-icon";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import {
@@ -403,14 +406,16 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
                           )}
                           ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
                             ? html`
-                                <ha-icon-button
+                                <mwc-icon-button
                                   class="browse-media"
-                                  icon="hass:folder-multiple"
                                   .title=${this.hass.localize(
                                     "ui.card.media_player.browse_media"
                                   )}
                                   @click=${this._handleBrowseMedia}
-                                ></ha-icon-button>
+                                  ><ha-svg-icon
+                                    .path=${mdiPlayBoxMultiple}
+                                  ></ha-svg-icon
+                                ></mwc-icon-button>
                               `
                             : ""}
                         </div>
@@ -866,7 +871,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         --mdc-icon-size: 40px;
       }
 
-      ha-icon-button.browse-media {
+      mwc-icon-button.browse-media {
         position: absolute;
         right: 0;
         --mdc-icon-size: 24px;