Fix composer button visibility in contrast colour mode (#31255)

* Fix composer button visibility in contrast colour mode

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Simplify

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/_common.pcss

@@ -896,53 +896,23 @@ legend {
 
 @define-mixin composerButtonHighLight {
     background: var(--cpd-color-bg-subtle-primary);
-    &::before {
+    color: var(--cpd-color-icon-primary) !important;
-        background-color: var(--cpd-color-icon-primary) !important;
-    }
 }
 
 @define-mixin composerButton $border-radius, $hover-color, $hover-bg {
-    --size: 26px;
     position: relative;
     cursor: pointer;
-    height: var(--size);
-    line-height: var(--size);
-    width: auto;
-    padding-left: var(--size);
     border-radius: $border-radius;
 
-    &::before {
+    svg {
-        content: "";
+        color: $icon-button-color;
-        position: absolute;
-        top: 3px;
-        left: 3px;
-        height: 20px;
-        width: 20px;
-        background-color: $icon-button-color;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-        z-index: 2;
-    }
-
-    &::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: 0;
-        width: var(--size);
-        height: var(--size);
-        border-radius: $border-radius;
     }
 
     &:hover {
-        &::after {
+        background-color: $hover-bg;
-            background: $hover-bg;
-        }
 
-        &::before {
+        svg {
-            background-color: $hover-color;
+            color: $hover-color;
         }
     }
 }

res/css/views/audio_messages/_PlayPauseButton.pcss

@@ -14,28 +14,16 @@ Please see LICENSE files in the repository root for full details.
     min-height: 32px; /* for when the button is used in a flexbox */
     border-radius: 32px;
     background-color: $system;
+    padding: var(--cpd-space-1-5x);
+    box-sizing: border-box;
 
-    &::before {
+    svg {
-        content: "";
+        color: $secondary-content;
-        position: absolute; /* sizing varies by icon */
-        background-color: $secondary-content;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        top: 6px; /* center */
-        left: 6px; /* center */
         width: 20px;
         height: 20px;
     }
 
-    &.mx_PlayPauseButton_disabled::before {
+    &[disabled] svg {
         opacity: 0.5;
     }
-
-    &.mx_PlayPauseButton_play::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/play-solid.svg");
-    }
-
-    &.mx_PlayPauseButton_pause::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/pause-solid.svg");
-    }
 }

res/css/views/context_menus/_IconizedContextMenu.pcss

@@ -69,11 +69,16 @@ Please see LICENSE files in the repository root for full details.
             }
 
             img,
+            svg,
             .mx_IconizedContextMenu_icon {
                 /* icons */
                 width: 16px;
                 min-width: 16px;
                 max-width: 16px;
+
+                & + .mx_IconizedContextMenu_label {
+                    padding-left: 14px;
+                }
             }
 
             span.mx_IconizedContextMenu_label {
@@ -87,10 +92,6 @@ Please see LICENSE files in the repository root for full details.
                 white-space: nowrap;
             }
 
-            .mx_IconizedContextMenu_icon + .mx_IconizedContextMenu_label {
-                padding-left: 14px;
-            }
-
             .mx_BetaCard_betaPill {
                 margin-left: 16px;
             }
@@ -99,8 +100,6 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_IconizedContextMenu_icon {
         position: relative;
-        width: 16px;
-        height: 16px;
 
         &::before {
             content: "";
@@ -119,6 +118,10 @@ Please see LICENSE files in the repository root for full details.
             color: $alert !important;
         }
 
+        svg {
+            color: var(--cpd-color-icon-critical-primary);
+        }
+
         .mx_IconizedContextMenu_icon::before {
             background-color: var(--cpd-color-icon-critical-primary);
         }
@@ -127,6 +130,10 @@ Please see LICENSE files in the repository root for full details.
     .mx_IconizedContextMenu_option_red {
         color: $alert !important;
 
+        svg {
+            color: $alert;
+        }
+
         .mx_IconizedContextMenu_icon::before {
             background-color: $alert;
         }
@@ -138,6 +145,10 @@ Please see LICENSE files in the repository root for full details.
             color: $accent !important;
         }
 
+        svg {
+            color: $accent;
+        }
+
         .mx_IconizedContextMenu_icon::before {
             background-color: $accent;
         }

res/css/views/rooms/_EmojiButton.pcss

@@ -14,10 +14,6 @@ Please see LICENSE files in the repository root for full details.
     @mixin composerButtonHighLight;
 }
 
-.mx_EmojiButton_icon::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/reaction.svg");
-}
-
 .mx_MessageComposer_wysiwyg {
     .mx_EmojiButton {
         @mixin composerButton 5px, $tertiary-content, $panels;

res/css/views/rooms/_MessageComposer.pcss

@@ -140,6 +140,9 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_MessageComposer_button {
     @mixin composerButton 50%, var(--cpd-color-icon-primary), var(--cpd-color-bg-subtle-primary);
+    padding: 3px;
+    height: 20px;
+    width: 20px;
 
     &:last-child {
         margin-right: auto;
@@ -155,6 +158,11 @@ Please see LICENSE files in the repository root for full details.
             z-index: 2;
         }
     }
+
+    svg {
+        width: inherit;
+        height: inherit;
+    }
 }
 .mx_MessageComposer_wysiwyg {
     .mx_MessageComposer_wrapper {
@@ -193,60 +201,31 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
-.mx_MessageComposer_upload::before {
+.mx_MessageComposer_buttonMenu {
-    mask-image: url("@vector-im/compound-design-tokens/icons/attachment.svg");
+    width: 24px;
-}
+    height: 24px;
+    padding: 1px;
 
-.mx_MessageComposer_poll::before {
+    svg {
-    mask-image: url("@vector-im/compound-design-tokens/icons/polls.svg");
+        width: 24px;
-}
+        height: 24px;
-
+    }
-.mx_MessageComposer_voiceMessage::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
-}
-
-.mx_MessageComposer_plain_text::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/text-formatting.svg");
-}
-
-.mx_MessageComposer_rich_text::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/text-formatting.svg");
-}
-
-.mx_MessageComposer_location::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/location-pin-solid.svg");
-}
-
-.mx_MessageComposer_stickers::before {
-    mask-image: url("$(res)/img/element-icons/room/composer/sticker.svg");
-}
-
-.mx_MessageComposer_buttonMenu::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
 }
 
 .mx_MessageComposer_sendMessage {
     cursor: pointer;
     position: relative;
-    width: 32px;
+    padding: var(--cpd-space-2x);
-    height: 32px;
     border-radius: 100%;
     background-color: var(--cpd-color-icon-accent-tertiary);
+    height: 16px;
+    width: 16px;
 
-    &::before {
+    svg {
-        position: absolute;
+        height: inherit;
-        height: 16px;
+        width: inherit;
-        width: 16px;
-        top: 8px;
-        left: 9px;
 
-        mask-image: url("@vector-im/compound-design-tokens/icons/send-solid.svg");
+        color: var(--cpd-color-icon-on-solid-primary);
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-
-        background-color: var(--cpd-color-icon-on-solid-primary);
-        content: "";
     }
 }
 

res/css/views/rooms/_VoiceRecordComposerTile.pcss

@@ -32,10 +32,12 @@ Please see LICENSE files in the repository root for full details.
     height: 24px;
     vertical-align: middle;
     margin-right: 2px; /* distance from left edge of waveform container (container has some margin too) */
-    background-color: $voice-record-icon-color;
+
-    mask-repeat: no-repeat;
+    svg {
-    mask-size: contain;
+        width: inherit;
-    mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
+        height: inherit;
+        color: $voice-record-icon-color;
+    }
 }
 
 .mx_VoiceRecordComposerTile_uploadingState {
@@ -115,3 +117,9 @@ Please see LICENSE files in the repository root for full details.
         opacity: 1;
     }
 }
