Merge branch 'develop' of github.com:element-hq/matrix-react-sdk into t3chguy/dedup-icons

# Conflicts:
#	playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png
#	playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png
#	playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png
#	playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png
#	playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png
#	playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png

res/css/views/rooms/_ReplyTile.pcss

@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
     font: var(--cpd-font-body-md-regular);
 
     &.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
-        mask-image: url("$(res)/img/element-icons/speaker.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/volume-on-solid.svg");
     }
 
     &.mx_ReplyTile_video .mx_MFileBody_info_icon::before {

res/img/element-icons/speaker.svg

@@ -1,5 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.97991 1.48403L4 4.80062L1 4.80062C0.447715 4.80062 0 5.24834 0 5.80062V10.2006C0 10.7529 0.447714 11.2006 0.999999 11.2006L4 11.2006L7.97991 14.5172C8.30557 14.7886 8.8 14.557 8.8 14.1331V1.86814C8.8 1.44422 8.30557 1.21265 7.97991 1.48403Z" fill="#737D8C"/>
-<path d="M14.1258 2.79107C13.8998 2.50044 13.4809 2.44808 13.1903 2.67413C12.9 2.89992 12.8475 3.3181 13.0726 3.6087L13.0731 3.60935L13.0738 3.61021L13.0829 3.62231C13.0917 3.63418 13.1059 3.65355 13.1248 3.68011C13.1625 3.73326 13.2187 3.81496 13.2872 3.92256C13.4243 4.13812 13.6097 4.45554 13.7955 4.85371C14.169 5.65407 14.5329 6.75597 14.5329 8.00036C14.5329 9.24475 14.169 10.3466 13.7955 11.147C13.6097 11.5452 13.4243 11.8626 13.2872 12.0782C13.2187 12.1858 13.1625 12.2675 13.1248 12.3206C13.1059 12.3472 13.0917 12.3665 13.0829 12.3784L13.0738 12.3905L13.0731 12.3914L13.0725 12.3921C12.8475 12.6827 12.9 13.1008 13.1903 13.3266C13.4809 13.5526 13.8998 13.5003 14.1258 13.2097L13.629 12.8232C14.1258 13.2096 14.1258 13.2097 14.1258 13.2097L14.1272 13.2079L14.1291 13.2055L14.1346 13.1982L14.1523 13.1748C14.1669 13.1552 14.187 13.1277 14.2119 13.0926C14.2617 13.0225 14.3305 12.9221 14.4121 12.794C14.5749 12.5381 14.7895 12.1698 15.0037 11.7109C15.4302 10.7969 15.8663 9.49883 15.8663 8.00036C15.8663 6.50189 15.4302 5.20379 15.0037 4.28987C14.7895 3.83089 14.5749 3.4626 14.4121 3.20673C14.3305 3.07862 14.2617 2.97818 14.2119 2.90811C14.187 2.87306 14.1669 2.84556 14.1523 2.82596L14.1346 2.80249L14.1291 2.79525L14.1272 2.79278L14.1264 2.79183C14.1264 2.79183 14.1258 2.79107 13.5996 3.20036L14.1258 2.79107Z" fill="#737D8C"/>
-<path d="M11.7264 5.19121C11.5004 4.90058 11.0815 4.84823 10.7909 5.07427C10.501 5.29973 10.4482 5.71698 10.6722 6.00752L10.6745 6.01057C10.6775 6.01457 10.6831 6.02223 10.691 6.03338C10.7069 6.05572 10.7318 6.09189 10.7628 6.14057C10.8249 6.23827 10.9103 6.38426 10.9961 6.56815C11.1696 6.93993 11.3335 7.44183 11.3335 8.00051C11.3335 8.55918 11.1696 9.06108 10.9961 9.43287C10.9103 9.61675 10.8249 9.76275 10.7628 9.86045C10.7318 9.90912 10.7069 9.94529 10.691 9.96763C10.6831 9.97879 10.6775 9.98645 10.6745 9.99044L10.6722 9.9935C10.4482 10.284 10.501 10.7013 10.7909 10.9267C11.0815 11.1528 11.5004 11.1004 11.7264 10.8098L11.2002 10.4005C11.7264 10.8098 11.7264 10.8098 11.7264 10.8098L11.7276 10.8083L11.7291 10.8064L11.7329 10.8014L11.7439 10.7868C11.7526 10.7751 11.7642 10.7593 11.7781 10.7396C11.806 10.7004 11.8436 10.6455 11.8876 10.5763C11.9755 10.4383 12.0901 10.2414 12.2043 9.99672C12.4308 9.51136 12.6669 8.81326 12.6669 8.00051C12.6669 7.18775 12.4308 6.48965 12.2043 6.0043C12.0901 5.75961 11.9755 5.56275 11.8876 5.42473C11.8436 5.35555 11.806 5.30065 11.7781 5.26138C11.7642 5.24173 11.7526 5.22596 11.7439 5.21422L11.7329 5.19964L11.7291 5.19465L11.7276 5.19274L11.727 5.19193C11.727 5.19193 11.7264 5.19121 11.2002 5.60051L11.7264 5.19121Z" fill="#737D8C"/>
-</svg>

test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap

@@ -29,9 +29,21 @@ exports[`VoiceBroadcastHeader when rendering a buffering live broadcast header w
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           class="mx_Icon mx_Icon_16"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
           />
+          <path
+            d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+          />
+        </svg>
         <span>
           test user
         </span>
@@ -86,9 +98,21 @@ exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           class="mx_Icon mx_Icon_16"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
           />
+          <path
+            d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+          />
+        </svg>
         <span>
           test user
         </span>
@@ -143,9 +167,21 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           class="mx_Icon mx_Icon_16"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
           />
+          <path
+            d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+          />
+        </svg>
         <span>
           test user
         </span>
@@ -216,9 +252,21 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           class="mx_Icon mx_Icon_16"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
           />
+          <path
+            d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+          />
+        </svg>
         <span>
           test user
         </span>

test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastPlaybackControl-test.tsx.snap

@@ -8,9 +8,18 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state buffering as expe
     role="button"
     tabindex="0"
   >
-    <div
+    <svg
       class="mx_Icon mx_Icon_12"
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
       />
+    </svg>
   </div>
 </div>
 `;
@@ -23,9 +32,18 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state pause as expected
     role="button"
     tabindex="0"
   >
-    <div
+    <svg
       class="mx_Icon mx_Icon_16"
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
       />
+    </svg>
   </div>
 </div>
 `;
@@ -38,9 +56,18 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state playing as expect
     role="button"
     tabindex="0"
   >
-    <div
+    <svg
       class="mx_Icon mx_Icon_12"
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
       />
+    </svg>
   </div>
 </div>
 `;
@@ -53,9 +80,18 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state stopped as expect
     role="button"
     tabindex="0"
   >
-    <div
+    <svg
       class="mx_Icon mx_Icon_16"
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
       />
+    </svg>
   </div>
 </div>
 `;

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap

@@ -32,9 +32,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>
@@ -84,9 +96,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           class="mx_Icon mx_Icon_12"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
           />
+        </svg>
       </div>
       <div
         aria-label="30s forward"
@@ -162,9 +183,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>
@@ -198,9 +231,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           class="mx_Icon mx_Icon_16"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
           />
+        </svg>
       </div>
       <div
         aria-label="30s forward"
@@ -288,9 +330,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>
@@ -324,9 +378,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           class="mx_Icon mx_Icon_12"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
           />
+        </svg>
       </div>
       <div
         aria-label="30s forward"
@@ -402,9 +465,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>
@@ -438,9 +513,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           class="mx_Icon mx_Icon_12"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
           />
+        </svg>
       </div>
       <div
         aria-label="30s forward"
@@ -516,9 +600,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>
@@ -560,9 +656,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           class="mx_Icon mx_Icon_12"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
           />
+        </svg>
       </div>
       <div
         aria-label="30s forward"
@@ -638,9 +743,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>
@@ -664,9 +781,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           class="mx_Icon mx_Icon_16"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
           />
+        </svg>
       </div>
     </div>
     <input
@@ -732,9 +858,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering an error broadcast should ren
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap

@@ -44,9 +44,21 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             Default Device
           </span>

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap

@@ -32,9 +32,21 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>
@@ -85,9 +97,21 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap

@@ -83,9 +83,21 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           class="mx_Icon mx_Icon_16 mx_Icon_alert"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
           />
+          <path
+            d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+          />
+        </svg>
       </div>
       <div
         aria-label="Stop Recording"
@@ -175,9 +187,18 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           class="mx_Icon mx_Icon_12"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
           />
+        </svg>
       </div>
       <div
         aria-label="Change input device"
@@ -185,9 +206,21 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           class="mx_Icon mx_Icon_16 mx_Icon_alert"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
           />
+          <path
+            d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+          />
+        </svg>
       </div>
       <div
         aria-label="Stop Recording"

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap

@@ -44,9 +44,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'pause',
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>
@@ -59,9 +71,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'pause',
       role="button"
       tabindex="0"
     >
-      <div
+      <svg
         class="mx_Icon mx_Icon_16"
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
         />
+      </svg>
     </div>
     <div
       class="mx_AccessibleButton"
@@ -129,9 +150,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'playing'
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>
@@ -152,9 +185,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'playing'
       role="button"
       tabindex="0"
     >
-      <div
+      <svg
         class="mx_Icon mx_Icon_12"
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
         />
+      </svg>
     </div>
     <div
       class="mx_AccessibleButton"
@@ -233,9 +275,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a buffering broadcas
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>
@@ -256,9 +310,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a buffering broadcas
       role="button"
       tabindex="0"
     >
-      <div
+      <svg
         class="mx_Icon mx_Icon_12"
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
         />
+      </svg>
     </div>
     <div
       class="mx_AccessibleButton"
@@ -326,9 +389,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a playing broadcast
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>
@@ -341,9 +416,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a playing broadcast
       role="button"
       tabindex="0"
     >
-      <div
+      <svg
         class="mx_Icon mx_Icon_12"
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
         />
+      </svg>
     </div>
     <div
       class="mx_AccessibleButton"
@@ -411,9 +495,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a stopped broadcast
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_16"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
             />
+            <path
+              d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
+            />
+          </svg>
           <span>
             @user:example.com
           </span>
@@ -426,9 +522,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a stopped broadcast
       role="button"
       tabindex="0"
     >
-      <div
+      <svg
         class="mx_Icon mx_Icon_16"
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
         />
+      </svg>
     </div>
     <div
       class="mx_AccessibleButton"