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

# Conflicts: # res/css/views/rooms/_MessageComposerFormatBar.pcss # src/components/views/elements/Pill.tsx # src/components/views/messages/MessageActionBar.tsx # src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
2026-11-06 06:28:27 +00:00 · 2024-10-04 14:37:25 +01:00
parent 2ccac7fe57 26b0e83ac4
commit 82d9e92427
49 changed files with 1354 additions and 199 deletions
@@ -46,6 +46,7 @@ module.exports = {

        "import/no-duplicates": ["error"],
        // Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
+        // Ban compound-design-tokens raw svg imports in favour of their React component counterparts
        "no-restricted-imports": [
            "error",
            {
@@ -150,6 +151,10 @@ module.exports = {
                        message:
                            "This regex doesn't actually test for emoji. See the docs at https://emojibase.dev/docs/regex/ and prefer our own EMOJI_REGEX from HtmlUtils.",
                    },
+                    {
+                        group: ["@vector-im/compound-design-tokens/icons/*"],
+                        message: "Please use @vector-im/compound-design-tokens/assets/web/icons/* instead",
+                    },
                ],
            },
        ],
@@ -72,7 +72,7 @@
    },
    "dependencies": {
        "@babel/runtime": "^7.12.5",
-        "@matrix-org/analytics-events": "^0.25.0",
+        "@matrix-org/analytics-events": "^0.26.0",
        "@matrix-org/emojibase-bindings": "^1.1.2",
        "@matrix-org/matrix-wysiwyg": "2.37.9",
        "@matrix-org/react-sdk-module-api": "^2.4.0",
@@ -55,6 +55,7 @@ Please see LICENSE files in the repository root for full details.
        width: 100%;
        mask-repeat: no-repeat;
        mask-position: center;
+        mask-size: 20px;
        background-color: var(--cpd-color-icon-secondary);
    }

@@ -84,7 +85,6 @@ Please see LICENSE files in the repository root for full details.

    .mx_MessageComposerFormatBar_buttonIconInsertLink::after {
        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
-        mask-size: 18px;
    }
 }

@@ -10,8 +10,10 @@ Please see LICENSE files in the repository root for full details.
 import React, { ReactNode } from "react";
 import { NumberSize, Resizable } from "re-resizable";
 import { Direction } from "re-resizable/lib/resizer";
+import { WebPanelResize } from "@matrix-org/analytics-events/types/typescript/WebPanelResize";

 import ResizeNotifier from "../../utils/ResizeNotifier";