+
+@media (forced-colors: active) {
+    .mx_VoiceMessagePrimaryContainer {
+        outline: 1px solid transparent;
+    }
+}

src/components/views/audio_messages/PlayPauseButton.tsx

@@ -6,14 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ReactNode } from "react";
+import React, { type HTMLAttributes, type ReactNode } from "react";
-import classNames from "classnames";
+import { PlayPauseButton as SharedPlayPauseButton } from "@element-hq/web-shared-components";
 
-import { _t } from "../../../languageHandler";
 import { type Playback, PlaybackState } from "../../../audio/Playback";
-import AccessibleButton, { type ButtonProps } from "../elements/AccessibleButton";
 
-type Props = Omit<ButtonProps<"div">, "title" | "onClick" | "disabled" | "element" | "ref"> & {
+type Props = HTMLAttributes<HTMLButtonElement> & {
     // Playback instance to manipulate. Cannot change during the component lifecycle.
     playback: Playback;
 
@@ -27,8 +25,7 @@ type Props = Omit<ButtonProps<"div">, "title" | "onClick" | "disabled" | "elemen
  */
 export default class PlayPauseButton extends React.PureComponent<Props> {
     private onClick = (): void => {
-        // noinspection JSIgnoredPromiseFromCall
+        void this.toggleState();
-        this.toggleState();
     };
 
     public async toggleState(): Promise<void> {
@@ -37,21 +34,14 @@ export default class PlayPauseButton extends React.PureComponent<Props> {
 
     public render(): ReactNode {
         const { playback, playbackPhase, ...restProps } = this.props;
-        const isPlaying = playback.isPlaying;
-        const isDisabled = playbackPhase === PlaybackState.Decoding;
-        const classes = classNames("mx_PlayPauseButton", {
-            mx_PlayPauseButton_play: !isPlaying,
-            mx_PlayPauseButton_pause: isPlaying,
-            mx_PlayPauseButton_disabled: isDisabled,
-        });
 
         return (
-            <AccessibleButton
+            <SharedPlayPauseButton
                 data-testid="play-pause-button"
-                className={classes}
+                className="mx_PlayPauseButton"
-                title={isPlaying ? _t("action|pause") : _t("action|play")}
+                togglePlay={this.onClick}
-                onClick={this.onClick}
+                playing={playback.isPlaying}
-                disabled={isDisabled}
+                disabled={playbackPhase === PlaybackState.Decoding}
                 {...restProps}
             />
         );

src/components/views/context_menus/IconizedContextMenu.tsx

@@ -32,6 +32,7 @@ interface IOptionListProps {
 }
 
 interface IOptionProps extends React.ComponentProps<typeof MenuItem> {
+    icon?: ReactNode;
     iconClassName?: string;
     isDestructive?: boolean;
 }
@@ -114,6 +115,7 @@ export const IconizedContextMenuOption: React.FC<IOptionProps> = ({
     label,
     className,
     iconClassName,
+    icon,
     children,
     isDestructive,
     ...props
@@ -129,6 +131,7 @@ export const IconizedContextMenuOption: React.FC<IOptionProps> = ({
             label={label}
         >
             {iconClassName && <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />}
+            {icon}
             <span className="mx_IconizedContextMenu_label">{label}</span>
             {children}
         </MenuItem>

src/components/views/location/LocationButton.tsx

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ReactNode, type SyntheticEvent, useContext } from "react";
 import classNames from "classnames";
 import { type RoomMember, type IEventRelation } from "matrix-js-sdk/src/matrix";
+import { LocationPinSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import { CollapsibleButton } from "../rooms/CollapsibleButton";
@@ -54,13 +55,9 @@ const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition, relati
 
     return (
         <React.Fragment>
-            <CollapsibleButton
+            <CollapsibleButton className={className} onClick={openMenu} title={_t("common|location")} inputRef={button}>
-                className={className}
+                <LocationPinSolidIcon />
-                iconClassName="mx_MessageComposer_location"
+            </CollapsibleButton>
-                onClick={openMenu}
-                title={_t("common|location")}
-                inputRef={button}
-            />
 
             {contextMenu}
         </React.Fragment>

src/components/views/rooms/CollapsibleButton.tsx

@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type RefObject, useContext } from "react";
-import classNames from "classnames";
 
 import AccessibleButton, { type ButtonProps } from "../elements/AccessibleButton";
 import { OverflowMenuContext } from "./MessageComposerButtons";
@@ -16,24 +15,16 @@ import { IconizedContextMenuOption } from "../context_menus/IconizedContextMenu"
 interface Props extends Omit<ButtonProps<"div">, "element"> {
     inputRef?: RefObject<HTMLElement | null>;
     title: string;
-    iconClassName: string;
 }
 
-export const CollapsibleButton: React.FC<Props> = ({
+export const CollapsibleButton: React.FC<Props> = ({ title, children, className, inputRef, ...props }) => {
-    title,
-    children,
-    className,
-    iconClassName,
-    inputRef,
-    ...props
-}) => {
     const inOverflowMenu = !!useContext(OverflowMenuContext);
     if (inOverflowMenu) {
-        return <IconizedContextMenuOption {...props} iconClassName={iconClassName} label={title} inputRef={inputRef} />;
+        return <IconizedContextMenuOption {...props} icon={children} label={title} inputRef={inputRef} />;
     }
 
     return (
-        <AccessibleButton {...props} title={title} className={classNames(className, iconClassName)} ref={inputRef}>
+        <AccessibleButton {...props} title={title} className={className} ref={inputRef}>
             {children}
         </AccessibleButton>
     );

src/components/views/rooms/EmojiButton.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import classNames from "classnames";
 import React, { type JSX, useContext } from "react";
+import { ReactionIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import ContextMenu, { aboveLeftOf, type MenuProps, useContextMenu } from "../../structures/ContextMenu";
@@ -50,11 +51,12 @@ export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonP
         <>
             <CollapsibleButton
                 className={computedClassName}
-                iconClassName="mx_EmojiButton_icon"
                 onClick={openMenu}
                 title={_t("common|emoji")}
                 inputRef={button}
-            />
+            >
+                <ReactionIcon />
+            </CollapsibleButton>
 
             {contextMenu}
         </>

src/components/views/rooms/MessageComposer.tsx

@@ -18,7 +18,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { Tooltip } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
-import { LockOffIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { LockOffIcon, SendSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -72,7 +72,9 @@ function SendButton(props: ISendButtonProps): JSX.Element {
             onClick={props.onClick}
             title={props.title ?? _t("composer|send_button_title")}
             data-testid="sendmessagebtn"
-        />
+        >
+            <SendSolidIcon />
+        </AccessibleButton>
     );
 }
 

src/components/views/rooms/MessageComposerButtons.tsx

@@ -15,6 +15,13 @@ import {
     M_POLL_START,
 } from "matrix-js-sdk/src/matrix";
 import React, { type JSX, createContext, type ReactElement, type ReactNode, useContext, useRef } from "react";
+import {
+    AttachmentIcon,
+    MicOnSolidIcon,
+    OverflowHorizontalIcon,
+    PollsIcon,
+    TextFormattingIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import { CollapsibleButton } from "./CollapsibleButton";
@@ -35,6 +42,7 @@ import { filterBoolean } from "../../../utils/arrays";
 import { useSettingValue } from "../../../hooks/useSettings";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
 import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
+import { Icon as StickersIcon } from "../../../../res/img/element-icons/room/composer/sticker.svg";
 
 interface IProps {
     addEmoji: (emoji: string) => boolean;
@@ -125,7 +133,9 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
                     className={moreOptionsClasses}
                     onClick={props.toggleButtonMenu}
                     title={_t("quick_settings|sidebar_settings")}
-                />
+                >
+                    <OverflowHorizontalIcon />
+                </AccessibleButton>
             )}
             {props.isMenuOpen && (
                 <IconizedContextMenu
@@ -235,12 +245,9 @@ const UploadButton: React.FC = () => {
     };
 
     return (
-        <CollapsibleButton
+        <CollapsibleButton className="mx_MessageComposer_button" onClick={onClick} title={_t("common|attachment")}>
-            className="mx_MessageComposer_button"
+            <AttachmentIcon />
-            iconClassName="mx_MessageComposer_upload"
+        </CollapsibleButton>
-            onClick={onClick}
-            title={_t("common|attachment")}
-        />
     );
 };
 
@@ -250,10 +257,11 @@ function showStickersButton(props: IProps): ReactElement | null {
             id="stickersButton"
             key="controls_stickers"
             className="mx_MessageComposer_button"
-            iconClassName="mx_MessageComposer_stickers"
             onClick={() => props.setStickerPickerOpen(!props.isStickerPickerOpen)}
             title={props.isStickerPickerOpen ? _t("composer|close_sticker_picker") : _t("common|sticker")}
-        />
+        >
+            <StickersIcon />
+        </CollapsibleButton>
     ) : null;
 }
 
@@ -263,10 +271,11 @@ function voiceRecordingButton(props: IProps, narrow: boolean): ReactElement | nu
         <CollapsibleButton
             key="voice_message_send"
             className="mx_MessageComposer_button"
-            iconClassName="mx_MessageComposer_voiceMessage"
             onClick={props.onRecordStartEndClick}
             title={_t("composer|voice_message_button")}
-        />
+        >
+            <MicOnSolidIcon />
+        </CollapsibleButton>
     );
 }
 
@@ -318,10 +327,11 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
         return (
             <CollapsibleButton
                 className="mx_MessageComposer_button"
-                iconClassName="mx_MessageComposer_poll"
                 onClick={this.onCreateClick}
                 title={_t("composer|poll_button")}
-            />
+            >
+                <PollsIcon />
+            </CollapsibleButton>
         );
     }
 }
@@ -349,15 +359,9 @@ function ComposerModeButton({ isRichTextEnabled, onClick }: WysiwygToggleButtonP
     const title = isRichTextEnabled ? _t("composer|mode_plain") : _t("composer|mode_rich_text");
 
     return (
-        <CollapsibleButton
+        <CollapsibleButton className="mx_MessageComposer_button" onClick={onClick} title={title}>
-            className="mx_MessageComposer_button"
+            <TextFormattingIcon />
-            iconClassName={classNames({
+        </CollapsibleButton>
-                mx_MessageComposer_plain_text: !isRichTextEnabled,
-                mx_MessageComposer_rich_text: isRichTextEnabled,
-            })}
-            onClick={onClick}
-            title={title}
-        />
     );
 }
 

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ReactNode } from "react";
 import { type Room, type IEventRelation, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { DeleteIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import { RecordingState } from "../../../audio/VoiceRecording";
@@ -274,7 +275,9 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
                     className="mx_VoiceRecordComposerTile_delete"
                     title={_t("action|delete")}
                     onClick={this.onCancel}
-                />
+                >
+                    <DeleteIcon />
+                </AccessibleButton>
             );
         }
 

test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -529,22 +529,61 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             >
               <div
                 aria-label="Emoji"
-                class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
+                class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
                 role="button"
                 tabindex="0"
-              />
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                  />
+                  <path
+                    d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+                  />
+                </svg>
+              </div>
               <div
                 aria-label="Attachment"
-                class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
+                class="mx_AccessibleButton mx_MessageComposer_button"
                 role="button"
                 tabindex="0"
-              />
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                  />
+                </svg>
+              </div>
               <div
                 aria-label="More options"
                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                 role="button"
                 tabindex="0"
-              />
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                  />
+                </svg>
+              </div>
               <input
                 multiple=""
                 style="display: none;"
@@ -832,22 +871,61 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
             >
               <div
                 aria-label="Emoji"
-                class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
+                class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
                 role="button"
                 tabindex="0"
-              />
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                  />
+                  <path
+                    d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+                  />
+                </svg>
+              </div>
               <div
                 aria-label="Attachment"
-                class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
+                class="mx_AccessibleButton mx_MessageComposer_button"
                 role="button"
                 tabindex="0"
-              />
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                  />
+                </svg>
+              </div>
               <div
                 aria-label="More options"
                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                 role="button"
                 tabindex="0"
-              />
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                  />
+                </svg>
+              </div>
               <input
                 multiple=""
                 style="display: none;"
@@ -1404,22 +1482,61 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
               >
                 <div
                   aria-label="Emoji"
-                  class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
+                  class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
                   role="button"
                   tabindex="0"
-                />
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                    />
+                    <path
+                      d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+                    />
+                  </svg>
+                </div>
                 <div
                   aria-label="Attachment"
-                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
+                  class="mx_AccessibleButton mx_MessageComposer_button"
                   role="button"
                   tabindex="0"
-                />
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                    />
+                  </svg>
+                </div>
                 <div
                   aria-label="More options"
                   class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                   role="button"
                   tabindex="0"
-                />
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                    />
+                  </svg>
+                </div>
                 <input
                   multiple=""
                   style="display: none;"
@@ -1840,22 +1957,61 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
               >
                 <div
                   aria-label="Emoji"
-                  class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
+                  class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
                   role="button"
                   tabindex="0"
-                />
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                    />
+                    <path
+                      d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+                    />
+                  </svg>
+                </div>
                 <div
                   aria-label="Attachment"
-                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
+                  class="mx_AccessibleButton mx_MessageComposer_button"
                   role="button"
                   tabindex="0"
-                />
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                    />
+                  </svg>
+                </div>
                 <div
                   aria-label="More options"
                   class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                   role="button"
                   tabindex="0"
-                />
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                    />
+                  </svg>
+                </div>
                 <input
                   multiple=""
                   style="display: none;"
@@ -2276,22 +2432,61 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
               >
                 <div
                   aria-label="Emoji"
-                  class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
+                  class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
                   role="button"
                   tabindex="0"
-                />
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                    />
+                    <path
+                      d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+                    />
+                  </svg>
+                </div>
                 <div
                   aria-label="Attachment"
-                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
+                  class="mx_AccessibleButton mx_MessageComposer_button"
                   role="button"
                   tabindex="0"
-                />
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                    />
+                  </svg>
+                </div>
                 <div
                   aria-label="More options"
                   class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                   role="button"
                   tabindex="0"
-                />
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                    />
+                  </svg>
+                </div>
                 <input
                   multiple=""
                   style="display: none;"
@@ -2936,22 +3131,61 @@ exports[`RoomView should not display the timeline when the room encryption is lo
               >
                 <div
                   aria-label="Emoji"
-                  class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
+                  class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
                   role="button"
                   tabindex="0"
-                />
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                    />
+                    <path
+                      d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+                    />
+                  </svg>
+                </div>
                 <div
                   aria-label="Attachment"
-                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
+                  class="mx_AccessibleButton mx_MessageComposer_button"
                   role="button"
                   tabindex="0"
-                />
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                    />
+                  </svg>
+                </div>
                 <div
                   aria-label="More options"
                   class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                   role="button"
                   tabindex="0"
-                />
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                    />
+                  </svg>
+                </div>
                 <input
                   multiple=""
                   style="display: none;"
@@ -3442,22 +3676,61 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                   >
                     <div
                       aria-label="Emoji"
-                      class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
+                      class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button"
                       role="button"
                       tabindex="0"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                        />
+                        <path
+                          d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+                        />
+                      </svg>
+                    </div>
                     <div
                       aria-label="Attachment"
-                      class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
+                      class="mx_AccessibleButton mx_MessageComposer_button"
                       role="button"
                       tabindex="0"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                        />
+                      </svg>
+                    </div>
                     <div
                       aria-label="More options"
                       class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                       role="button"
                       tabindex="0"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                        />
+                      </svg>
+                    </div>
                     <input
                       multiple=""
                       style="display: none;"

test/unit-tests/components/views/audio_messages/RecordingPlayback-test.tsx

@@ -82,7 +82,6 @@ describe("<RecordingPlayback />", () => {
     it("disables play button while playback is decoding", async () => {
         const playback = new Playback(new ArrayBuffer(8));
         const component = getComponent({ playback });
-        expect(getPlayButton(component)).toHaveAttribute("disabled");
         expect(getPlayButton(component)).toHaveAttribute("aria-disabled", "true");
     });
 
@@ -90,7 +89,6 @@ describe("<RecordingPlayback />", () => {
         const playback = new Playback(new ArrayBuffer(8));
         const component = getComponent({ playback });
         await flushPromises();
-        expect(getPlayButton(component)).not.toHaveAttribute("disabled");
         expect(getPlayButton(component)).not.toHaveAttribute("aria-disabled", "true");
     });
 
@@ -110,7 +108,6 @@ describe("<RecordingPlayback />", () => {
         await playback.prepare();
         const component = getComponent({ playback });
         // playback already decoded, button is not disabled
-        expect(getPlayButton(component)).not.toHaveAttribute("disabled");
         expect(getPlayButton(component)).not.toHaveAttribute("aria-disabled", "true");
         expect(component.container.querySelector(".text-warning")).toBeFalsy();
     });