Switch from css masks to rendering svg (#31681)

* Switch to Compound icons to replace old icons Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Apply same treatment to missed icons Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove duplicated icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in ImageView Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in ExtensionsCard Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in LegacyRoomListHeader Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in ImageSizePanel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in LegacyRoomList Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove icon from CreateSecretStorageDialog title Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in LiveContentSummary Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in RoomCallBanner Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in NonUrgentEchoFailureToast Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in LegacyCallViewHeader Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in CallEvent Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-16 09:52:31 +00:00
parent f9778fcbd3
commit 7e5a3a530d
32 changed files with 448 additions and 302 deletions
@@ -48,18 +48,6 @@ Please see LICENSE files in the repository root for full details.
    margin-bottom: 1em;
 }

-.mx_CreateSecretStorageDialog_titleWithIcon::before {
-    content: "";
-    display: inline-block;
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-    position: relative;
-    top: 5px;
-    background-color: $primary-content;
-    mask-image: url("@vector-im/compound-design-tokens/icons/key-solid.svg");
-}
-
 .mx_CreateSecretStorageDialog_centeredTitle,
 .mx_CreateSecretStorageDialog_centeredBody {
    text-align: center;
@@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 $button-size: 32px;
-$icon-size: 24px;
-$button-gap: 24px;
+$button-gap: var(--cpd-space-3x);

 :root {
    --image-view-panel-height: 68px;
@@ -82,6 +81,8 @@ $button-gap: 24px;
 }

 .mx_ImageView_toolbar {
+    --icon-size: 24px;
+
    padding-right: 16px;
    pointer-events: initial;
    display: flex;
@@ -89,60 +90,30 @@ $button-gap: 24px;
    flex-grow: 1;
    flex-basis: 0;
    justify-content: flex-end;
-    gap: calc($button-gap - ($button-size - $icon-size));
+    gap: $button-gap;
 }

 .mx_ImageView_button {
-    padding: calc(($button-size - $icon-size) / 2);
+    padding: calc(($button-size - var(--icon-size)) / 2);
+    width: var(--icon-size);
+    height: var(--icon-size);
    display: block;

-    &::before {
-        content: "";
-        height: $icon-size;
-        width: $icon-size;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
+    svg {
+        height: inherit;
+        width: inherit;
        display: block;
-        background-color: $icon-button-color;
+        color: $icon-button-color;
    }
 }

-.mx_ImageView_button_rotateCW::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/rotate-right.svg");
-}
-
-.mx_ImageView_button_rotateCCW::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/rotate-left.svg");
-}
-
-.mx_ImageView_button_zoomOut::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/zoom-out.svg");
-}
-
-.mx_ImageView_button_zoomIn::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/zoom-in.svg");
-}
-
-.mx_ImageView_button_download::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/download.svg");
-}
-
-.mx_ImageView_button_more::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
-    mask-size: 28px;
+.mx_ImageView_button_more {
+    --icon-size: 28px;
 }

 .mx_ImageView_button_close {
-    padding: calc($button-size - $button-size);
    border-radius: 100%;
    background: #21262c; /* same on all themes */
-    &::before {
-        width: $button-size;
-        height: $button-size;
-        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
-        mask-size: 24px;
-    }
 }

@media (prefers-reduced-motion) {
@@ -46,13 +46,10 @@ Please see LICENSE files in the repository root for full details.
    line-height: 24px; /* in px to match the avatar */
 }