+import { PosthogAnalytics } from "../../PosthogAnalytics.ts";

 interface IProps {
    resizeNotifier: ResizeNotifier;
@@ -26,14 +28,16 @@ interface IProps {
     */
    sizeKey?: string;
    /**
-     * The size to use for the panel component if one isn't persisted in storage. Defaults to 350.
+     * The size to use for the panel component if one isn't persisted in storage. Defaults to 320.
     */
    defaultSize: number;
+
+    analyticsRoomType: WebPanelResize["roomType"];
 }

 export default class MainSplit extends React.Component<IProps> {
    public static defaultProps = {
-        defaultSize: 350,
+        defaultSize: 320,
    };

    private onResizeStart = (): void => {
@@ -58,11 +62,16 @@ export default class MainSplit extends React.Component<IProps> {
        elementRef: HTMLElement,
        delta: NumberSize,
    ): void => {
+        const newSize = this.loadSidePanelSize().width + delta.width;
        this.props.resizeNotifier.stopResizing();
-        window.localStorage.setItem(
-            this.sizeSettingStorageKey,
-            (this.loadSidePanelSize().width + delta.width).toString(),
-        );
+        window.localStorage.setItem(this.sizeSettingStorageKey, newSize.toString());
+
+        PosthogAnalytics.instance.trackEvent<WebPanelResize>({
+            eventName: "WebPanelResize",
+            panel: "right",
+            roomType: this.props.analyticsRoomType,
+            size: newSize,
+        });
    };

    private loadSidePanelSize(): { height: string | number; width: number } {
@@ -269,7 +269,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
                <div className="mx_RoomStatusBar">
                    <div role="alert">
                        <div className="mx_RoomStatusBar_connectionLostBar">
-                            <WarningIcon width="24" height="24" />
+                            <WarningIcon width="24px" height="24px" />
                            <div>
                                <div className="mx_RoomStatusBar_connectionLostBar_title">
                                    {_t("room|status_bar|server_connectivity_lost_title")}
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-import React, { ChangeEvent, createRef, ReactElement, ReactNode, RefObject, useContext } from "react";
+import React, { ChangeEvent, ComponentProps, createRef, ReactElement, ReactNode, RefObject, useContext } from "react";
 import classNames from "classnames";
 import {
    IRecommendedVersion,
@@ -54,7 +54,7 @@ import WidgetEchoStore from "../../stores/WidgetEchoStore";
 import SettingsStore from "../../settings/SettingsStore";
 import { Layout } from "../../settings/enums/Layout";
 import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
-import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
+import RoomContext, { TimelineRenderingType, MainSplitContentType } from "../../contexts/RoomContext";
 import { E2EStatus, shieldStatusForRoom } from "../../utils/ShieldUtils";
 import { Action } from "../../dispatcher/actions";
 import { IMatrixClientCreds } from "../../MatrixClientPeg";
@@ -152,13 +152,8 @@ interface IRoomProps {
    onRegistered?(credentials: IMatrixClientCreds): void;
 }

-// This defines the content of the mainSplit.
-// If the mainSplit does not contain the Timeline, the chat is shown in the right panel.
-export enum MainSplitContentType {
-    Timeline,
-    MaximisedWidget,
-    Call,
-}
+export { MainSplitContentType };
+
 export interface IRoomState {
    room?: Room;
    virtualRoom?: Room;
@@ -191,11 +186,6 @@ export interface IRoomState {
    showApps: boolean;
    isPeeking: boolean;
    showRightPanel: boolean;
-    /**
-     * Whether the right panel shown is either of ThreadPanel or ThreadView.
-     * Always false when `showRightPanel` is false.
-     */
-    threadRightPanel: boolean;
    // error object, as from the matrix client/server API
    // If we failed to load information about the room,
    // store the error here.
@@ -234,7 +224,7 @@ export interface IRoomState {
    e2eStatus?: E2EStatus;
    rejecting?: boolean;
    hasPinnedWidgets?: boolean;
-    mainSplitContentType?: MainSplitContentType;
+    mainSplitContentType: MainSplitContentType;
    // whether or not a spaces context switch brought us here,
    // if it did we don't want the room to be marked as read as soon as it is loaded.
    wasContextSwitch?: boolean;
@@ -399,7 +389,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
            showApps: false,
            isPeeking: false,
            showRightPanel: false,
-            threadRightPanel: false,
            joining: false,
            showTopUnreadMessagesBar: false,
            statusBarVisible: false,
@@ -626,11 +615,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
            mainSplitContentType: room ? this.getMainSplitContentType(room) : undefined,
            initialEventId: undefined, // default to clearing this, will get set later in the method if needed
            showRightPanel: roomId ? this.context.rightPanelStore.isOpenForRoom(roomId) : false,
-            threadRightPanel: roomId
-                ? [RightPanelPhases.ThreadView, RightPanelPhases.ThreadPanel].includes(
-                      this.context.rightPanelStore.currentCardForRoom(roomId).phase!,
-                  )
-                : false,
            activeCall: roomId ? CallStore.instance.getActiveCall(roomId) : null,
            promptAskToJoin: this.context.roomViewStore.promptAskToJoin(),
            viewRoomOpts: this.context.roomViewStore.getViewRoomOpts(),
@@ -1033,11 +1017,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        const { roomId } = this.state;
        this.setState({
            showRightPanel: roomId ? this.context.rightPanelStore.isOpenForRoom(roomId) : false,
-            threadRightPanel: roomId
-                ? [RightPanelPhases.ThreadView, RightPanelPhases.ThreadPanel].includes(
-                      this.context.rightPanelStore.currentCardForRoom(roomId).phase!,
-                  )
-                : false,
        });
    };

@@ -2531,6 +2510,17 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        }
        const mainSplitContentClasses = classNames("mx_RoomView_body", mainSplitContentClassName);

+        let sizeKey: string | undefined;
+        let defaultSize: number | undefined;
+        let analyticsRoomType: ComponentProps<typeof MainSplit>["analyticsRoomType"] = "other_room";
+        if (this.state.mainSplitContentType !== MainSplitContentType.Timeline) {
+            // Override defaults for video rooms where more space is needed for the chat timeline
+            sizeKey = "wide";
+            defaultSize = 420;
+            analyticsRoomType =
+                this.state.mainSplitContentType === MainSplitContentType.Call ? "video_room" : "maximised_widget";
+        }
+
        return (
            <RoomContext.Provider value={this.state}>
                <div className={mainClasses} ref={this.roomView} onKeyDown={this.onReactKeyDown}>
@@ -2541,10 +2531,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                        <MainSplit
                            panel={rightPanel}
                            resizeNotifier={this.props.resizeNotifier}
-                            // Override defaults when a thread is being shown to allow persisting a separate
-                            // right panel width for thread panels as they tend to want to be wider.
-                            sizeKey={this.state.threadRightPanel ? "thread" : undefined}
-                            defaultSize={this.state.threadRightPanel ? 500 : undefined}
+                            sizeKey={sizeKey}
+                            defaultSize={defaultSize}
+                            analyticsRoomType={analyticsRoomType}
                        >
                            <div
                                className={mainSplitContentClasses}
@@ -764,7 +764,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
        return (
            <main className="mx_SpaceRoomView">
                <ErrorBoundary>
-                    <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
+                    <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier} analyticsRoomType="space">
                        {this.renderBody()}
                    </MainSplit>
                </ErrorBoundary>
@@ -87,7 +87,12 @@ export default class UserView extends React.Component<IProps, IState> {
                />
            );
            return (
-                <MainSplit panel={panel} resizeNotifier={this.props.resizeNotifier}>
+                <MainSplit
+                    panel={panel}
+                    resizeNotifier={this.props.resizeNotifier}
+                    defaultSize={420}
+                    analyticsRoomType="user_profile"
+                >
                    <UserOnboardingPage />
                </MainSplit>
            );
@@ -17,7 +17,7 @@ import { _t } from "../../../languageHandler.tsx";
 export function PinnedMessageBadge(): JSX.Element {
    return (
        <div className="mx_PinnedMessageBadge">
-            <PinIcon width="16" />
+            <PinIcon width="16px" height="16px" />
            {_t("room|pinned_message_badge")}
        </div>
    );
@@ -92,7 +92,7 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
            >
                <div className="mx_PinnedMessageBanner_content">
                    <Indicators count={eventCount} currentIndex={currentEventIndex} />
-                    <PinIcon width="20" className="mx_PinnedMessageBanner_PinIcon" />
+                    <PinIcon width="20px" height="20px" className="mx_PinnedMessageBanner_PinIcon" />
                    {!isSinglePinnedEvent && (
                        <div className="mx_PinnedMessageBanner_title" data-testid="banner-counter">
                            {_t(
@@ -7,7 +7,7 @@
 */

 import React, { ComponentProps, forwardRef } from "react";
-import { Icon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
+import ThreadsSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
 import classNames from "classnames";
 import { IconButton, Text, Tooltip } from "@vector-im/compound-web";

@@ -51,7 +51,7 @@ export const ThreadsActivityCentreButton = forwardRef<HTMLButtonElement, Threads
                    ref={ref}
                >
                    <>
-                        <Icon className="mx_ThreadsActivityCentreButton_Icon" />
+                        <ThreadsSolidIcon className="mx_ThreadsActivityCentreButton_Icon" />
                        {/* This is dirty, but we need to add the label to the indicator icon */}
                        {displayLabel && (
                            <Text
@@ -21,6 +21,14 @@ export enum TimelineRenderingType {
    Pinned = "Pinned",
 }

+// This defines the content of the mainSplit.
+// If the mainSplit does not contain the Timeline, the chat is shown in the right panel.
+export enum MainSplitContentType {
+    Timeline,
+    MaximisedWidget,
+    Call,
+}
+
 const RoomContext = createContext<
    IRoomState & {
        threadId?: string;
@@ -35,7 +43,6 @@ const RoomContext = createContext<
    showApps: false,
    isPeeking: false,
    showRightPanel: true,
-    threadRightPanel: false,
    joining: false,
    showTopUnreadMessagesBar: false,
    statusBarVisible: false,
@@ -59,6 +66,7 @@ const RoomContext = createContext<
    matrixClientIsReady: false,
    showUrlPreview: false,
    timelineRenderingType: TimelineRenderingType.Room,
+    mainSplitContentType: MainSplitContentType.Timeline,
    threadId: undefined,
    liveTimeline: undefined,
    narrow: false,
@@ -7,10 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";

 import MainSplit from "../../../src/components/structures/MainSplit";
 import ResizeNotifier from "../../../src/utils/ResizeNotifier";
+import { PosthogAnalytics } from "../../../src/PosthogAnalytics.ts";

 describe("<MainSplit/>", () => {
    const resizeNotifier = new ResizeNotifier();
@@ -21,18 +22,33 @@ describe("<MainSplit/>", () => {
    );
    const panel = <div>Right panel</div>;

+    beforeEach(() => {
+        localStorage.clear();
+    });
+
    it("renders", () => {
        const { asFragment, container } = render(
-            <MainSplit resizeNotifier={resizeNotifier} children={children} panel={panel} />,
+            <MainSplit
+                resizeNotifier={resizeNotifier}
+                children={children}
+                panel={panel}
+                analyticsRoomType="other_room"
+            />,
        );
        expect(asFragment()).toMatchSnapshot();
-        // Assert it matches the default width of 350
-        expect(container.querySelector<HTMLElement>(".mx_RightPanel_ResizeWrapper")!.style.width).toBe("350px");
+        // Assert it matches the default width of 320
+        expect(container.querySelector<HTMLElement>(".mx_RightPanel_ResizeWrapper")!.style.width).toBe("320px");
    });

    it("respects defaultSize prop", () => {
        const { asFragment, container } = render(
-            <MainSplit resizeNotifier={resizeNotifier} children={children} panel={panel} defaultSize={500} />,
+            <MainSplit
+                resizeNotifier={resizeNotifier}
+                children={children}
+                panel={panel}
+                defaultSize={500}
+                analyticsRoomType="other_room"
+            />,
        );
        expect(asFragment()).toMatchSnapshot();
        // Assert it matches the default width of 350
@@ -48,8 +64,36 @@ describe("<MainSplit/>", () => {
                panel={panel}
                sizeKey="thread"
                defaultSize={400}
+                analyticsRoomType="other_room"
            />,
        );
        expect(container.querySelector<HTMLElement>(".mx_RightPanel_ResizeWrapper")!.style.width).toBe("333px");
    });
+
+    it("should report to analytics on resize stop", () => {
+        const { container } = render(
+            <MainSplit
+                resizeNotifier={resizeNotifier}
+                children={children}
+                panel={panel}
+                sizeKey="thread"
+                defaultSize={400}
+                analyticsRoomType="other_room"
+            />,
+        );
+
+        const spy = jest.spyOn(PosthogAnalytics.instance, "trackEvent");
+
+        const handle = container.querySelector(".mx_ResizeHandle--horizontal")!;
+        fireEvent.mouseDown(handle);
+        fireEvent.mouseMove(handle, { clientX: 0 });
+        fireEvent.mouseUp(handle);
+
+        expect(spy).toHaveBeenCalledWith({
+            eventName: "WebPanelResize",
+            panel: "right",
+            roomType: "other_room",
+            size: 400,
+        });
+    });
 });
@@ -311,6 +311,12 @@ describe("RoomView", () => {
            expect(stores.rightPanelStore.isOpen).toEqual(true);
            expect(stores.rightPanelStore.currentCard.phase).toEqual(RightPanelPhases.Timeline);
        });
+
+        it("should render joined video room view", async () => {
+            jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
+            const { asFragment } = await mountRoomView();
+            expect(asFragment()).toMatchSnapshot();
+        });
    });

    describe("for a local room", () => {
@@ -14,7 +14,7 @@ exports[`<MainSplit/> renders 1`] = `
    </div>
    <div
      class="mx_RightPanel_ResizeWrapper"
-      style="position: relative; user-select: auto; width: 350px; height: 100%; max-width: 50%; min-width: 264px; box-sizing: border-box; flex-shrink: 0;"
+      style="position: relative; user-select: auto; width: 320px; height: 100%; max-width: 50%; min-width: 264px; box-sizing: border-box; flex-shrink: 0;"
    >
      <div>
        Right panel
@@ -61,7 +61,17 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+              />
+            </svg>
          </div>
        </button>
        <button
@@ -76,7 +86,17 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
+              />
+            </svg>
          </div>
        </button>
        <button
@@ -90,7 +110,17 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+              />
+            </svg>
          </div>
        </button>
        <button
@@ -104,7 +134,17 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+              />
+            </svg>
          </div>
        </button>
      </div>
@@ -234,7 +274,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+              />
+            </svg>
          </div>
        </button>
        <button
@@ -249,7 +299,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
+              />
+            </svg>
          </div>
        </button>
        <button
@@ -263,7 +323,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+              />
+            </svg>
          </div>
        </button>
        <button
@@ -277,7 +347,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+              />
+            </svg>
          </div>
        </button>
      </div>
@@ -492,7 +572,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+              />
+            </svg>
          </div>
        </button>
        <button
@@ -507,7 +597,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
+              />
+            </svg>
          </div>
        </button>
        <button
@@ -521,7 +621,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+              />
+            </svg>
          </div>
        </button>
        <button
@@ -535,7 +645,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+              />
+            </svg>
          </div>
        </button>
      </div>
@@ -827,7 +947,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+              />
+            </svg>
          </div>
        </button>
        <button
@@ -842,7 +972,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
+              />
+            </svg>
          </div>
        </button>
        <button
@@ -856,7 +996,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+              />
+            </svg>
          </div>
        </button>
        <button
@@ -870,7 +1020,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+              />
+            </svg>
          </div>
        </button>
      </div>
@@ -1125,3 +1285,352 @@ exports[`RoomView should show error view if failed to look up room alias 1`] = `
  </div>
 </DocumentFragment>
 `;
+
+exports[`RoomView video rooms should render joined video room view 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_RoomView mx_RoomView_immersive"
+  >
+    <canvas
+      aria-hidden="true"
+      height="768"
+      style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
+      width="0"
+    />
+    <div
+      class="mx_MainSplit"
+    >
+      <div
+        class="mx_RoomView_body mx_MainSplit_call"
+        data-layout="group"
+      >
+        <header
+          class="mx_Flex mx_RoomHeader light-panel"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+        >
+          <button
+            aria-label="Open room settings"
+            aria-live="off"
+            class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+            data-color="3"
+            data-testid="avatar-img"
+            data-type="round"
+            role="button"
+            style="--cpd-avatar-size: 40px;"
+            tabindex="-1"
+          >
+            !
+          </button>
+          <button
+            aria-label="Room info"
+            class="mx_RoomHeader_infoWrapper"
+            tabindex="0"
+          >
+            <div
+              class="mx_Box mx_RoomHeader_info mx_Box--flex"
+              style="--mx-box-flex: 1;"
+            >
+              <div
+                aria-level="1"
+                class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
+                dir="auto"
+                role="heading"
+              >
+                <span
+                  class="mx_RoomHeader_truncated mx_lineClamp"
+                >
+                  !10:example.org
+                </span>
+              </div>
+            </div>
+          </button>
+          <div
+            class="mx_Flex"
+            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+          >
+            <button
+              aria-label="Room info"
+              class="_icon-button_bh2qc_17"
+              role="button"
+              style="--cpd-icon-button-size: 32px;"
+              tabindex="0"
+            >
+              <div
+                class="_indicator-icon_133tf_26"
+                style="--cpd-icon-button-size: 100%;"
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+                  />
+                </svg>
+              </div>
+            </button>
+            <button
+              aria-label="Chat"
+              class="_icon-button_bh2qc_17"
+              role="button"
+              style="--cpd-icon-button-size: 32px;"
+              tabindex="0"
+            >
+              <div
+                class="_indicator-icon_133tf_26"
+                style="--cpd-icon-button-size: 100%;"
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M2.95 16.3 1.5 21.25a.936.936 0 0 0 .25 1 .936.936 0 0 0 1 .25l4.95-1.45a10.23 10.23 0 0 0 2.1.712c.717.159 1.45.238 2.2.238a9.737 9.737 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 22 12a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.737 9.737 0 0 0 12 2a9.737 9.737 0 0 0-3.9.788 10.099 10.099 0 0 0-3.175 2.137c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 2 12a10.179 10.179 0 0 0 .95 4.3Z"
+                  />
+                </svg>
+              </div>
+            </button>
+            <button
+              aria-label="Threads"
+              class="_icon-button_bh2qc_17"
+              role="button"
+              style="--cpd-icon-button-size: 32px;"
+              tabindex="0"
+            >
+              <div
+                class="_indicator-icon_133tf_26"
+                style="--cpd-icon-button-size: 100%;"
+              >
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+                  />
+                </svg>
+              </div>
+            </button>
+          </div>
+          <div
+            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
+          >
+            <div
+              aria-label="0 members"
+              class="mx_AccessibleButton mx_FacePile"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="_stacked-avatars_mcap2_111"
+              />
+              0
+            </div>
+          </div>
+        </header>
+      </div>
+      <div
+        class="mx_RightPanel_ResizeWrapper"
+        style="position: relative; user-select: auto; width: 420px; height: 100%; max-width: 50%; min-width: 264px; box-sizing: border-box; flex-shrink: 0;"
+      >
+        <aside
+          class="mx_RightPanel"
+          id="mx_RightPanel"
+        >
+          <div
+            class="mx_BaseCard mx_ThreadPanel mx_TimelineCard"
+          >
+            <div
+              class="mx_BaseCard_header"
+            >
+              <div
+                class="mx_BaseCard_header_title"
+              >
+                <p
+                  class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+                  role="heading"
+                >
+                  Chat
+                </p>
+              </div>
+              <button
+                class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+                data-testid="base-card-close-button"
+                role="button"
+                style="--cpd-icon-button-size: 28px;"
+                tabindex="0"
+              >
+                <div
+                  class="_indicator-icon_133tf_26"
+                  style="--cpd-icon-button-size: 100%;"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </div>
+            <div
+              class="mx_TimelineCard_timeline"
+            >
+              <div
+                class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
+                tabindex="-1"
+              >
+                <div
+                  class="mx_RoomView_messageListWrapper"
+                >
+                  <ol
+                    aria-live="polite"
+                    class="mx_RoomView_MessageList"
+                    style="height: 400px;"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              aria-label="Message composer"
+              class="mx_MessageComposer mx_MessageComposer--compact"
+              role="region"
+            >
+              <div
+                class="mx_MessageComposer_wrapper"
+              >
+                <div
+                  class="mx_MessageComposer_row"
+                >
+                  <div
+                    class="mx_SendMessageComposer"
+                  >
+                    <div
+                      class="mx_BasicMessageComposer"
+                    >
+                      <div
+                        aria-label="Formatting"
+                        class="mx_MessageComposerFormatBar"
+                        role="toolbar"
+                      >
+                        <button
+                          aria-label="Bold"
+                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
+                          role="button"
+                          tabindex="0"
+                          type="button"
+                        />
+                        <button
+                          aria-label="Italics"
+                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
+                          role="button"
+                          tabindex="-1"
+                          type="button"
+                        />
+                        <button
+                          aria-label="Strikethrough"
+                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
+                          role="button"
+                          tabindex="-1"
+                          type="button"
+                        />
+                        <button
+                          aria-label="Code block"
+                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
+                          role="button"
+                          tabindex="-1"
+                          type="button"
+                        />
+                        <button
+                          aria-label="Quote"
+                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
+                          role="button"
+                          tabindex="-1"
+                          type="button"
+                        />
+                        <button
+                          aria-label="Insert link"
+                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
+                          role="button"
+                          tabindex="-1"
+                          type="button"
+                        />
+                      </div>
+                      <div
+                        aria-autocomplete="list"
+                        aria-disabled="false"
+                        aria-haspopup="listbox"
+                        aria-label="Send a message…"
+                        aria-multiline="true"
+                        class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
+                        contenteditable="true"
+                        data-testid="basicmessagecomposer"
+                        dir="auto"
+                        role="textbox"
+                        style="--placeholder: 'Send\\ a\\ message…';"
+                        tabindex="0"
+                        translate="no"
+                      >
+                        <div>
+                          <br />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="mx_MessageComposer_actions"
+                  >
+                    <div
+                      aria-label="Emoji"
+                      class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
+                      role="button"
+                      tabindex="0"
+                    />
+                    <div
+                      aria-label="Attachment"
+                      class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
+                      role="button"
+                      tabindex="0"
+                    />
+                    <div
+                      aria-label="More options"
+                      class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
+                      role="button"
+                      tabindex="0"
+                    />
+                    <input
+                      multiple=""
+                      style="display: none;"
+                      type="file"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </aside>
+        <div>
+          <div
+            class="mx_ResizeHandle--horizontal"
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
@@ -204,7 +204,7 @@ describe("<TextualBody />", () => {
            const { container } = getComponent({ mxEvent: ev });
            const content = container.querySelector(".mx_EventTile_body");
            expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com"><div class="mx_Pill_LinkIcon mx_BaseAvatar"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
+                `"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24" class="mx_Pill_LinkIcon mx_BaseAvatar"><path d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"></path></svg><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
            );
        });

@@ -5,9 +5,17 @@ exports[`PinnedMessageBadge should render 1`] = `
  <div
    class="mx_PinnedMessageBadge"
  >
-    <div
-      width="16"
-    />
+    <svg
+      fill="currentColor"
+      height="16px"
+      viewBox="0 0 24 24"
+      width="16px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+      />
+    </svg>
    Pinned message
  </div>
 </DocumentFragment>
@@ -399,9 +399,18 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
        class="mx_Pill mx_EventPill"
        href="https://matrix.to/#/!room1:example.com/!abc123"
      >
-        <div
+        <svg
          class="mx_Pill_LinkIcon mx_BaseAvatar"
-        />
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"
+          />
+        </svg>
        <span
          class="mx_Pill_text"
        >
@@ -54,21 +54,35 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
        role="button"
        tabindex="0"
      >
-        <div
+        <svg
          aria-hidden="true"
+          fill="currentColor"
          height="20"
+          viewBox="0 0 24 24"
          width="20"
-        />
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11 13H6a.967.967 0 0 1-.713-.287A.968.968 0 0 1 5 12c0-.283.096-.52.287-.713A.967.967 0 0 1 6 11h5V6c0-.283.096-.52.287-.713A.968.968 0 0 1 12 5c.283 0 .52.096.713.287.191.192.287.43.287.713v5h5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 18 13h-5v5a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 19a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 18v-5Z"
+          />
+        </svg>
        Add extensions
      </button>
      <div
        class="mx_Flex mx_EmptyState"
        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
      >
-        <div
+        <svg
+          fill="currentColor"
          height="32px"
+          viewBox="0 0 24 24"
          width="32px"
-        />
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M17.25 11.672a.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977a.907.907 0 0 1-.663.282Zm2.475-4.922L17.25 4.275 14.775 6.75l2.475 2.475 2.475-2.475ZM4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Z"
+          />
+        </svg>
        <p
          class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
        >
@@ -139,11 +153,18 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
        role="button"
        tabindex="0"
      >
-        <div
+        <svg
          aria-hidden="true"
+          fill="currentColor"
          height="20"
+          viewBox="0 0 24 24"
          width="20"
-        />
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11 13H6a.967.967 0 0 1-.713-.287A.968.968 0 0 1 5 12c0-.283.096-.52.287-.713A.967.967 0 0 1 6 11h5V6c0-.283.096-.52.287-.713A.968.968 0 0 1 12 5c.283 0 .52.096.713.287.191.192.287.43.287.713v5h5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 18 13h-5v5a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 19a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 18v-5Z"
+          />
+        </svg>
        Add extensions
      </button>
      <div
@@ -175,7 +175,17 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                  class="_indicator-icon_133tf_26"
                  style="--cpd-icon-button-size: 100%;"
                >
-                  <div />
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+                    />
+                  </svg>
                </div>
              </button>
            </div>
@@ -241,7 +251,17 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                  class="_indicator-icon_133tf_26"
                  style="--cpd-icon-button-size: 100%;"
                >
-                  <div />
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+                    />
+                  </svg>
                </div>
              </button>
            </div>
@@ -371,7 +391,17 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                  class="_indicator-icon_133tf_26"
                  style="--cpd-icon-button-size: 100%;"
                >
-                  <div />
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+                    />
+                  </svg>
                </div>
              </button>
            </div>
@@ -437,7 +467,17 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                  class="_indicator-icon_133tf_26"
                  style="--cpd-icon-button-size: 100%;"
                >
-                  <div />
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+                    />
+                  </svg>
                </div>
              </button>
            </div>
@@ -74,9 +74,17 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
            data-kind="default"
          >
-            <div
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
              width="1em"
-            />
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 22c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.587-1.412.212-.212.446-.366.703-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 0 1-1.414 1.414l-.896-.896A1.935 1.935 0 0 1 18 22H6Zm14-4.834V10c0-.55-.196-1.02-.587-1.412A1.926 1.926 0 0 0 18 8h-1V6c0-1.383-.488-2.563-1.463-3.538C14.563 1.487 13.383 1 12 1s-2.563.488-3.538 1.462A4.876 4.876 0 0 0 7.243 4.41L9 6.166V6c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 12 3c.833 0 1.542.292 2.125.875S15 5.167 15 6v2h-4.166L20 17.166Z"
+              />
+            </svg>
            Not encrypted
          </span>
        </section>
@@ -107,7 +115,17 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
                class="_indicator-icon_133tf_26"
                style="--cpd-icon-button-size: 100%;"
              >
-                <div />
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+                  />
+                </svg>
              </div>
            </button>
          </div>
@@ -182,12 +200,19 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
          data-kind="primary"
          role="menuitem"
        >
-          <div
+          <svg
            aria-hidden="true"
            class="_icon_1gwvj_44"
+            fill="currentColor"
            height="24"
+            viewBox="0 0 24 24"
            width="24"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 3.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 10 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18Zm2 0h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Zm7 1h2v2c0 .283.096.52.288.713.191.191.429.287.712.287s.52-.096.712-.287A.968.968 0 0 0 21 13v-2h2a.97.97 0 0 0 .712-.287A.968.968 0 0 0 24 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 23 9h-2V7a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 6a.968.968 0 0 0-.712.287A.967.967 0 0 0 19 7v2h-2a.968.968 0 0 0-.712.287A.967.967 0 0 0 16 10c0 .283.096.52.288.713A.968.968 0 0 0 17 11Z"
+            />
+          </svg>
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
@@ -504,12 +529,19 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
          data-kind="primary"
          role="menuitem"
        >
-          <div
+          <svg
            aria-hidden="true"
            class="_icon_1gwvj_44"
+            fill="currentColor"
            height="24"
+            viewBox="0 0 24 24"
            width="24"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V6.5c0-.25.042-.475.125-.675.083-.2.192-.392.325-.575l1.4-1.7c.133-.183.3-.32.5-.412C5.55 3.046 5.767 3 6 3h12c.233 0 .45.046.65.138.2.091.367.229.5.412l1.4 1.7c.133.183.242.375.325.575.083.2.125.425.125.675V19c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm.4-15h13.2l-.85-1H6.25L5.4 6ZM5 19h14V8H5v11Zm7-1.425c.133 0 .258-.02.375-.063a.877.877 0 0 0 .325-.212l2.6-2.6a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-.9.9V11a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 10a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 11v3.2l-.9-.9a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.6 2.6c.1.1.208.17.325.212.117.042.242.063.375.063Z"
+            />
+          </svg>
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
@@ -695,9 +727,17 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
            data-kind="default"
          >
-            <div
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
              width="1em"
-            />
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 22c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.587-1.412.212-.212.446-.366.703-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 0 1-1.414 1.414l-.896-.896A1.935 1.935 0 0 1 18 22H6Zm14-4.834V10c0-.55-.196-1.02-.587-1.412A1.926 1.926 0 0 0 18 8h-1V6c0-1.383-.488-2.563-1.463-3.538C14.563 1.487 13.383 1 12 1s-2.563.488-3.538 1.462A4.876 4.876 0 0 0 7.243 4.41L9 6.166V6c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 12 3c.833 0 1.542.292 2.125.875S15 5.167 15 6v2h-4.166L20 17.166Z"
+              />
+            </svg>
            Not encrypted
          </span>
        </section>
@@ -776,12 +816,19 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
          data-kind="primary"
          role="menuitem"
        >
-          <div
+          <svg
            aria-hidden="true"
            class="_icon_1gwvj_44"
+            fill="currentColor"
            height="24"
+            viewBox="0 0 24 24"
            width="24"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 3.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 10 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18Zm2 0h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Zm7 1h2v2c0 .283.096.52.288.713.191.191.429.287.712.287s.52-.096.712-.287A.968.968 0 0 0 21 13v-2h2a.97.97 0 0 0 .712-.287A.968.968 0 0 0 24 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 23 9h-2V7a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 6a.968.968 0 0 0-.712.287A.967.967 0 0 0 19 7v2h-2a.968.968 0 0 0-.712.287A.967.967 0 0 0 16 10c0 .283.096.52.288.713A.968.968 0 0 0 17 11Z"
+            />
+          </svg>
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
@@ -1098,12 +1145,19 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
          data-kind="primary"
          role="menuitem"
        >
-          <div
+          <svg
            aria-hidden="true"
            class="_icon_1gwvj_44"
+            fill="currentColor"
            height="24"
+            viewBox="0 0 24 24"
            width="24"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V6.5c0-.25.042-.475.125-.675.083-.2.192-.392.325-.575l1.4-1.7c.133-.183.3-.32.5-.412C5.55 3.046 5.767 3 6 3h12c.233 0 .45.046.65.138.2.091.367.229.5.412l1.4 1.7c.133.183.242.375.325.575.083.2.125.425.125.675V19c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm.4-15h13.2l-.85-1H6.25L5.4 6ZM5 19h14V8H5v11Zm7-1.425c.133 0 .258-.02.375-.063a.877.877 0 0 0 .325-.212l2.6-2.6a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-.9.9V11a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 10a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 11v3.2l-.9-.9a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.6 2.6c.1.1.208.17.325.212.117.042.242.063.375.063Z"
+            />
+          </svg>
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
@@ -1289,9 +1343,17 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
            data-kind="default"
          >
-            <div
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
              width="1em"
-            />
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 22c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.587-1.412.212-.212.446-.366.703-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 0 1-1.414 1.414l-.896-.896A1.935 1.935 0 0 1 18 22H6Zm14-4.834V10c0-.55-.196-1.02-.587-1.412A1.926 1.926 0 0 0 18 8h-1V6c0-1.383-.488-2.563-1.463-3.538C14.563 1.487 13.383 1 12 1s-2.563.488-3.538 1.462A4.876 4.876 0 0 0 7.243 4.41L9 6.166V6c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 12 3c.833 0 1.542.292 2.125.875S15 5.167 15 6v2h-4.166L20 17.166Z"
+              />
+            </svg>
            Not encrypted
          </span>
        </section>
@@ -1322,7 +1384,17 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
                class="_indicator-icon_133tf_26"
                style="--cpd-icon-button-size: 100%;"
              >
-                <div />
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+                  />
+                </svg>
              </div>
            </button>
          </div>
@@ -1397,12 +1469,19 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
          data-kind="primary"
          role="menuitem"
        >
-          <div
+          <svg
            aria-hidden="true"
            class="_icon_1gwvj_44"
+            fill="currentColor"
            height="24"
+            viewBox="0 0 24 24"
            width="24"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 3.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 10 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18Zm2 0h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Zm7 1h2v2c0 .283.096.52.288.713.191.191.429.287.712.287s.52-.096.712-.287A.968.968 0 0 0 21 13v-2h2a.97.97 0 0 0 .712-.287A.968.968 0 0 0 24 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 23 9h-2V7a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 6a.968.968 0 0 0-.712.287A.967.967 0 0 0 19 7v2h-2a.968.968 0 0 0-.712.287A.967.967 0 0 0 16 10c0 .283.096.52.288.713A.968.968 0 0 0 17 11Z"
+            />
+          </svg>
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
@@ -1719,12 +1798,19 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
          data-kind="primary"
          role="menuitem"
        >
-          <div
+          <svg
            aria-hidden="true"
            class="_icon_1gwvj_44"
+            fill="currentColor"
            height="24"
+            viewBox="0 0 24 24"
            width="24"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V6.5c0-.25.042-.475.125-.675.083-.2.192-.392.325-.575l1.4-1.7c.133-.183.3-.32.5-.412C5.55 3.046 5.767 3 6 3h12c.233 0 .45.046.65.138.2.091.367.229.5.412l1.4 1.7c.133.183.242.375.325.575.083.2.125.425.125.675V19c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm.4-15h13.2l-.85-1H6.25L5.4 6ZM5 19h14V8H5v11Zm7-1.425c.133 0 .258-.02.375-.063a.877.877 0 0 0 .325-.212l2.6-2.6a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-.9.9V11a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 10a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 11v3.2l-.9-.9a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.6 2.6c.1.1.208.17.325.212.117.042.242.063.375.063Z"
+            />
+          </svg>
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
@@ -14,7 +14,17 @@ exports[`<VideoRoomChatButton /> renders button with an unread marker when room
    data-indicator="default"
    style="--cpd-icon-button-size: 100%;"
  >
-    <div />
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.95 16.3 1.5 21.25a.936.936 0 0 0 .25 1 .936.936 0 0 0 1 .25l4.95-1.45a10.23 10.23 0 0 0 2.1.712c.717.159 1.45.238 2.2.238a9.737 9.737 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 22 12a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.737 9.737 0 0 0 12 2a9.737 9.737 0 0 0-3.9.788 10.099 10.099 0 0 0-3.175 2.137c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 2 12a10.179 10.179 0 0 0 .95 4.3Z"
+      />
+    </svg>
  </div>
 </button>
 `;
@@ -26,7 +26,7 @@ import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 import DocumentOffset from "../../../../src/editor/offset";
 import { Layout } from "../../../../src/settings/enums/Layout";
-import { IRoomState } from "../../../../src/components/structures/RoomView";
+import { IRoomState, MainSplitContentType } from "../../../../src/components/structures/RoomView";
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 import { mockPlatformPeg } from "../../../test-utils/platform";
 import { doMaybeLocalRoomAction } from "../../../../src/utils/local-room";
@@ -47,7 +47,6 @@ describe("<SendMessageComposer/>", () => {
        showApps: false,
        isPeeking: false,
        showRightPanel: true,
-        threadRightPanel: false,
        joining: false,
        atEndOfLiveTimeline: true,
        showTopUnreadMessagesBar: false,
@@ -69,6 +68,7 @@ describe("<SendMessageComposer/>", () => {
        showDisplaynameChanges: true,
        matrixClientIsReady: false,
        timelineRenderingType: TimelineRenderingType.Room,
+        mainSplitContentType: MainSplitContentType.Timeline,
        liveTimeline: undefined,
        canSelfRedact: false,
        resizing: false,
@@ -46,7 +46,17 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+              />
+            </svg>
          </div>
        </button>
      </div>
@@ -111,7 +121,17 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
            class="_indicator-icon_133tf_26"
            style="--cpd-icon-button-size: 100%;"
          >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+              />
+            </svg>
          </div>
        </button>
      </div>
@@ -128,7 +148,20 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
      <div
        class="mx_PinnedEventTile_thread"
      >
-        <div />
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7 10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 6 9c0-.283.096-.52.287-.713A.968.968 0 0 1 7 8h10a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 17 10H7Zm0 4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 6 13c0-.283.096-.52.287-.713A.967.967 0 0 1 7 12h6c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 13 14H7Z"
+          />
+          <path
+            d="M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293ZM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17Z"
+          />
+        </svg>
        <span>
          Reply to a 
          <button
@@ -168,12 +201,19 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
    role="menuitem"
    tabindex="-1"
  >
-    <div
+    <svg
      aria-hidden="true"
      class="_icon_1gwvj_44"
+      fill="currentColor"
      height="24"
+      viewBox="0 0 24 24"
      width="24"
-    />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
+      />
+    </svg>
    <span
      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
    >
@@ -201,12 +241,24 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
    role="menuitem"
    tabindex="-1"
  >
-    <div
+    <svg
      aria-hidden="true"
      class="_icon_1gwvj_44"
+      fill="currentColor"
      height="24"
+      viewBox="0 0 24 24"
      width="24"
-    />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M5.457 2.083a1 1 0 0 0-1.414 1.414L8.04 7.494v2.25a.5.5 0 0 1-.15.356l-3.7 3.644a.5.5 0 0 0-.15.356v1.4a.5.5 0 0 0 .5.5h6.5v6a1 1 0 0 0 2 0v-6h3.506l4.497 4.497a1 1 0 0 0 1.414-1.414l-17-17ZM14.546 14 10.04 9.494v.25a2.5 2.5 0 0 1-.746 1.781L6.78 14h7.766Z"
+        fill-rule="evenodd"
+      />
+      <path
+        d="M14.04 4v3.85l2.015 2.015a.5.5 0 0 1-.015-.12V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857h-9.73l2 2h3.849Z"
+      />
+    </svg>
    <span
      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
    >
@@ -234,12 +286,19 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
    role="menuitem"
    tabindex="-1"
  >
-    <div
+    <svg
      aria-hidden="true"
      class="_icon_1gwvj_44"
+      fill="currentColor"
      height="24"
+      viewBox="0 0 24 24"
      width="24"
-    />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.699 4.714c.39.39.39 1.025 0 1.416l-4.7 4.714a.996.996 0 0 1-1.411 0 1.004 1.004 0 0 1 0-1.416l3.043-3.054H8.487C6.599 10.666 5 12.27 5 14.333 5.002 16.396 6.6 18 8.488 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.092 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
+      />
+    </svg>
    <span
      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
    >
@@ -273,12 +332,19 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
    role="menuitem"
    tabindex="-1"
  >
-    <div
+    <svg
      aria-hidden="true"
      class="_icon_1gwvj_44"
+      fill="currentColor"
      height="24"
+      viewBox="0 0 24 24"
      width="24"
-    />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 21c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 19V6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 4 5c0-.283.096-.52.287-.713A.968.968 0 0 1 5 4h4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 10 3h4a.97.97 0 0 1 .713.288A.968.968 0 0 1 15 4h4a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 6v13c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 21H7ZM7 6v13h10V6H7Zm2 10c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 11 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 10 8a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 9v7Zm4 0c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 15 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 14 8a.968.968 0 0 0-.713.287A.967.967 0 0 0 13 9v7Z"
+      />
+    </svg>
    <span
      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
    >
@@ -326,12 +392,19 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
    role="menuitem"
    tabindex="-1"
  >
-    <div
+    <svg
      aria-hidden="true"
      class="_icon_1gwvj_44"
+      fill="currentColor"
      height="24"
+      viewBox="0 0 24 24"
      width="24"
-    />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
+      />
+    </svg>
    <span
      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
    >
@@ -359,12 +432,19 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
    role="menuitem"
    tabindex="-1"
  >
-    <div
+    <svg
      aria-hidden="true"
      class="_icon_1gwvj_44"
+      fill="currentColor"
      height="24"
+      viewBox="0 0 24 24"
      width="24"
-    />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.699 4.714c.39.39.39 1.025 0 1.416l-4.7 4.714a.996.996 0 0 1-1.411 0 1.004 1.004 0 0 1 0-1.416l3.043-3.054H8.487C6.599 10.666 5 12.27 5 14.333 5.002 16.396 6.6 18 8.488 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.092 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
+      />
+    </svg>
    <span
      class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
    >
@@ -24,10 +24,18 @@ exports[`<PinnedMessageBanner /> should display display a poll event 1`] = `
            data-testid="banner-indicator"
          />
        </div>
-        <div
+        <svg
          class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
        <span
          class="mx_PinnedMessageBanner_message"
          data-testid="banner-message"
@@ -79,10 +87,18 @@ exports[`<PinnedMessageBanner /> should display the last message when the pinned
            data-testid="banner-indicator"
          />
        </div>
-        <div
+        <svg
          class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
        <div
          class="mx_PinnedMessageBanner_title"
          data-testid="banner-counter"
@@ -141,10 +157,18 @@ exports[`<PinnedMessageBanner /> should display the m.audio event type 1`] = `
            data-testid="banner-indicator"
          />
        </div>
-        <div
+        <svg
          class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
        <span
          class="mx_PinnedMessageBanner_message"
          data-testid="banner-message"
@@ -188,10 +212,18 @@ exports[`<PinnedMessageBanner /> should display the m.file event type 1`] = `
            data-testid="banner-indicator"
          />
        </div>
-        <div
+        <svg
          class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
        <span
          class="mx_PinnedMessageBanner_message"
          data-testid="banner-message"
@@ -235,10 +267,18 @@ exports[`<PinnedMessageBanner /> should display the m.image event type 1`] = `
            data-testid="banner-indicator"
          />
        </div>
-        <div
+        <svg
          class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
        <span
          class="mx_PinnedMessageBanner_message"
          data-testid="banner-message"
@@ -282,10 +322,18 @@ exports[`<PinnedMessageBanner /> should display the m.video event type 1`] = `
            data-testid="banner-indicator"
          />
        </div>
-        <div
+        <svg
          class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
        <span
          class="mx_PinnedMessageBanner_message"
          data-testid="banner-message"
@@ -333,10 +381,18 @@ exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
            data-testid="banner-indicator"
          />
        </div>
-        <div
+        <svg
          class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
        <div
          class="mx_PinnedMessageBanner_title"
          data-testid="banner-counter"
@@ -403,10 +459,18 @@ exports[`<PinnedMessageBanner /> should render 4 pinned event 1`] = `
            data-testid="banner-indicator"
          />
        </div>
-        <div
+        <svg
          class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
        <div
          class="mx_PinnedMessageBanner_title"
          data-testid="banner-counter"
@@ -465,10 +529,18 @@ exports[`<PinnedMessageBanner /> should render a single pinned event 1`] = `
            data-testid="banner-indicator"
          />
        </div>
-        <div
+        <svg
          class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
        <span
          class="mx_PinnedMessageBanner_message"
          data-testid="banner-message"
@@ -82,7 +82,17 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
          class="_indicator-icon_133tf_26"
          style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
        >
-          <div />
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
+            />
+          </svg>
        </div>
      </button>
      <button
@@ -96,7 +106,17 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
          class="_indicator-icon_133tf_26"
          style="--cpd-icon-button-size: 100%;"
        >
-          <div />
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+            />
+          </svg>
        </div>
      </button>
      <button
@@ -110,7 +130,17 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
          class="_indicator-icon_133tf_26"
          style="--cpd-icon-button-size: 100%;"
        >
-          <div />
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+            />
+          </svg>
        </div>
      </button>
    </div>
@@ -11,9 +11,18 @@ exports[`FormattingButtons renders in german 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_FormattingButtons_Icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8.8 19c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 6.8 17V7c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 8.8 5h3.525c1.083 0 2.083.333 3 1 .917.667 1.375 1.592 1.375 2.775 0 .85-.192 1.504-.575 1.963-.383.458-.742.787-1.075.987.417.183.88.525 1.387 1.025.509.5.763 1.25.763 2.25 0 1.483-.542 2.52-1.625 3.113-1.083.591-2.1.887-3.05.887H8.8Zm1.025-2.8h2.6c.8 0 1.287-.204 1.462-.612.175-.409.263-.705.263-.888 0-.183-.088-.48-.263-.887-.175-.409-.687-.613-1.537-.613H9.825v3Zm0-5.7h2.325c.55 0 .95-.142 1.2-.425a1.4 1.4 0 0 0 .375-.95c0-.4-.142-.725-.425-.975-.283-.25-.65-.375-1.1-.375H9.825V10.5Z"
+        />
+      </svg>
    </button>
    <button
      aria-label="Kursiv"
@@ -21,9 +30,18 @@ exports[`FormattingButtons renders in german 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_FormattingButtons_Icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.25 19c-.35 0-.646-.12-.888-.363A1.207 1.207 0 0 1 5 17.75c0-.35.12-.646.362-.887.242-.242.538-.363.888-.363H9l3-9H9.25c-.35 0-.646-.12-.887-.362A1.207 1.207 0 0 1 8 6.25c0-.35.12-.646.363-.888A1.21 1.21 0 0 1 9.25 5h7.5c.35 0 .646.12.887.362.242.242.363.538.363.888s-.12.646-.363.888a1.207 1.207 0 0 1-.887.362H14.5l-3 9h2.25c.35 0 .646.12.887.363.242.241.363.537.363.887s-.12.646-.363.887a1.207 1.207 0 0 1-.887.363h-7.5Z"
+        />
+      </svg>
    </button>
    <button
      aria-label="Unterstrichen"
@@ -31,9 +49,18 @@ exports[`FormattingButtons renders in german 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_FormattingButtons_Icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6 21a.967.967 0 0 1-.713-.288A.968.968 0 0 1 5 20a.97.97 0 0 1 .287-.712A.967.967 0 0 1 6 19h12c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 18 21H6Zm6-4c-1.683 0-2.992-.525-3.925-1.575-.933-1.05-1.4-2.442-1.4-4.175V4.275c0-.35.13-.65.388-.9A1.27 1.27 0 0 1 7.974 3c.35 0 .65.125.9.375s.375.55.375.9V11.4c0 .933.233 1.692.7 2.275.467.583 1.15.875 2.05.875.9 0 1.583-.292 2.05-.875.467-.583.7-1.342.7-2.275V4.275c0-.35.13-.65.387-.9A1.27 1.27 0 0 1 16.05 3c.35 0 .65.125.9.375s.375.55.375.9v6.975c0 1.733-.467 3.125-1.4 4.175C14.992 16.475 13.683 17 12 17Z"
+        />
+      </svg>
    </button>
    <button
      aria-label="Durchgestrichen"
@@ -41,9 +68,18 @@ exports[`FormattingButtons renders in german 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_FormattingButtons_Icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.15 20c-1.267 0-2.392-.375-3.375-1.125-.983-.75-1.692-1.775-2.125-3.075l2.2-.95c.233.8.638 1.458 1.213 1.975.574.517 1.287.775 2.137.775.7 0 1.333-.167 1.9-.5.567-.333.85-.867.85-1.6 0-.3-.058-.575-.175-.825A2.362 2.362 0 0 0 14.3 14h2.8a4.279 4.279 0 0 1 .25 1.5c0 1.433-.513 2.542-1.538 3.325C14.788 19.608 13.567 20 12.15 20ZM3 12a.967.967 0 0 1-.712-.287A.968.968 0 0 1 2 11c0-.283.096-.52.288-.712A.967.967 0 0 1 3 10h18c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.713A.968.968 0 0 1 21 12H3Zm9.05-8.15c1.1 0 2.063.27 2.887.813.825.541 1.463 1.37 1.913 2.487l-2.2.975a2.987 2.987 0 0 0-.838-1.3c-.408-.383-.979-.575-1.712-.575-.683 0-1.25.154-1.7.463-.45.308-.7.737-.75 1.287h-2.4c.033-1.15.487-2.13 1.363-2.937.875-.809 2.02-1.213 3.437-1.213Z"
+        />
+      </svg>
    </button>
    <button
      aria-label="Ungeordnete Liste"
@@ -51,9 +87,18 @@ exports[`FormattingButtons renders in german 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_FormattingButtons_Icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.5 7.5a1.45 1.45 0 0 1-1.06-.44A1.444 1.444 0 0 1 3 6c0-.412.147-.766.44-1.06A1.45 1.45 0 0 1 4.5 4.5c.412 0 .766.147 1.06.44.293.294.44.647.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44Zm4.787 11.212c.192.192.43.288.713.288h10c.283 0 .52-.096.712-.288A.968.968 0 0 0 21 18a.968.968 0 0 0-.288-.712A.968.968 0 0 0 20 17H10a.967.967 0 0 0-.713.288A.968.968 0 0 0 9 18c0 .283.096.52.287.712Zm0-5.999c.192.191.43.287.713.287h10a.97.97 0 0 0 .712-.287A.968.968 0 0 0 21 12a.968.968 0 0 0-.288-.713A.968.968 0 0 0 20 11H10a.967.967 0 0 0-.713.287A.968.968 0 0 0 9 12c0 .283.096.52.287.713Zm0-6c.192.191.43.287.713.287h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 21 6a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 5H10a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 6c0 .283.096.52.287.713ZM3.44 19.06c.294.293.648.44 1.06.44a1.45 1.45 0 0 0 1.06-.44c.293-.294.44-.647.44-1.06 0-.413-.147-.766-.44-1.06a1.445 1.445 0 0 0-1.06-.44 1.45 1.45 0 0 0-1.06.44c-.293.294-.44.647-.44 1.06 0 .413.147.766.44 1.06ZM4.5 13.5a1.45 1.45 0 0 1-1.06-.44A1.445 1.445 0 0 1 3 12c0-.412.147-.766.44-1.06a1.45 1.45 0 0 1 1.06-.44c.412 0 .766.147 1.06.44.293.294.44.648.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44Z"
+        />
+      </svg>
    </button>
    <button
      aria-label="Nummerierte Liste"
@@ -61,9 +106,18 @@ exports[`FormattingButtons renders in german 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_FormattingButtons_Icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H10a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H10a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H10a1 1 0 0 1-1-1ZM5.604 5.089A.75.75 0 0 1 6 5.75v4.5a.75.75 0 0 1-1.5 0V7.151l-.334.223a.75.75 0 0 1-.832-1.248l1.5-1a.75.75 0 0 1 .77-.037ZM5 13a2.02 2.02 0 0 0-1.139.321 1.846 1.846 0 0 0-.626.719 2.286 2.286 0 0 0-.234.921v.023l-.001.01v.005l.75.001H3a.75.75 0 0 0 1.5.01V15a.789.789 0 0 1 .077-.29.35.35 0 0 1 .116-.14c.04-.027.126-.07.307-.07s.267.043.307.07a.35.35 0 0 1 .116.14.788.788 0 0 1 .076.29v.008a.532.532 0 0 1-.14.352l-2.161 2.351a.748.748 0 0 0-.198.523v.016c0 .414.336.75.75.75h2.5a.75.75 0 0 0 0-1.5h-.82l1.034-1.124C6.809 16 7 15.51 7 15h-.75H7v-.039l-.004-.068a2.285 2.285 0 0 0-.231-.853 1.846 1.846 0 0 0-.626-.719A2.02 2.02 0 0 0 5 13Zm-.5 2.003V15v.01-.008Z"
+        />
+      </svg>
    </button>
    <button
      aria-label="Zitieren"
@@ -71,9 +125,18 @@ exports[`FormattingButtons renders in german 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_FormattingButtons_Icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996l.808-5.478Zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996l.808-5.478ZM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a220.467 220.467 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921-.656-.127-1.082-.745-.95-1.381.148-.72.345-2.052.509-3.237a190.652 190.652 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025Zm13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996l.808-5.478Z"
+        />
+      </svg>
    </button>
    <button
      aria-label="Code"
@@ -81,9 +144,18 @@ exports[`FormattingButtons renders in german 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_FormattingButtons_Icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575l4-13.333ZM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408Zm12.052 0a1 1 0 0 1 1.409.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408Z"
+        />
+      </svg>
    </button>
    <button
      aria-label="Quelltextblock"
@@ -91,9 +163,18 @@ exports[`FormattingButtons renders in german 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_FormattingButtons_Icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m8.825 12 1.475-1.475c.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7-.2-.2-.438-.3-.713-.3-.274 0-.512.1-.712.3L6.7 11.3c-.1.1-.17.208-.213.325a1.107 1.107 0 0 0-.062.375c0 .133.02.258.063.375a.877.877 0 0 0 .212.325l2.175 2.175c.2.2.438.3.713.3.275 0 .512-.1.712-.3.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7L8.825 12Zm6.35 0L13.7 13.475c-.2.2-.3.433-.3.7 0 .267.1.5.3.7.2.2.438.3.713.3.274 0 .512-.1.712-.3L17.3 12.7c.1-.1.17-.208.212-.325.042-.117.063-.242.063-.375s-.02-.258-.063-.375a.877.877 0 0 0-.212-.325l-2.175-2.175a.999.999 0 0 0-1.425 0c-.2.2-.3.433-.3.7 0 .267.1.5.3.7L15.175 12ZM5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
+        />
+      </svg>
    </button>
    <button
      aria-label="Link"
@@ -101,9 +182,18 @@ exports[`FormattingButtons renders in german 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_FormattingButtons_Icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"
+        />
+      </svg>
    </button>
  </div>
 </DocumentFragment>
@@ -487,9 +487,17 @@ exports[`<LoginWithQRFlow /> errors renders other_device_already_signed_in 1`] =
      <div
        class="mx_LoginWithQR_icon"
      >
-        <div
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
          width="32px"
-        />
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+          />
+        </svg>
      </div>
      <h1
        class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
@@ -1029,7 +1037,17 @@ exports[`<LoginWithQRFlow /> renders QR code 1`] = `
        role="button"
        tabindex="0"
      >
-        <div />
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+          />
+        </svg>
      </div>
      <div
        class="mx_LoginWithQR_breadcrumbs"
@@ -1230,7 +1248,17 @@ exports[`<LoginWithQRFlow /> renders spinner while loading 1`] = `
        role="button"
        tabindex="0"
      >
-        <div />
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+          />
+        </svg>
      </div>
      <div
        class="mx_LoginWithQR_breadcrumbs"
@@ -1284,7 +1312,17 @@ exports[`<LoginWithQRFlow /> renders spinner while signing in 1`] = `
        role="button"
        tabindex="0"
      >
-        <div />
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+          />
+        </svg>
      </div>
      <div
        class="mx_LoginWithQR_breadcrumbs"
@@ -1350,7 +1388,17 @@ exports[`<LoginWithQRFlow /> renders spinner while verifying 1`] = `
        role="button"
        tabindex="0"
      >
-        <div />
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+          />
+        </svg>
      </div>
      <div
        class="mx_LoginWithQR_breadcrumbs"
@@ -1407,7 +1455,17 @@ exports[`<LoginWithQRFlow /> renders spinner whilst QR generating 1`] = `
        role="button"
        tabindex="0"
      >
-        <div />
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+          />
+        </svg>
      </div>
      <div
        class="mx_LoginWithQR_breadcrumbs"
@@ -36,10 +36,25 @@ exports[`<LoginWithQRSection /> MSC3906 should render panel get_login_token + .w
          role="button"
          tabindex="0"
        >
-          <div
+          <svg
+            fill="currentColor"
            height="20"
+            viewBox="0 0 24 24"
            width="20"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M15 16v-3h-2v3h2Z"
+            />
+            <path
+              d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
+            />
+          </svg>
          Show QR code
        </div>
      </div>
@@ -78,10 +93,25 @@ exports[`<LoginWithQRSection /> MSC3906 should render panel get_login_token + MS
          role="button"
          tabindex="0"
        >
-          <div
+          <svg
+            fill="currentColor"
            height="20"
+            viewBox="0 0 24 24"
            width="20"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M15 16v-3h-2v3h2Z"
+            />
+            <path
+              d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
+            />
+          </svg>
          Show QR code
        </div>
      </div>
@@ -221,7 +221,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                    <div
                      class="mx_SettingsSubsection_text"
                    >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+                        />
+                      </svg>
                      Video rooms and conferences
                    </div>
                    <div
@@ -462,7 +472,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                    <div
                      class="mx_SettingsSubsection_text"
                    >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+                        />
+                      </svg>
                      Video rooms and conferences
                    </div>
                    <div
@@ -243,9 +243,18 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
          class="_indicator-icon_133tf_26"
          style="--cpd-icon-button-size: 100%;"
        >
-          <div
+          <svg
            class="mx_ThreadsActivityCentreButton_Icon"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+            />
+          </svg>
        </div>
      </button>
      <span
@@ -162,9 +162,18 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
          class="_indicator-icon_133tf_26"
          style="--cpd-icon-button-size: 100%;"
        >
-          <div
+          <svg
            class="mx_ThreadsActivityCentreButton_Icon"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+            />
+          </svg>
        </div>
      </button>
    </div>
@@ -446,9 +455,18 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
          class="_indicator-icon_133tf_26"
          style="--cpd-icon-button-size: 100%;"
        >
-          <div
+          <svg
            class="mx_ThreadsActivityCentreButton_Icon"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+            />
+          </svg>
        </div>
      </button>
      <span
@@ -7,10 +7,10 @@ Please see LICENSE files in the repository root for full details.
 */

 import { MockedObject } from "jest-mock";
-import { MatrixClient, MatrixEvent, EventType, Room, EventTimeline } from "matrix-js-sdk/src/matrix";
+import { EventTimeline, EventType, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";

-import { IRoomState } from "../../src/components/structures/RoomView";
+import { IRoomState, MainSplitContentType } from "../../src/components/structures/RoomView";
 import { TimelineRenderingType } from "../../src/contexts/RoomContext";
 import { Layout } from "../../src/settings/enums/Layout";
 import { mkEvent } from "./test-utils";
@@ -54,7 +54,6 @@ export function getRoomContext(room: Room, override: Partial<IRoomState>): IRoom
        showApps: false,
        isPeeking: false,
        showRightPanel: true,
-        threadRightPanel: false,
        joining: false,
        atEndOfLiveTimeline: true,
        showTopUnreadMessagesBar: false,
@@ -76,6 +75,7 @@ export function getRoomContext(room: Room, override: Partial<IRoomState>): IRoom
        showDisplaynameChanges: true,
        matrixClientIsReady: false,
        timelineRenderingType: TimelineRenderingType.Room,
+        mainSplitContentType: MainSplitContentType.Timeline,
        liveTimeline: undefined,
        canSelfRedact: false,
        resizing: false,
@@ -1893,10 +1893,10 @@
  resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
  integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==

-"@matrix-org/analytics-events@^0.25.0":
-  version "0.25.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.25.0.tgz#b0b85297dc05a67feaf89cc5d70b80283c988141"
-  integrity sha512-UCTuMjlJGArMqG9qXGfeNz/XtZDFldwuO+dkqP6Wo1nVdWasoWAOlcimDWQ2JnNFCg+UDZU+HLBdS5juTd6xTg==
+"@matrix-org/analytics-events@^0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.26.0.tgz#7c8f8f924d8313c87951a0e941640ef8ff78f3d6"
+  integrity sha512-cjKZBejajUG8wPhVygMkBTwTLdEn74luUP6g6RjCUqPR3RYIl3NVi58Zil8CWfRTILb4wVLCPpAvehgXJn1HnQ==

 "@matrix-org/emojibase-bindings@^1.1.2":
  version "1.1.3"
@@ -9599,7 +9599,6 @@ which@^2.0.1:
    isexe "^2.0.0"

 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  name wrap-ansi-cjs
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==