-.mx_CallEvent_inactive .mx_CallEvent_title::before {
+.mx_CallEvent_inactive .mx_CallEvent_title svg {
    display: inline-block;
    vertical-align: middle;
-    content: "";
-    background-color: $secondary-content;
-    mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
-    mask-size: 16px;
+    color: $secondary-content;
    width: 16px;
    height: 16px;
    margin-right: $spacing-8;
@@ -31,26 +31,17 @@ Please see LICENSE files in the repository root for full details.
            background-color: $quinary-content;
        }

-        &::before {
-            content: "";
+        svg {
            width: 20px;
            height: 20px;
            top: 3px;
            right: 0;
            position: absolute;
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background-color: $tertiary-content;
-            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
+            color: $tertiary-content;
        }

        &[aria-expanded="true"] {
            background-color: $quinary-content;
-
-            &::before {
-                transform: rotate(180deg);
-            }
        }
    }

@@ -66,23 +57,18 @@ Please see LICENSE files in the repository root for full details.
        box-sizing: border-box;
        flex-shrink: 0;

-        &::before {
-            content: "";
+        svg {
            width: 16px;
            height: 16px;
            position: absolute;
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background-color: $secondary-content;
-            mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
+            color: $secondary-content;
        }

        &:hover {
            background-color: $tertiary-content;

-            &::before {
-                background-color: $background;
+            svg {
+                color: $background;
            }
        }
    }
@@ -10,41 +10,28 @@ Please see LICENSE files in the repository root for full details.
    color: $secondary-content;

    .mx_LiveContentSummary_text {
-        &::before {
+        svg {
            display: inline-block;
            vertical-align: text-bottom;
-            content: "";
-            background-color: $secondary-content;
-            mask-size: 16px;
+            color: $secondary-content;
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }

-        &.mx_LiveContentSummary_text_video::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
-        }
-
-        &.mx_LiveContentSummary_text_voice::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
-        }
-
        &.mx_LiveContentSummary_text_active {
            color: $accent;

-            &::before {
-                background-color: $accent;
+            svg {
+                color: $accent;
            }
        }
    }

-    .mx_LiveContentSummary_participants::before {
+    .mx_LiveContentSummary_participants svg {
        display: inline-block;
-        vertical-align: text-bottom;
-        content: "";
-        background-color: $secondary-content;
-        mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
-        mask-size: 16px;
+        vertical-align: middle;
+        color: $secondary-content;
        width: 16px;
        height: 16px;
        margin-right: 2px;
@@ -31,16 +31,12 @@ Please see LICENSE files in the repository root for full details.
    font-weight: var(--cpd-font-weight-semibold);
    padding-right: $spacing-8;

-    &::before {
+    svg {
        display: inline-block;
        vertical-align: middle;
-        content: "";
-        background-color: $secondary-content;
-        mask-size: 16px;
-        mask-position: center;
+        color: $secondary-content;
        width: 16px;
-        height: 1.2em; /* to match line height */
+        height: 16px;
        margin-right: 8px;
-        mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
    }
 }
@@ -100,23 +100,19 @@ Please see LICENSE files in the repository root for full details.
            height: 24px;
            border-radius: 8px;

-            &::before {
-                content: "";
+            svg {
                width: 16px;
                height: 16px;
                position: absolute;
                top: 4px;
                left: 4px;
-                mask-position: center;
-                mask-size: contain;
-                mask-repeat: no-repeat;
-                background: var(--cpd-color-icon-secondary);
+                color: var(--cpd-color-icon-secondary);
            }
        }

-        .mx_RoomSublist_auxButton:hover,
-        .mx_RoomSublist_menuButton:hover {
-            background: $panel-actions;
+        .mx_RoomSublist_auxButton:hover svg,
+        .mx_RoomSublist_menuButton:hover svg {
+            color: $panel-actions;
        }

        /* Hide the menu button by default */
@@ -126,14 +122,6 @@ Please see LICENSE files in the repository root for full details.
            margin: 0;
        }

-        .mx_RoomSublist_auxButton::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
-        }
-
-        .mx_RoomSublist_menuButton::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
-        }
-
        .mx_RoomSublist_headerText {
            flex: 1;
            max-width: calc(100% - 16px); /* 16px is the badge width */
@@ -151,20 +139,11 @@ Please see LICENSE files in the repository root for full details.
                height: 14px;
                margin-right: 6px;

-                &::before {
-                    content: "";
+                svg {
                    width: 18px;
                    height: 18px;
                    position: absolute;
-                    mask-position: center;
-                    mask-size: contain;
-                    mask-repeat: no-repeat;
-                    background-color: var(--cpd-color-icon-secondary);
-                    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
-                }
-
-                &.mx_RoomSublist_collapseBtn_collapsed::before {
-                    transform: rotate(-90deg);
+                    color: var(--cpd-color-icon-secondary);
                }
            }
        }
@@ -320,7 +299,7 @@ Please see LICENSE files in the repository root for full details.
                background-color: $panel-actions;
                margin-top: 8px;

-                &::before {
+                svg {
                    top: 8px;
                    left: 8px;
                }
@@ -359,7 +338,7 @@ Please see LICENSE files in the repository root for full details.
                /* to occlude the sublist title */
                background-color: $roomlist-bg-color;

-                &::before {
+                svg {
                    top: 0;
                    left: 0;
                }
@@ -17,20 +17,10 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_ImageSizePanel_size {
-        background-color: $quinary-content;
-        mask-repeat: no-repeat;
-        mask-size: 221px;
-        mask-position: center;
+        display: block;
+        color: $quinary-content;
        width: 221px;
        height: 148px;
        margin-bottom: 14px; /* move radio button away from bottom edge a bit */
-
-        &.mx_ImageSizePanel_sizeDefault {
-            mask: url("$(res)/img/element-icons/settings/img-size-normal.svg");
-        }
-
-        &.mx_ImageSizePanel_sizeLarge {
-            mask: url("$(res)/img/element-icons/settings/img-size-large.svg");
-        }
    }
 }
@@ -29,11 +29,6 @@ Please see LICENSE files in the repository root for full details.
            font-weight: var(--cpd-font-weight-semibold);
        }

-        .mx_LiveContentSummary_participants::before {
-            width: 15px;
-            height: 15px;
-        }
-
        .mx_IncomingCallToast_buttons {
            display: flex;
            gap: var(--cpd-space-2x);
@@ -7,15 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */

 .mx_NonUrgentEchoFailureToast {
-    .mx_NonUrgentEchoFailureToast_icon {
+    svg {
        display: inline-block;
        width: $font-18px;
        height: $font-18px;
-        mask-position: center;
-        mask-size: contain;
-        mask-repeat: no-repeat;
-        background-color: #fff; /* we know that non-urgent toasts are always styled the same */
-        mask-image: url("@vector-im/compound-design-tokens/icons/offline.svg");
+        color: #fff; /* we know that non-urgent toasts are always styled the same */
        margin-right: 8px;
    }

@@ -46,34 +46,12 @@ Please see LICENSE files in the repository root for full details.
    vertical-align: middle;
    cursor: pointer;

-    &::before {
-        content: "";
+    svg {
        display: inline-block;
        height: 20px;
        width: 20px;
        vertical-align: middle;
-        background-color: $secondary-content;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-    }
-
-    &.mx_LegacyCallViewHeader_button_fullscreen {
-        &::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg");
-        }
-    }
-
-    &.mx_LegacyCallViewHeader_button_pin {
-        &::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/pin-solid.svg");
-        }
-    }
-
-    &.mx_LegacyCallViewHeader_button_expand {
-        &::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg");
-        }
+        color: $secondary-content;
    }
 }

@@ -105,17 +83,12 @@ Please see LICENSE files in the repository root for full details.
    width: 16px;
    vertical-align: middle;

-    &::before {
-        content: "";
+    svg {
        display: inline-block;
        vertical-align: top;

        height: 16px;
        width: 16px;
-        background-color: $secondary-content;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-        mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
+        color: $secondary-content;
    }
 }
@@ -7,9 +7,9 @@
            <circle cx="161.936" cy="61.1488" r="11.6596" fill="black"/>
        </mask>
    </defs>
-    <rect x="0.5" y="0.5" width="220" height="147" rx="7.5" stroke="#E3E8F0"/>
-    <rect x="57" y="14" width="10" height="10" rx="1.5" fill="#E3E8F0"/>
-    <rect x="70" y="14" width="60" height="10" rx="1.5" fill="#E3E8F0"/>
-    <path d="M0 8C0 3.58173 3.58172 0 8 0H45C45.5523 0 46 0.447715 46 1V147C46 147.552 45.5523 148 45 148H8C3.58172 148 0 144.418 0 140V8Z" fill="#E3E8F0"/>
-    <rect x="57" y="32" width="137" height="102.021" rx="5.82979" fill="#E3E8F0" mask="url(#mountains)"/>
+    <rect x="0.5" y="0.5" width="220" height="147" rx="7.5" stroke="currentColor"/>
+    <rect x="57" y="14" width="10" height="10" rx="1.5" fill="currentColor"/>
+    <rect x="70" y="14" width="60" height="10" rx="1.5" fill="currentColor"/>
+    <path d="M0 8C0 3.58173 3.58172 0 8 0H45C45.5523 0 46 0.447715 46 1V147C46 147.552 45.5523 148 45 148H8C3.58172 148 0 144.418 0 140V8Z" fill="currentColor"/>
+    <rect x="57" y="32" width="137" height="102.021" rx="5.82979" fill="currentColor" mask="url(#mountains)"/>
 </svg>
@@ -7,14 +7,14 @@
            <circle cx="93" cy="92" r="4" fill="black"/>
        </mask>
    </defs>
-    <rect x="0.5" y="0.5" width="220" height="147" rx="7.5" stroke="#E3E8F0"/>
-    <rect x="57" y="14" width="10" height="10" rx="1.5" fill="#E3E8F0"/>
-    <rect x="57" y="64" width="10" height="10" rx="1.5" fill="#E3E8F0"/>
-    <rect x="57" y="125" width="10" height="10" rx="1.5" fill="#E3E8F0"/>
-    <rect x="70" y="14" width="60" height="10" rx="1.5" fill="#E3E8F0"/>
-    <rect x="70" y="64" width="60" height="10" rx="1.5" fill="#E3E8F0"/>
-    <rect x="70" y="125" width="60" height="10" rx="1.5" fill="#E3E8F0"/>
-    <path d="M57 32.5C57 31.6716 57.6716 31 58.5 31H208.5C209.328 31 210 31.6716 210 32.5V54.5C210 55.3284 209.328 56 208.5 56H58.5C57.6716 56 57 55.3284 57 54.5V32.5Z" fill="#E3E8F0"/>
-    <path d="M0 8C0 3.58173 3.58172 0 8 0H45C45.5523 0 46 0.447715 46 1V147C46 147.552 45.5523 148 45 148H8C3.58172 148 0 144.418 0 140V8Z" fill="#E3E8F0"/>
-    <rect x="57" y="82" width="47" height="35" rx="2" fill="#E3E8F0" mask="url(#mountains)" />
+    <rect x="0.5" y="0.5" width="220" height="147" rx="7.5" stroke="currentColor"/>
+    <rect x="57" y="14" width="10" height="10" rx="1.5" fill="currentColor"/>
+    <rect x="57" y="64" width="10" height="10" rx="1.5" fill="currentColor"/>
+    <rect x="57" y="125" width="10" height="10" rx="1.5" fill="currentColor"/>
+    <rect x="70" y="14" width="60" height="10" rx="1.5" fill="currentColor"/>
+    <rect x="70" y="64" width="60" height="10" rx="1.5" fill="currentColor"/>
+    <rect x="70" y="125" width="60" height="10" rx="1.5" fill="currentColor"/>
+    <path d="M57 32.5C57 31.6716 57.6716 31 58.5 31H208.5C209.328 31 210 31.6716 210 32.5V54.5C210 55.3284 209.328 56 208.5 56H58.5C57.6716 56 57 55.3284 57 54.5V32.5Z" fill="currentColor"/>
+    <path d="M0 8C0 3.58173 3.58172 0 8 0H45C45.5523 0 46 0.447715 46 1V147C46 147.552 45.5523 148 45 148H8C3.58172 148 0 144.418 0 140V8Z" fill="currentColor"/>
+    <rect x="57" y="82" width="47" height="35" rx="2" fill="currentColor" mask="url(#mountains)" />
 </svg>
@@ -692,13 +692,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp

        let titleClass: string | string[] | undefined;
        switch (this.state.phase) {
-            case Phase.Passphrase:
-            case Phase.PassphraseConfirm:
-                titleClass = ["mx_CreateSecretStorageDialog_titleWithIcon"];
-                break;
-            case Phase.ShowKey:
-                titleClass = ["mx_CreateSecretStorageDialog_titleWithIcon"];
-                break;
            case Phase.ChooseKeyPassphrase:
                titleClass = "mx_CreateSecretStorageDialog_centeredTitle";
                break;
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { useCallback } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { VideoCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
@@ -66,7 +67,10 @@ const RoomCallBannerInner: React.FC<RoomCallBannerProps> = ({ roomId, call }) =>
    return (
        <div className="mx_RoomCallBanner" onClick={onClick}>
            <div className="mx_RoomCallBanner_text">
-                <span className="mx_RoomCallBanner_label">{_t("voip|video_call")}</span>
+                <span className="mx_RoomCallBanner_label">
+                    <VideoCallSolidIcon />
+                    {_t("voip|video_call")}
+                </span>
                <SessionDuration session={call.session} />
            </div>

@@ -11,6 +11,15 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, createRef, type CSSProperties, useEffect } from "react";
 import FocusLock from "react-focus-lock";
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import {
+    CloseIcon,
+    DownloadIcon,
+    OverflowHorizontalIcon,
+    RotateLeftIcon,
+    RotateRightIcon,
+    ZoomInIcon,
+    ZoomOutIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import MemberAvatar from "../avatars/MemberAvatar";
@@ -501,25 +510,12 @@ export default class ImageView extends React.Component<IProps, IState> {
                    onClick={this.onOpenContextMenu}
                    ref={this.contextMenuButton}
                    isExpanded={this.state.contextMenuDisplayed}
-                />
+                >
+                    <OverflowHorizontalIcon />
+                </ContextMenuTooltipButton>
            );
        }

-        const zoomOutButton = (
-            <AccessibleButton
-                className="mx_ImageView_button mx_ImageView_button_zoomOut"
-                title={_t("action|zoom_out")}
-                onClick={this.onZoomOutClick}
-            />
-        );
-        const zoomInButton = (
-            <AccessibleButton
-                className="mx_ImageView_button mx_ImageView_button_zoomIn"
-                title={_t("action|zoom_in")}
-                onClick={this.onZoomInClick}
-            />
-        );
-
        let title: JSX.Element | undefined;
        if (this.props.mxEvent?.getContent()) {
            title = (
@@ -544,18 +540,34 @@ export default class ImageView extends React.Component<IProps, IState> {
                    {info}
                    {title}
                    <div className="mx_ImageView_toolbar">
-                        {zoomOutButton}
-                        {zoomInButton}
                        <AccessibleButton
-                            className="mx_ImageView_button mx_ImageView_button_rotateCCW"
+                            className="mx_ImageView_button"
+                            title={_t("action|zoom_out")}
+                            onClick={this.onZoomOutClick}
+                        >
+                            <ZoomOutIcon />
+                        </AccessibleButton>
+                        <AccessibleButton
+                            className="mx_ImageView_button"
+                            title={_t("action|zoom_in")}
+                            onClick={this.onZoomInClick}
+                        >
+                            <ZoomInIcon />
+                        </AccessibleButton>
+                        <AccessibleButton
+                            className="mx_ImageView_button"
                            title={_t("lightbox|rotate_left")}
                            onClick={this.onRotateCounterClockwiseClick}
-                        />
+                        >
+                            <RotateLeftIcon />
+                        </AccessibleButton>
                        <AccessibleButton
-                            className="mx_ImageView_button mx_ImageView_button_rotateCW"
+                            className="mx_ImageView_button"
                            title={_t("lightbox|rotate_right")}
                            onClick={this.onRotateClockwiseClick}
-                        />
+                        >
+                            <RotateRightIcon />
+                        </AccessibleButton>
                        <DownloadButton
                            url={this.props.src}
                            fileName={this.props.name}
@@ -567,7 +579,9 @@ export default class ImageView extends React.Component<IProps, IState> {
                            className="mx_ImageView_button mx_ImageView_button_close"
                            title={_t("action|close")}
                            onClick={this.props.onFinished}
-                        />
+                        >
+                            <CloseIcon />
+                        </AccessibleButton>
                        {this.renderContextMenu()}
                    </div>
                </div>
@@ -612,10 +626,12 @@ export const DownloadButton: React.FC<DownloadButtonProps> = ({ url, fileName, m

    return (
        <AccessibleButton
-            className="mx_ImageView_button mx_ImageView_button_download"
+            className="mx_ImageView_button"
            title={loading ? _t("timeline|download_action_downloading") : _t("action|download")}
            onClick={download}
            disabled={loading}
-        />
+        >
+            <DownloadIcon />
+        </AccessibleButton>
    );
 };
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { type Ref, useCallback, useContext, useMemo, type JSX } from "react";
+import { VideoCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import type { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
 import { ConnectionState, type ElementCall } from "../../../models/Call";
@@ -166,7 +167,10 @@ export const CallEvent = ({ mxEvent, ref }: CallEventProps): JSX.Element => {
            <div className="mx_CallEvent_wrapper" ref={ref}>
                <div className="mx_CallEvent mx_CallEvent_inactive">
                    <div className="mx_CallEvent_columns">
-                        <span className="mx_CallEvent_title">{_t("timeline|m.call|video_call_ended")}</span>
+                        <span className="mx_CallEvent_title">
+                            <VideoCallSolidIcon />
+                            {_t("timeline|m.call|video_call_ended")}
+                        </span>
                        <CallDuration delta={latestEvent.getTs() - mxEvent.getTs()} />
                    </div>
                </div>
@@ -192,7 +192,9 @@ const DmAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex, dispatcher = default
                    title={_t("action|add_people")}
                    isExpanded={menuDisplayed}
                    ref={handle}
-                />
+                >
+                    <PlusIcon />
+                </ContextMenuTooltipButton>

                {contextMenu}
            </>
@@ -208,7 +210,9 @@ const DmAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex, dispatcher = default
                className="mx_RoomSublist_auxButton"
                aria-label={_t("action|start_chat")}
                title={_t("action|start_chat")}
-            />
+            >
+                <PlusIcon />
+            </AccessibleButton>
        );
    }

@@ -375,7 +379,9 @@ const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
                    title={_t("room_list|add_room_label")}
                    isExpanded={menuDisplayed}
                    ref={handle}
-                />
+                >
+                    <PlusIcon />
+                </ContextMenuTooltipButton>

                {contextMenu}
            </>
@@ -15,6 +15,8 @@ import {
    SearchIcon,
    UserAddIcon,
    VideoCallSolidIcon,
+    ChevronDownIcon,
+    ChevronUpIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";

 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -131,7 +133,7 @@ const LegacyRoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
    const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms");
    const pendingActions = usePendingActions();

-    const canShowMainMenu = activeSpace || spaceKey === MetaSpace.Home;
+    const canShowMainMenu = !!activeSpace || spaceKey === MetaSpace.Home;

    useEffect(() => {
        if (mainMenuDisplayed && !canShowMainMenu) {
@@ -392,7 +394,11 @@ const LegacyRoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
            onClick: openMainMenu,
            isExpanded: mainMenuDisplayed,
            className: "mx_LegacyRoomListHeader_contextMenuButton",
-            children: title,
+            children: (
+                <>
+                    {title} {mainMenuDisplayed ? <ChevronUpIcon /> : <ChevronDownIcon />}
+                </>
+            ),
        };

        if (!!activeSpace) {
@@ -422,7 +428,9 @@ const LegacyRoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                    isExpanded={plusMenuDisplayed}
                    className="mx_LegacyRoomListHeader_plusButton"
                    title={_t("action|add")}
-                />
+                >
+                    <PlusIcon />
+                </ContextMenuTooltipButton>
            )}

            {contextMenu}
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React, { type FC } from "react";
 import classNames from "classnames";
+import { GroupIcon, VideoCallSolidIcon, VoiceCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";

@@ -30,11 +31,10 @@ export const LiveContentSummary: FC<Props> = ({ type, text, active, participantC
    <span className="mx_LiveContentSummary">
        <span
            className={classNames("mx_LiveContentSummary_text", {
-                mx_LiveContentSummary_text_video: type === LiveContentType.Video,
-                mx_LiveContentSummary_text_voice: type === LiveContentType.Voice,
                mx_LiveContentSummary_text_active: active,
            })}
        >
+            {type === LiveContentType.Video ? <VideoCallSolidIcon /> : <VoiceCallSolidIcon />}
            {text}
        </span>
        {participantCount > 0 && (
@@ -44,6 +44,7 @@ export const LiveContentSummary: FC<Props> = ({ type, text, active, participantC
                    className="mx_LiveContentSummary_participants"
                    aria-label={_t("voip|n_people_joined", { count: participantCount })}
                >
+                    <GroupIcon />
                    {participantCount}
                </span>
            </>
@@ -13,6 +13,11 @@ import classNames from "classnames";
 import { type Enable, Resizable } from "re-resizable";
 import { type Direction } from "re-resizable/lib/resizer";
 import React, { type JSX, type ComponentType, createRef, type ReactComponentElement, type ReactNode } from "react";
+import {
+    ChevronDownIcon,
+    ChevronRightIcon,
+    OverflowHorizontalIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";

 import { polyfillTouchEvent } from "../../../@types/polyfill";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
@@ -608,7 +613,9 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                    onClick={this.onOpenMenuClick}
                    title={_t("room_list|sublist_options")}
                    isExpanded={!!this.state.contextMenuPosition}
-                />
+                >
+                    <OverflowHorizontalIcon />
+                </ContextMenuTooltipButton>
                {contextMenu}
            </React.Fragment>
        );
@@ -642,11 +649,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                        addRoomButton = <AuxButtonComponent tabIndex={tabIndex} />;
                    }

-                    const collapseClasses = classNames({
-                        mx_RoomSublist_collapseBtn: true,
-                        mx_RoomSublist_collapseBtn_collapsed: !this.state.isExpanded && !this.props.forceExpanded,
-                    });
-
+                    const collapsed = !this.state.isExpanded && !this.props.forceExpanded;
                    const classes = classNames({
                        mx_RoomSublist_headerContainer: true,
                        mx_RoomSublist_headerContainer_withAux: !!addRoomButton,
@@ -682,7 +685,9 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                                        onContextMenu={this.onContextMenu}
                                        title={this.props.isMinimized ? this.props.label : undefined}
                                    >
-                                        <span className={collapseClasses} />
+                                        <span className="mx_RoomSublist_collapseBtn">
+                                            {collapsed ? <ChevronRightIcon /> : <ChevronDownIcon />}
+                                        </span>
                                        <span id={getLabelId(this.props.tagId)}>{this.props.label}</span>
                                    </AccessibleButton>
                                    {this.renderMenu()}
@@ -15,6 +15,8 @@ import { _t } from "../../../languageHandler";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import { ImageSize } from "../../../settings/enums/ImageSize";
 import { SettingsSubsection } from "./shared/SettingsSubsection";
+import { Icon as ImgSizeNormalIcon } from "../../../../res/img/element-icons/settings/img-size-normal.svg";
+import { Icon as ImgSizeLargeIcon } from "../../../../res/img/element-icons/settings/img-size-large.svg";

 interface IState {
    size: ImageSize;
@@ -42,7 +44,7 @@ export default class ImageSizePanel extends React.Component<EmptyObject, IState>
            <SettingsSubsection heading={_t("settings|appearance|timeline_image_size")}>
                <div className="mx_ImageSizePanel_radios">
                    <label>
-                        <div className="mx_ImageSizePanel_size mx_ImageSizePanel_sizeDefault" />
+                        <ImgSizeNormalIcon className="mx_ImageSizePanel_size" />
                        <StyledRadioButton
                            name="image_size"
                            value={ImageSize.Normal}
@@ -53,7 +55,7 @@ export default class ImageSizePanel extends React.Component<EmptyObject, IState>
                        </StyledRadioButton>
                    </label>
                    <label>
-                        <div className="mx_ImageSizePanel_size mx_ImageSizePanel_sizeLarge" />
+                        <ImgSizeLargeIcon className="mx_ImageSizePanel_size" />
                        <StyledRadioButton
                            name="image_size"
                            value={ImageSize.Large}
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
+import { OfflineIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -21,7 +22,7 @@ export default class NonUrgentEchoFailureToast extends React.PureComponent {
    public render(): React.ReactNode {
        return (
            <div className="mx_NonUrgentEchoFailureToast">
-                <span className="mx_NonUrgentEchoFailureToast_icon" />
+                <OfflineIcon />
                {_t(
                    "error|non_urgent_echo_failure_toast",
                    {},
@@ -7,6 +7,12 @@ Please see LICENSE files in the repository root for full details.

 import { type Room } from "matrix-js-sdk/src/matrix";
 import React from "react";
+import {
+    PopOutIcon,
+    ExpandIcon,
+    PinSolidIcon,
+    VoiceCallSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../../languageHandler";
 import RoomAvatar from "../../avatars/RoomAvatar";
@@ -23,24 +29,26 @@ const LegacyCallViewHeaderControls: React.FC<LegacyCallControlsProps> = ({ onExp
        <div className="mx_LegacyCallViewHeader_controls">
            {onMaximize && (
                <AccessibleButton
-                    className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_fullscreen"
+                    className="mx_LegacyCallViewHeader_button"
                    onClick={onMaximize}
                    title={_t("voip|maximise")}
-                />
+                >
+                    <ExpandIcon />
+                </AccessibleButton>
            )}
            {onPin && (
-                <AccessibleButton
-                    className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_pin"
-                    onClick={onPin}
-                    title={_t("action|pin")}
-                />
+                <AccessibleButton className="mx_LegacyCallViewHeader_button" onClick={onPin} title={_t("action|pin")}>
+                    <PinSolidIcon />
+                </AccessibleButton>
            )}
            {onExpand && (
                <AccessibleButton
-                    className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_expand"
+                    className="mx_LegacyCallViewHeader_button"
                    onClick={onExpand}
                    title={_t("voip|expand")}
-                />
+                >
+                    <PopOutIcon />
+                </AccessibleButton>
            )}
        </div>
    );
@@ -84,7 +92,9 @@ const LegacyCallViewHeader: React.FC<LegacyCallViewHeaderProps> = ({
    if (!pipMode) {
        return (
            <div className="mx_LegacyCallViewHeader">
-                <div className="mx_LegacyCallViewHeader_icon" />
+                <div className="mx_LegacyCallViewHeader_icon">
+                    <VoiceCallSolidIcon />
+                </div>
                <span className="mx_LegacyCallViewHeader_text">{_t("action|call")}</span>
                <LegacyCallViewHeaderControls onMaximize={onMaximize} />
            </div>
@@ -141,7 +141,7 @@ exports[`CreateSecretStorageDialog handles the happy path 2`] = `
      class="mx_Dialog_header"
    >
      <h1
-        class="mx_Heading_h3 mx_Dialog_title mx_CreateSecretStorageDialog_titleWithIcon"
+        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Save your Recovery Key
@@ -23,40 +23,154 @@ exports[`<ImageView /> renders correctly 1`] = `
        <div
          aria-describedby="_r_2_"
          aria-label="Zoom out"
-          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomOut"
+          class="mx_AccessibleButton mx_ImageView_button"
          role="button"
          tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13.5 9.5q.425 0 .713.287.288.288.287.713a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287h-6a.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713q0-.425.287-.713A.97.97 0 0 1 7.5 9.5z"
+            />
+            <path
+              clip-rule="evenodd"
+              d="M10.5 3a7.5 7.5 0 0 1 5.963 12.049l3.244 3.244a1 1 0 1 1-1.414 1.414l-3.244-3.244A7.5 7.5 0 1 1 10.5 3m0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
        <div
          aria-label="Zoom in"
-          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomIn"
+          class="mx_AccessibleButton mx_ImageView_button"
          role="button"
          tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#a)"
+            >
+              <path
+                d="M10.5 6.5q.425 0 .713.287.288.288.287.713v2h2q.425 0 .713.287.288.288.287.713a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287h-2v2a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713v-2h-2a.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713q0-.425.287-.713A.97.97 0 0 1 7.5 9.5h2v-2q0-.425.287-.713A.97.97 0 0 1 10.5 6.5"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M10.5 3a7.5 7.5 0 0 1 5.963 12.049l3.244 3.244a1 1 0 1 1-1.414 1.414l-3.244-3.244A7.5 7.5 0 1 1 10.5 3m0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11"
+                fill-rule="evenodd"
+              />
+              <path
+                d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414zM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0"
+              />
+              <path
+                d="M7.875 11.375h1.75v1.75q0 .372.252.623A.85.85 0 0 0 10.5 14a.85.85 0 0 0 .623-.252.85.85 0 0 0 .252-.623v-1.75h1.75a.85.85 0 0 0 .623-.252A.85.85 0 0 0 14 10.5a.85.85 0 0 0-.252-.623.85.85 0 0 0-.623-.252h-1.75v-1.75a.85.85 0 0 0-.252-.623A.85.85 0 0 0 10.5 7a.85.85 0 0 0-.623.252.85.85 0 0 0-.252.623v1.75h-1.75a.85.85 0 0 0-.623.252A.85.85 0 0 0 7 10.5q0 .372.252.623a.85.85 0 0 0 .623.252"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="a"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </div>
        <div
          aria-label="Rotate Left"
-          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_rotateCCW"
+          class="mx_AccessibleButton mx_ImageView_button"
          role="button"
          tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.56 7.98C6.1 7.52 5.31 7.6 5 8.17c-.28.51-.5 1.03-.67 1.58-.19.63.31 1.25.96 1.25h.01c.43 0 .82-.28.94-.7q.18-.6.48-1.17c.22-.37.15-.84-.16-1.15M5.31 13h-.02c-.65 0-1.15.62-.96 1.25.16.54.38 1.07.66 1.58.31.57 1.11.66 1.57.2.3-.31.38-.77.17-1.15-.2-.37-.36-.76-.48-1.16a.97.97 0 0 0-.94-.72m2.85 6.02q.765.42 1.59.66c.62.18 1.24-.32 1.24-.96v-.03c0-.43-.28-.82-.7-.94-.4-.12-.78-.28-1.15-.48a.97.97 0 0 0-1.16.17l-.03.03c-.45.45-.36 1.24.21 1.55M13 4.07v-.66c0-.89-1.08-1.34-1.71-.71L9.17 4.83c-.4.4-.4 1.04 0 1.43l2.13 2.08c.63.62 1.7.17 1.7-.72V6.09c2.84.48 5 2.94 5 5.91 0 2.73-1.82 5.02-4.32 5.75a.97.97 0 0 0-.68.94v.02c0 .65.61 1.14 1.23.96A7.976 7.976 0 0 0 20 12c0-4.08-3.05-7.44-7-7.93"
+            />
+          </svg>
+        </div>
        <div
          aria-label="Rotate Right"
-          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_rotateCW"
+          class="mx_AccessibleButton mx_ImageView_button"
          role="button"
          tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#a)"
+            >
+              <path
+                d="M14.83 4.83 12.7 2.7c-.62-.62-1.7-.18-1.7.71v.66C7.06 4.56 4 7.92 4 12c0 3.64 2.43 6.71 5.77 7.68.62.18 1.23-.32 1.23-.96v-.03a.97.97 0 0 0-.68-.94A5.98 5.98 0 0 1 6 12c0-2.97 2.16-5.43 5-5.91v1.53c0 .89 1.07 1.33 1.7.71l2.13-2.08a.99.99 0 0 0 0-1.42m4.84 4.93q-.24-.825-.66-1.59c-.31-.57-1.1-.66-1.56-.2l-.01.01c-.31.31-.38.78-.17 1.16.2.37.36.76.48 1.16.12.42.51.7.94.7h.02c.65 0 1.15-.62.96-1.24M13 18.68v.02c0 .65.62 1.14 1.24.96q.825-.24 1.59-.66c.57-.31.66-1.1.2-1.56l-.02-.02a.97.97 0 0 0-1.16-.17c-.37.21-.76.37-1.16.49-.41.12-.69.51-.69.94m4.44-2.65c.46.46 1.25.37 1.56-.2.28-.51.5-1.04.67-1.59.18-.62-.31-1.24-.96-1.24h-.02c-.44 0-.82.28-.94.7q-.18.6-.48 1.17c-.21.38-.13.86.17 1.16"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="a"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </div>
        <div
          aria-label="Download"
-          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_download"
+          class="mx_AccessibleButton mx_ImageView_button"
          role="button"
          tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
+            />
+          </svg>
+        </div>
        <div
          aria-label="Close"
          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_close"
          role="button"
          tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.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.414"
+            />
+          </svg>
+        </div>
      </div>
    </div>
    <div
@@ -110,34 +110,136 @@ exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1
    >
      <div
        aria-label="Zoom out"
-        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomOut"
+        class="mx_AccessibleButton mx_ImageView_button"
        role="button"
        tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13.5 9.5q.425 0 .713.287.288.288.287.713a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287h-6a.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713q0-.425.287-.713A.97.97 0 0 1 7.5 9.5z"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M10.5 3a7.5 7.5 0 0 1 5.963 12.049l3.244 3.244a1 1 0 1 1-1.414 1.414l-3.244-3.244A7.5 7.5 0 1 1 10.5 3m0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
      <div
        aria-label="Zoom in"
-        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomIn"
+        class="mx_AccessibleButton mx_ImageView_button"
        role="button"
        tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            clip-path="url(#a)"
+          >
+            <path
+              d="M10.5 6.5q.425 0 .713.287.288.288.287.713v2h2q.425 0 .713.287.288.288.287.713a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287h-2v2a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713v-2h-2a.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713q0-.425.287-.713A.97.97 0 0 1 7.5 9.5h2v-2q0-.425.287-.713A.97.97 0 0 1 10.5 6.5"
+            />
+            <path
+              clip-rule="evenodd"
+              d="M10.5 3a7.5 7.5 0 0 1 5.963 12.049l3.244 3.244a1 1 0 1 1-1.414 1.414l-3.244-3.244A7.5 7.5 0 1 1 10.5 3m0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414zM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0"
+            />
+            <path
+              d="M7.875 11.375h1.75v1.75q0 .372.252.623A.85.85 0 0 0 10.5 14a.85.85 0 0 0 .623-.252.85.85 0 0 0 .252-.623v-1.75h1.75a.85.85 0 0 0 .623-.252A.85.85 0 0 0 14 10.5a.85.85 0 0 0-.252-.623.85.85 0 0 0-.623-.252h-1.75v-1.75a.85.85 0 0 0-.252-.623A.85.85 0 0 0 10.5 7a.85.85 0 0 0-.623.252.85.85 0 0 0-.252.623v1.75h-1.75a.85.85 0 0 0-.623.252A.85.85 0 0 0 7 10.5q0 .372.252.623a.85.85 0 0 0 .623.252"
+            />
+          </g>
+          <defs>
+            <clippath
+              id="a"
+            >
+              <path
+                d="M0 0h24v24H0z"
+              />
+            </clippath>
+          </defs>
+        </svg>
+      </div>
      <div
        aria-label="Rotate Left"
-        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_rotateCCW"
+        class="mx_AccessibleButton mx_ImageView_button"
        role="button"
        tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.56 7.98C6.1 7.52 5.31 7.6 5 8.17c-.28.51-.5 1.03-.67 1.58-.19.63.31 1.25.96 1.25h.01c.43 0 .82-.28.94-.7q.18-.6.48-1.17c.22-.37.15-.84-.16-1.15M5.31 13h-.02c-.65 0-1.15.62-.96 1.25.16.54.38 1.07.66 1.58.31.57 1.11.66 1.57.2.3-.31.38-.77.17-1.15-.2-.37-.36-.76-.48-1.16a.97.97 0 0 0-.94-.72m2.85 6.02q.765.42 1.59.66c.62.18 1.24-.32 1.24-.96v-.03c0-.43-.28-.82-.7-.94-.4-.12-.78-.28-1.15-.48a.97.97 0 0 0-1.16.17l-.03.03c-.45.45-.36 1.24.21 1.55M13 4.07v-.66c0-.89-1.08-1.34-1.71-.71L9.17 4.83c-.4.4-.4 1.04 0 1.43l2.13 2.08c.63.62 1.7.17 1.7-.72V6.09c2.84.48 5 2.94 5 5.91 0 2.73-1.82 5.02-4.32 5.75a.97.97 0 0 0-.68.94v.02c0 .65.61 1.14 1.23.96A7.976 7.976 0 0 0 20 12c0-4.08-3.05-7.44-7-7.93"
+          />
+        </svg>
+      </div>
      <div
        aria-label="Rotate Right"
-        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_rotateCW"
+        class="mx_AccessibleButton mx_ImageView_button"
        role="button"
        tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            clip-path="url(#a)"
+          >
+            <path
+              d="M14.83 4.83 12.7 2.7c-.62-.62-1.7-.18-1.7.71v.66C7.06 4.56 4 7.92 4 12c0 3.64 2.43 6.71 5.77 7.68.62.18 1.23-.32 1.23-.96v-.03a.97.97 0 0 0-.68-.94A5.98 5.98 0 0 1 6 12c0-2.97 2.16-5.43 5-5.91v1.53c0 .89 1.07 1.33 1.7.71l2.13-2.08a.99.99 0 0 0 0-1.42m4.84 4.93q-.24-.825-.66-1.59c-.31-.57-1.1-.66-1.56-.2l-.01.01c-.31.31-.38.78-.17 1.16.2.37.36.76.48 1.16.12.42.51.7.94.7h.02c.65 0 1.15-.62.96-1.24M13 18.68v.02c0 .65.62 1.14 1.24.96q.825-.24 1.59-.66c.57-.31.66-1.1.2-1.56l-.02-.02a.97.97 0 0 0-1.16-.17c-.37.21-.76.37-1.16.49-.41.12-.69.51-.69.94m4.44-2.65c.46.46 1.25.37 1.56-.2.28-.51.5-1.04.67-1.59.18-.62-.31-1.24-.96-1.24h-.02c-.44 0-.82.28-.94.7q-.18.6-.48 1.17c-.21.38-.13.86.17 1.16"
+            />
+          </g>
+          <defs>
+            <clippath
+              id="a"
+            >
+              <path
+                d="M0 0h24v24H0z"
+              />
+            </clippath>
+          </defs>
+        </svg>
+      </div>
      <div
        aria-label="Download"
-        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_download"
+        class="mx_AccessibleButton mx_ImageView_button"
        role="button"
        tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
+          />
+        </svg>
+      </div>
      <div
        aria-expanded="false"
        aria-haspopup="true"
@@ -145,13 +247,37 @@ exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1
        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_more"
        role="button"
        tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+          />
+        </svg>
+      </div>
      <div
        aria-label="Close"
        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_close"
        role="button"
        tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.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.414"
+          />
+        </svg>
+      </div>
    </div>
  </div>
  <div
@@ -48,10 +48,8 @@ const setupMainMenu = async (client: MatrixClient, testSpace: Room): Promise<Ren

    const wrapper = render(<RoomListHeader />);

-    expect(wrapper.container.textContent).toBe("Test Space");
-    act(() => {
-        wrapper.container.querySelector<HTMLElement>('[aria-label="Test Space menu"]')?.click();
-    });
+    expect(wrapper.getByText("Test Space")).toBeInTheDocument();
+    wrapper.getByLabelText("Test Space menu").click();

    return wrapper;
 };
@@ -64,9 +62,9 @@ const setupPlusMenu = async (client: MatrixClient, testSpace: Room): Promise<Ren

    const wrapper = render(<RoomListHeader />);

-    expect(wrapper.container.textContent).toBe("Test Space");
+    expect(wrapper.getByText("Test Space")).toBeInTheDocument();
    act(() => {
-        wrapper.container.querySelector<HTMLElement>('[aria-label="Add"]')?.click();
+        wrapper.getByLabelText("Add")?.click();
    });

    return wrapper;
@@ -81,7 +79,7 @@ const checkMenuLabels = (items: NodeListOf<Element>, labelArray: Array<string>)
    expect(items).toHaveLength(labelArray.length);

    const checkLabel = (item: Element, label: string) => {
-        expect(item.querySelector(".mx_IconizedContextMenu_label")?.textContent).toBe(label);
+        expect(item.querySelector(".mx_IconizedContextMenu_label")).toHaveTextContent(label);
    };

    labelArray.forEach((label, index) => {
@@ -116,13 +114,13 @@ describe("RoomListHeader", () => {

        const { container } = render(<RoomListHeader />);

-        expect(container.textContent).toBe("Home");
+        expect(container).toHaveTextContent("Home");
        fireEvent.click(screen.getByLabelText("Home options"));

        const menu = screen.getByRole("menu");
        const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
        expect(items).toHaveLength(1);
-        expect(items[0].textContent).toBe("Show all rooms");
+        expect(items[0]).toHaveTextContent("Show all rooms");
    });

    it("renders a main menu for spaces", async () => {
@@ -829,7 +829,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
              >
                <label>
                  <div
-                    class="mx_ImageSizePanel_size mx_ImageSizePanel_sizeDefault"
+                    class="mx_ImageSizePanel_size"
                  />
                  <label
                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
@@ -855,7 +855,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                </label>
                <label>
                  <div
-                    class="mx_ImageSizePanel_size mx_ImageSizePanel_sizeLarge"
+                    class="mx_ImageSizePanel_size"
                  />
                  <label
                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled"