Switch to rendering svg icons rather than masking them (#31531)

* Switch to rendering svg icons rather than masking them in left panel

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

* Remove unused stylesheet

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

* Switch to rendering svg icons rather than masking them for ExternalLink

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

* Switch to rendering svg icons rather than masking them for TabbedView

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

* Switch to rendering svg icons rather than masking them for JoinRuleDropdown

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

* Switch to rendering svg icons rather than masking them in ManageRestrictedJoinRuleDialog

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

* Switch to rendering svg icons rather than masking them in LeaveSpaceDialog

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

* Switch to rendering svg icons rather than masking them in ReplyPreview

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

* Switch to rendering svg icons rather than masking them in SearchBox

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

* Switch to rendering svg icons rather than masking them in RoomStatusBar

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

* Fix advanced.svg

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

* Update snapshots

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

* Update screenshots

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

* Iterate

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

* Fix bad merge conflict resolution

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

* Switch to rendering svg icons rather than masking them in Toasts

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

* Switch to rendering svg icons rather than masking them in RoomInfoLine

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

* Switch to rendering svg icons rather than masking them in UploadBar

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

* Remove unused class

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

* Switch to rendering svg icons rather than masking them in ConfirmSpaceUserActionDialog

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

* Switch to rendering svg icons rather than masking them in FeedbackDialog

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

* Switch to rendering svg icons rather than masking them in KeyBackupFailedDialog

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

* Switch to rendering svg icons rather than masking them in CopyableText

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

* Switch to rendering svg icons rather than masking them in EventTile

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

* Switch to rendering svg icons rather than masking them in InviteReason

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

* Delint

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

* Update tests

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

* Add test

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

* Add test

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

---------

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

playwright/e2e/right-panel/right-panel.spec.ts

@@ -207,7 +207,7 @@ test.describe("RightPanel", () => {
 
             // \d represents the number of the space members
             await page
-                .locator(".mx_RoomInfoLine_private")
+                .locator(".mx_RoomInfoLine")
                 .getByRole("button", { name: /\d member/ })
                 .click();
             await expect(page.locator(".mx_MemberListView")).toBeVisible();

res/css/structures/_ToastContainer.pcss

@@ -41,42 +41,10 @@ Please see LICENSE files in the repository root for full details.
         padding: var(--cpd-space-3x);
 
         &.mx_Toast_hasIcon {
-            &::before,
+            svg {
-            &::after {
-                content: "";
                 width: 22px;
                 height: 22px;
                 grid-column: 1;
-                grid-row: 1;
-                mask-size: 100%;
-                mask-position: center;
-                mask-repeat: no-repeat;
-                background-size: 100%;
-                background-repeat: no-repeat;
-            }
-
-            &.mx_Toast_icon_verification::after {
-                mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-                background-color: $primary-content;
-            }
-
-            &.mx_Toast_icon_verification_warning {
-                /* white infill for the hollow svg mask */
-                &::before {
-                    background-color: #ffffff;
-                    mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-                    mask-size: 80%;
-                }
-
-                &::after {
-                    mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
-                    background-color: $e2e-warning-color;
-                }
-            }
-
-            &.mx_Toast_icon_key_storage::after {
-                mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
-                background-color: $primary-content;
             }
 
             .mx_Toast_title,

res/css/structures/_UploadBar.pcss

@@ -7,12 +7,44 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_UploadBar {
-    padding-left: 65px; /* line up with the shield area in the composer */
+    /* line up with the shield area in the composer */
-    padding-top: 5px;
+    padding: 5px 21px 0;
     position: relative;
 
+    display: grid;
+    grid-template:
+        "icon     filename cancel" auto
+        "progress progress progress" auto
+        / min-content auto min-content;
+    gap: var(--cpd-space-1-5x);
+
+    & > svg {
+        grid-area: icon;
+        height: 18px;
+        width: 18px;
+        color: $muted-fg-color;
+        align-self: center;
+    }
+
+    .mx_UploadBar_filename {
+        grid-area: filename;
+        color: $muted-fg-color;
+        position: relative;
+        font-size: $font-15px;
+        vertical-align: middle;
+    }
+
+    .mx_UploadBar_cancel {
+        grid-area: cancel;
+        height: 16px;
+        width: 16px;
+        color: $muted-fg-color;
+        align-self: center;
+    }
+
     .mx_ProgressBar {
-        width: calc(100% - 40px); /* cheating at a right margin */
+        grid-area: progress;
+        width: 100%;
     }
 }
 
@@ -21,39 +53,3 @@ Please see LICENSE files in the repository root for full details.
         padding-left: 0;
     }
 }
-
-.mx_UploadBar_filename {
-    color: $muted-fg-color;
-    position: relative;
-    padding-right: 38px; /* 32px for cancel icon, 6px for padding */
-    padding-left: 22px; /* 18px for icon, 4px for padding */
-    font-size: $font-15px;
-    vertical-align: middle;
-
-    &::before {
-        content: "";
-        height: 18px;
-        width: 18px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        mask-repeat: no-repeat;
-        mask-position: center;
-        background-color: $muted-fg-color;
-        mask-image: url("@vector-im/compound-design-tokens/icons/share.svg");
-    }
-}
-
-.mx_UploadBar_cancel {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 16px;
-    width: 16px;
-    margin-right: 16px; /* align over rightmost button in composer */
-    margin-top: 5px;
-    mask-repeat: no-repeat;
-    mask-position: center;
-    background-color: $muted-fg-color;
-    mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
-}

res/css/structures/_UserMenu.pcss

@@ -119,8 +119,4 @@ Please see LICENSE files in the repository root for full details.
     .mx_IconizedContextMenu_icon svg {
         color: $icon-button-color;
     }
-
-    .mx_UserMenu_iconMessage::before {
-        mask-image: url("$(res)/img/element-icons/feedback.svg");
-    }
 }

res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss

@@ -32,27 +32,20 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_ConfirmSpaceUserActionDialog_warning {
-        position: relative;
         border-radius: 8px;
-        padding: 12px 8px 12px 42px;
+        padding: 12px 8px;
         background-color: $header-panel-bg-color;
 
         font-size: $font-12px;
         line-height: $font-15px;
         color: $secondary-content;
 
-        &::before {
+        svg {
-            content: "";
-            position: absolute;
-            left: 10px;
-            top: calc(50% - 8px); /* vertical centering */
             height: 16px;
             width: 16px;
-            background-color: $secondary-content;
+            vertical-align: -4px;
-            mask-repeat: no-repeat;
+            margin-right: var(--cpd-space-1-5x);
-            mask-size: contain;
+            color: $secondary-content;
-            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
-            mask-position: center;
         }
     }
 }

res/css/views/dialogs/_FeedbackDialog.pcss

@@ -55,33 +55,17 @@ Please see LICENSE files in the repository root for full details.
             text-decoration: underline;
         }
 
-        &::before,
+        & > svg {
-        &::after {
-            content: "";
             position: absolute;
-            width: 40px;
-            height: 40px;
             left: 16px;
             top: 12px;
-        }
+            padding: var(--cpd-space-2x);
-
+            width: 24px;
-        &::before {
+            height: 24px;
             background-color: $icon-button-color;
+            color: $avatar-initial-color;
             border-radius: 8px;
         }
-
-        &::after {
-            background: $avatar-initial-color; /* TODO */
-            mask-position: center;
-            mask-size: 24px;
-            mask-repeat: no-repeat;
-        }
-    }
-
-    .mx_FeedbackDialog_reportBug {
-        &::after {
-            mask-image: url("$(res)/img/feather-customised/bug.svg");
-        }
     }
 
     .mx_FeedbackDialog_rateApp {
@@ -125,9 +109,5 @@ Please see LICENSE files in the repository root for full details.
             font-size: 24px;
             border-color: var(--cpd-color-bg-action-primary-rest);
         }
-
-        &::after {
-            mask-image: url("$(res)/img/element-icons/feedback.svg");
-        }
     }
 }

res/css/views/dialogs/security/_KeyBackupFailedDialog.pcss

@@ -10,20 +10,12 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_KeyBackupFailedDialog_title {
-    position: relative;
-    padding-left: 45px;
     padding-bottom: 10px;
 
-    &::before {
+    svg {
-        mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
+        margin-right: var(--cpd-space-2x);
-        mask-repeat: no-repeat;
+        vertical-align: -2px;
-        background-color: $primary-content;
+        color: $primary-content;
-        content: "";
-        position: absolute;
-        top: -6px;
-        right: 0;
-        bottom: 0;
-        left: 0;
     }
 }
 

res/css/views/elements/_CopyableText.pcss

@@ -39,17 +39,11 @@ Please see LICENSE files in the repository root for full details.
         top: 0.15em;
         background-color: $background;
 
-        &::before {
+        svg {
-            content: "";
-            mask-image: url($copy-button-url);
-            mask-position: center center;
-            mask-repeat: no-repeat;
-            mask-size: contain;
-            background-color: $message-action-bar-fg-color;
             width: 1em;
             height: 1em;
+            color: $message-action-bar-fg-color;
             display: block;
-            background-repeat: no-repeat;
         }
     }
 }

res/css/views/elements/_InviteReason.pcss

@@ -23,14 +23,12 @@ Please see LICENSE files in the repository root for full details.
         cursor: pointer;
         color: $secondary-content;
 
-        &::before {
+        svg {
-            content: "";
+            width: 16px;
-            margin-right: 8px;
+            height: 16px;
-            background-color: $secondary-content;
+            color: $secondary-content;
-            mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg");
             display: inline-block;
-            width: 18px;
+            margin-right: 8px;
-            height: 14px;
         }
     }
 }

res/css/views/rooms/_EventTile.pcss

@@ -918,30 +918,21 @@ $left-gutter: 64px;
             position: absolute;
             top: $spacing-8;
             right: $spacing-8;
-            width: 19px;
+            width: 16px;
-            height: 19px;
+            height: 16px;
             visibility: hidden;
-            background-color: $message-action-bar-fg-color;
 
             &.mx_EventTile_buttonBottom {
                 top: 33px;
             }
 
-            &.mx_EventTile_collapseButton,
+            svg {
-            &.mx_EventTile_expandButton {
+                width: inherit;
-                mask-size: 75%;
+                height: inherit;
+                display: block;
+                color: $message-action-bar-fg-color;
             }
         }
-
-        .mx_EventTile_copyButton {
-            height: 17px;
-            mask-image: url($copy-button-url);
-            mask-position: center center;
-            mask-repeat: no-repeat;
-            mask-size: contain;
-            right: 9px;
-            width: 17px;
-        }
     }
 }
 
@@ -962,20 +953,6 @@ $left-gutter: 64px;
     cursor: pointer;
 }
 
-.mx_EventTile_collapseButton,
-.mx_EventTile_expandButton {
-    mask-position: center;
-    mask-repeat: no-repeat;
-}
-
-.mx_EventTile_collapseButton {
-    mask-image: url("@vector-im/compound-design-tokens/icons/collapse.svg");
-}
-
-.mx_EventTile_expandButton {
-    mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg");
-}
-
 .mx_EventTile_tileError {
     color: red;
     text-align: center;

res/css/views/rooms/_RoomInfoLine.pcss

@@ -10,33 +10,10 @@ Please see LICENSE files in the repository root for full details.
     color: $secondary-content;
     display: inline-block;
 
-    &::before {
+    svg {
-        content: "";
-        display: inline-block;
-        height: 1.2em;
-        mask-position: center;
-        mask-repeat: no-repeat;
-        background-color: $tertiary-content;
-        vertical-align: text-bottom;
         margin-right: 6px;
-    }
+        vertical-align: -2px;
-
+        color: $tertiary-content;
-    &.mx_RoomInfoLine_public::before {
-        width: 12px;
-        mask-size: 12px;
-        mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
-    }
-
-    &.mx_RoomInfoLine_private::before {
-        width: 10px;
-        mask-size: 10px;
-        mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-    }
-
-    &.mx_RoomInfoLine_video::before {
-        width: 16px;
-        mask-size: 16px;
-        mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
     }
 
     .mx_RoomInfoLine_members {

res/img/feather-customised/bug.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C9.23858 2 7 4.23858 7 7L17 7C17 4.23858 14.7614 2 12 2ZM2.29289 7.70711C1.90237 7.31658 1.90237 6.68342 2.29289 6.29289C2.68342 5.90237 3.31658 5.90237 3.70711 6.29289L6.41421 9H17.5858L20.2929 6.29289C20.6834 5.90237 21.3166 5.90237 21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L19 10.4142V13H22C22.5523 13 23 13.4477 23 14C23 14.5523 22.5523 15 22 15H19C19 15.7795 18.8726 16.5292 18.6375 17.2295C18.6614 17.2493 18.6847 17.2705 18.7071 17.2929L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L17.6791 19.0933C16.5924 20.5983 14.9222 21.6542 13 21.9291L13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V21.9291C9.07785 21.6542 7.40759 20.5983 6.32091 19.0933L3.70711 21.7071C3.31658 22.0976 2.68342 22.0976 2.29289 21.7071C1.90237 21.3166 1.90237 20.6834 2.29289 20.2929L5.29289 17.2929C5.31533 17.2705 5.33857 17.2493 5.36252 17.2295C5.1274 16.5292 5 15.7795 5 15H2C1.44772 15 1 14.5523 1 14C1 13.4477 1.44772 13 2 13H5V10.4142L2.29289 7.70711Z" fill="#FF5B55"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C9.23858 2 7 4.23858 7 7L17 7C17 4.23858 14.7614 2 12 2ZM2.29289 7.70711C1.90237 7.31658 1.90237 6.68342 2.29289 6.29289C2.68342 5.90237 3.31658 5.90237 3.70711 6.29289L6.41421 9H17.5858L20.2929 6.29289C20.6834 5.90237 21.3166 5.90237 21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L19 10.4142V13H22C22.5523 13 23 13.4477 23 14C23 14.5523 22.5523 15 22 15H19C19 15.7795 18.8726 16.5292 18.6375 17.2295C18.6614 17.2493 18.6847 17.2705 18.7071 17.2929L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L17.6791 19.0933C16.5924 20.5983 14.9222 21.6542 13 21.9291L13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V21.9291C9.07785 21.6542 7.40759 20.5983 6.32091 19.0933L3.70711 21.7071C3.31658 22.0976 2.68342 22.0976 2.29289 21.7071C1.90237 21.3166 1.90237 20.6834 2.29289 20.2929L5.29289 17.2929C5.31533 17.2705 5.33857 17.2493 5.36252 17.2295C5.1274 16.5292 5 15.7795 5 15H2C1.44772 15 1 14.5523 1 14C1 13.4477 1.44772 13 2 13H5V10.4142L2.29289 7.70711Z" fill="currentColor"/>
 </svg>

res/themes/legacy-light/css/_legacy-light.pcss

@@ -241,8 +241,6 @@ $event-highlight-bg-color: $yellow-background;
 /* event timestamp */
 $event-timestamp-color: #acacac;
 
-$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg";
-
 /* e2e */
 $e2e-verified-color: #0dbd8b;
 $e2e-warning-color: #ff5b55;

res/themes/light/css/_light.pcss

@@ -347,11 +347,6 @@ $focus-brightness: 105%;
 
 /* ******************** */
 
-/* Icon URLs */
-/* ******************** */
-$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg";
-/* ******************** */
-
 /* Location sharing */
 /* ******************** */
 $location-marker-color: var(--cpd-color-icon-on-solid-primary);

src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type JSX, useEffect, useState } from "react";
+import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import dis from "../../../../dispatcher/dispatcher";
 import { _t } from "../../../../languageHandler";
@@ -60,6 +61,7 @@ export default function NewRecoveryMethodDialog({ onFinished }: NewRecoveryMetho
             onFinished={onFinished}
             title={
                 <span className="mx_KeyBackupFailedDialog_title">
+                    <ErrorIcon />
                     {_t("encryption|new_recovery_method_detected|title")}
                 </span>
             }

src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
+import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import dis from "../../../../dispatcher/dispatcher";
 import { _t } from "../../../../languageHandler";
@@ -39,7 +40,10 @@ export default class RecoveryMethodRemovedDialog extends React.PureComponent<IPr
 
     public render(): React.ReactNode {
         const title = (
-            <span className="mx_KeyBackupFailedDialog_title">{_t("encryption|recovery_method_removed|title")}</span>
+            <span className="mx_KeyBackupFailedDialog_title">
+                <ErrorIcon />
+                {_t("encryption|recovery_method_removed|title")}
+            </span>
         );
 
         return (

src/components/structures/MatrixChat.tsx

@@ -29,6 +29,7 @@ import { TooltipProvider } from "@vector-im/compound-web";
 import "what-input";
 import sanitizeHtml from "sanitize-html";
 import { I18nContext } from "@element-hq/web-shared-components";
+import { LockSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import PosthogTrackers from "../../PosthogTrackers";
 import { DecryptionFailureTracker } from "../../DecryptionFailureTracker";
@@ -1771,7 +1772,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 ToastStore.sharedInstance().addOrReplaceToast({
                     key: "verifreq_" + request.transactionId,
                     title: _t("encryption|verification_requested_toast_title"),
-                    icon: "verification",
+                    icon: <LockSolidIcon color="var(--cpd-color-text-primary)" />,
                     props: { request },
                     component: VerificationRequestToast,
                     priority: 90,

src/components/structures/ToastContainer.tsx

@@ -53,8 +53,7 @@ export default class ToastContainer extends React.Component<EmptyObject, IState>
             const { title, icon, key, component, className, bodyClassName, props } = topToast;
             const bodyClasses = classNames("mx_Toast_body", bodyClassName);
             const toastClasses = classNames("mx_Toast_toast", className, {
-                mx_Toast_hasIcon: icon,
+                mx_Toast_hasIcon: !!icon,
-                [`mx_Toast_icon_${icon}`]: icon,
             });
             const toastProps = Object.assign({}, props, {
                 key,
@@ -81,6 +80,7 @@ export default class ToastContainer extends React.Component<EmptyObject, IState>
 
             toast = (
                 <div className={toastClasses}>
+                    {icon}
                     {titleElement}
                     <div className={bodyClasses}>{content}</div>
                 </div>

src/components/structures/UploadBar.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { type Room, type IEventRelation } from "matrix-js-sdk/src/matrix";
+import { CloseIcon, ShareIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import ContentMessages from "../../ContentMessages";
 import dis from "../../dispatcher/dispatcher";
@@ -114,10 +115,13 @@ export default class UploadBar extends React.PureComponent<IProps, IState> {
         const uploadSize = fileSize(this.state.currentTotal!);
         return (
             <div className="mx_UploadBar">
+                <ShareIcon />
                 <div className="mx_UploadBar_filename">
                     {uploadText} ({uploadSize})
                 </div>
-                <AccessibleButton onClick={this.onCancelClick} className="mx_UploadBar_cancel" />
+                <AccessibleButton onClick={this.onCancelClick} className="mx_UploadBar_cancel">
+                    <CloseIcon />
+                </AccessibleButton>
                 <ProgressBar value={this.state.currentLoaded!} max={this.state.currentTotal!} />
             </div>
         );

src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type JSX, type ComponentProps, useMemo, useState } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
+import { InfoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import ConfirmUserActionDialog from "./ConfirmUserActionDialog";
 import SpaceStore from "../../../stores/spaces/SpaceStore";
@@ -47,7 +48,12 @@ const ConfirmSpaceUserActionDialog: React.FC<IProps> = ({
 
     let warning: JSX.Element | undefined;
     if (warningMessage) {
-        warning = <div className="mx_ConfirmSpaceUserActionDialog_warning">{warningMessage}</div>;
+        warning = (
+            <div className="mx_ConfirmSpaceUserActionDialog_warning">
+                <InfoSolidIcon />
+                {warningMessage}
+            </div>
+        );
     }
 
     return (

src/components/views/dialogs/FeedbackDialog.tsx

@@ -6,6 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type JSX, useEffect, useRef, useState } from "react";
+import { ChatSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import QuestionDialog from "./QuestionDialog";
 import { _t } from "../../../languageHandler";
@@ -19,6 +20,7 @@ import { submitFeedback } from "../../../rageshake/submit-rageshake";
 import { useStateToggle } from "../../../hooks/useStateToggle";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import ExternalLink from "../elements/ExternalLink";
+import { Icon as BugIcon } from "../../../../res/img/feather-customised/bug.svg";
 
 interface IProps {
     feature?: string;
@@ -58,6 +60,7 @@ const FeedbackDialog: React.FC<IProps> = (props: IProps) => {
     if (hasFeedback) {
         feedbackSection = (
             <div className="mx_FeedbackDialog_section mx_FeedbackDialog_rateApp">
+                <ChatSolidIcon />
                 <h3>{_t("feedback|comment_label")}</h3>
 
                 <p>{_t("feedback|platform_username")}</p>
@@ -111,7 +114,8 @@ const FeedbackDialog: React.FC<IProps> = (props: IProps) => {
             title={_t("common|feedback")}
             description={
                 <React.Fragment>
-                    <div className="mx_FeedbackDialog_section mx_FeedbackDialog_reportBug">
+                    <div className="mx_FeedbackDialog_section">
+                        <BugIcon />
                         <h3>{_t("common|report_a_bug")}</h3>
                         <p>
                             {_t(

src/components/views/elements/CopyableText.tsx

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { useState } from "react";
 import classNames from "classnames";
+import { CopyIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import { copyPlaintext } from "../../../utils/strings";
@@ -21,7 +22,11 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 
-export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className">> = ({ getTextToCopy, className }) => {
+export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className" | "children">> = ({
+    getTextToCopy,
+    className,
+    children,
+}) => {
     const [tooltip, setTooltip] = useState<string | undefined>(undefined);
 
     const onCopyClickInternal = async (e: ButtonEvent): Promise<void> => {
@@ -45,7 +50,9 @@ export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className"
             onTooltipOpenChange={(open) => {
                 if (!open) onHideTooltip();
             }}
-        />
+        >
+            {children}
+        </AccessibleButton>
     );
 };
 
@@ -57,7 +64,9 @@ const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true
     return (
         <div className={combinedClassName} {...props}>
             {children}
-            <CopyTextButton getTextToCopy={getTextToCopy} className="mx_CopyableText_copyButton" />
+            <CopyTextButton getTextToCopy={getTextToCopy} className="mx_CopyableText_copyButton">
+                <CopyIcon />
+            </CopyTextButton>
         </div>
     );
 };

src/components/views/elements/InviteReason.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import classNames from "classnames";
 import React from "react";
+import { VisibilityOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { sanitizedHtmlNode } from "../../../HtmlUtils";
 import { _t } from "../../../languageHandler";
@@ -50,6 +51,7 @@ export default class InviteReason extends React.PureComponent<IProps, IState> {
                     {this.props.htmlReason ? sanitizedHtmlNode(this.props.htmlReason) : this.props.reason}
                 </div>
                 <AccessibleButton kind="link_inline" className="mx_InviteReason_view" onClick={this.onViewClick}>
+                    <VisibilityOnIcon />
                     {_t("common|view_message")}
                 </AccessibleButton>
             </div>

src/components/views/messages/CodeBlock.tsx

@@ -9,6 +9,7 @@ import React, { type JSX, useState } from "react";
 import classNames from "classnames";
 import { type DOMNode, Element as ParserElement, domToReact } from "html-react-parser";
 import { textContent, getInnerHTML } from "domutils";
+import { CollapseIcon, CopyIcon, ExpandIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { useSettingValue } from "../../../hooks/useSettings.ts";
 import { CopyTextButton } from "../elements/CopyableText.tsx";
@@ -25,13 +26,9 @@ const ExpandCollapseButton: React.FC<{
     onClick(): void;
 }> = ({ expanded, onClick }) => {
     return (
-        <span
+        <span className="mx_EventTile_button" onClick={onClick}>
-            className={classNames("mx_EventTile_button", {
+            {expanded ? <CollapseIcon /> : <ExpandIcon />}
-                mx_EventTile_expandButton: !expanded,
+        </span>
-                mx_EventTile_collapseButton: expanded,
-            })}
-            onClick={onClick}
-        />
     );
 };
 
@@ -138,7 +135,9 @@ const CodeBlock: React.FC<Props> = ({ preNode }) => {
                 className={classNames("mx_EventTile_button mx_EventTile_copyButton", {
                     mx_EventTile_buttonBottom: !!expandCollapseButton,
                 })}
-            />
+            >
+                <CopyIcon />
+            </CopyTextButton>
         </div>
     );
 };

src/components/views/rooms/RoomInfoLine.tsx

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, type FC } from "react";
 import { type Room, JoinRule, type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { LockSolidIcon, VideoCallSolidIcon, PublicIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
@@ -39,16 +40,16 @@ const RoomInfoLine: FC<IProps> = ({ room }) => {
 
     const isVideoRoom = calcIsVideoRoom(room);
 
-    let iconClass: string;
+    let icon: JSX.Element;
     let roomType: string;
     if (isVideoRoom) {
-        iconClass = "mx_RoomInfoLine_video";
+        icon = <VideoCallSolidIcon />;
         roomType = _t("common|video_room");
     } else if (joinRule === JoinRule.Public) {
-        iconClass = "mx_RoomInfoLine_public";
+        icon = <PublicIcon />;
         roomType = room.isSpaceRoom() ? _t("common|public_space") : _t("common|public_room");
     } else {
-        iconClass = "mx_RoomInfoLine_private";
+        icon = <LockSolidIcon />;
         roomType = room.isSpaceRoom() ? _t("common|private_space") : _t("common|private_room");
     }
 
@@ -75,7 +76,8 @@ const RoomInfoLine: FC<IProps> = ({ room }) => {
     }
 
     return (
-        <div className={`mx_RoomInfoLine ${iconClass}`}>
+        <div className="mx_RoomInfoLine">
+            {icon}
             {roomType}
             {members}
         </div>

src/stores/ToastStore.ts

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import EventEmitter from "events";
 import { logger } from "matrix-js-sdk/src/logger";
+import { type JSX } from "react";
 
 import type React from "react";
 import { type ComponentClass } from "../@types/common";
@@ -17,7 +18,7 @@ export interface IToast<C extends ComponentClass> {
     // higher priority number will be shown on top of lower priority
     priority: number;
     title?: string;
-    icon?: "verification" | "verification_warning" | "key_storage";
+    icon?: JSX.Element;
     component: C;
     className?: string;
     bodyClassName?: string;

src/toasts/BulkUnverifiedSessionsToast.tsx

@@ -6,6 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
+import React from "react";
+import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
 import { _t } from "../languageHandler";
 import dis from "../dispatcher/dispatcher";
 import DeviceListener from "../DeviceListener";
@@ -33,7 +36,7 @@ export const showToast = (deviceIds: Set<string>): void => {
     ToastStore.sharedInstance().addOrReplaceToast({
         key: TOAST_KEY,
         title: _t("encryption|verification|unverified_sessions_toast_title"),
-        icon: "verification_warning",
+        icon: <ErrorSolidIcon color="var(--cpd-color-icon-critical-primary)" />,
         props: {
             description: _t("encryption|verification|unverified_sessions_toast_description"),
             primaryLabel: _t("action|review"),

src/toasts/SetupEncryptionToast.tsx

@@ -7,11 +7,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key";
+import React from "react";
+import { KeyIcon, ErrorSolidIcon, SettingsSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { type ComponentType } from "react";
 import { type Interaction as InteractionEvent } from "@matrix-org/analytics-events/types/typescript/Interaction";
 
-import type React from "react";
 import Modal from "../Modal";
 import { _t } from "../languageHandler";
 import DeviceListener from "../DeviceListener";
@@ -52,9 +52,9 @@ const getIcon = (kind: Kind): IToast<any>["icon"] => {
             return undefined;
         case Kind.VERIFY_THIS_SESSION:
         case Kind.KEY_STORAGE_OUT_OF_SYNC:
-            return "verification_warning";
+            return <ErrorSolidIcon color="var(--cpd-color-icon-critical-primary)" />;
         case Kind.TURN_ON_KEY_STORAGE:
-            return "key_storage";
+            return <SettingsSolidIcon color="var(--cpd-color-text-primary)" />;
     }
 };
 

src/toasts/UnverifiedSessionToast.tsx

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
+import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../languageHandler";
 import dis from "../dispatcher/dispatcher";
@@ -47,7 +48,7 @@ export const showToast = async (deviceId: string): Promise<void> => {
     ToastStore.sharedInstance().addOrReplaceToast({
         key: toastKey(deviceId),
         title: _t("encryption|verification|unverified_session_toast_title"),
-        icon: "verification_warning",
+        icon: <ErrorSolidIcon color="var(--cpd-color-icon-critical-primary)" />,
         props: {
             description: device.display_name,
             detail: <DeviceMetaData device={extendedDevice} />,

test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap

@@ -24,6 +24,17 @@ exports[`<NewRecoveryMethodDialog /> when key backup is disabled 1`] = `
         <span
           class="mx_KeyBackupFailedDialog_title"
         >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
+            />
+          </svg>
           New Recovery Method
         </span>
       </h1>
@@ -96,6 +107,17 @@ exports[`<NewRecoveryMethodDialog /> when key backup is enabled 1`] = `
         <span
           class="mx_KeyBackupFailedDialog_title"
         >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
+            />
+          </svg>
           New Recovery Method
         </span>
       </h1>

test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap

@@ -62,7 +62,22 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
               class="mx_AccessibleButton mx_CopyableText_copyButton"
               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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </div>
         </div>
       </div>

test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap

@@ -102,7 +102,22 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
                   class="mx_AccessibleButton mx_CopyableText_copyButton"
                   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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </div>
             </div>
           </div>

test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap

@@ -33,7 +33,22 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
       class="mx_AccessibleButton mx_CopyableText_copyButton"
       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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+        />
+        <path
+          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+        />
+      </svg>
+    </div>
   </div>
 </DocumentFragment>
 `;

test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap

@@ -39,7 +39,22 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         class="mx_AccessibleButton mx_CopyableText_copyButton"
         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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+          />
+          <path
+            d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+          />
+        </svg>
+      </div>
     </div>
     <div
       class="mx_DevTools_label_bottom"

test/unit-tests/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap

@@ -30,8 +30,9 @@ exports[`FeedbackDialog should respect feedback config 1`] = `
       id="mx_Dialog_content"
     >
       <div
-        class="mx_FeedbackDialog_section mx_FeedbackDialog_reportBug"
+        class="mx_FeedbackDialog_section"
       >
+        <div />
         <h3>
           Report a bug
         </h3>

test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap

@@ -16,7 +16,22 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+              />
+              <path
+                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+              />
+            </svg>
+          </div>
         </div>
       </li>
       <li>
@@ -29,7 +44,22 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+              />
+              <path
+                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+              />
+            </svg>
+          </div>
         </div>
       </li>
       <li>
@@ -74,7 +104,22 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                  />
+                  <path
+                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                  />
+                </svg>
+              </div>
             </div>
           </li>
           <li>
@@ -87,7 +132,22 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                  />
+                  <path
+                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                  />
+                </svg>
+              </div>
             </div>
           </li>
         </ul>
@@ -120,7 +180,22 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+              />
+              <path
+                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+              />
+            </svg>
+          </div>
         </div>
       </li>
       <li>
@@ -133,7 +208,22 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+              />
+              <path
+                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+              />
+            </svg>
+          </div>
         </div>
       </li>
       <li>
@@ -178,7 +268,22 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                  />
+                  <path
+                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                  />
+                </svg>
+              </div>
             </div>
           </li>
           <li>
@@ -191,7 +296,22 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                  />
+                  <path
+                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                  />
+                </svg>
+              </div>
             </div>
           </li>
         </ul>
@@ -224,7 +344,22 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+              />
+              <path
+                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+              />
+            </svg>
+          </div>
         </div>
       </li>
       <li>
@@ -237,7 +372,22 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+              />
+              <path
+                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+              />
+            </svg>
+          </div>
         </div>
       </li>
       <li>
@@ -284,7 +434,22 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                  />
+                  <path
+                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                  />
+                </svg>
+              </div>
             </div>
           </li>
           <li>
@@ -297,7 +462,22 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                  />
+                  <path
+                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                  />
+                </svg>
+              </div>
             </div>
           </li>
         </ul>
@@ -330,7 +510,22 @@ exports[`<Users /> should render a single user 1`] = `
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+              />
+              <path
+                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+              />
+            </svg>
+          </div>
         </div>
       </li>
       <li>

test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap

@@ -64,7 +64,22 @@ exports[`<TextualBody /> renders formatted m.text correctly linkification is not
       class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
       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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+        />
+        <path
+          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+        />
+      </svg>
+    </div>
   </div>
   
 
@@ -268,7 +283,22 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
       class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
       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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+        />
+        <path
+          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+        />
+      </svg>
+    </div>
   </div>
   
 
@@ -438,14 +468,41 @@ num_sqrt = num **
       </div>
     </pre>
     <span
-      class="mx_EventTile_button mx_EventTile_expandButton"
+      class="mx_EventTile_button"
-    />
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M21 3.997a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 20 3h-8a1 1 0 1 0 0 2h5.586L5 17.586V12a1 1 0 1 0-2 0v8.003a1 1 0 0 0 .29.702l.005.004c.18.18.43.291.705.291h8a1 1 0 1 0 0-2H6.414L19 6.414V12a1 1 0 1 0 2 0z"
+        />
+      </svg>
+    </span>
     <div
       aria-label="Copy"
       class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton mx_EventTile_buttonBottom"
       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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+        />
+        <path
+          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+        />
+      </svg>
+    </div>
   </div>
   
 

test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -108,7 +108,22 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                  />
+                  <path
+                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                  />
+                </svg>
+              </div>
             </div>
           </p>
         </div>
@@ -395,7 +410,22 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
                 class="mx_AccessibleButton mx_CopyableText_copyButton"
                 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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                  />
+                  <path
+                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                  />
+                </svg>
+              </div>
             </div>
           </p>
         </div>

test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap

@@ -57,7 +57,22 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
             class="mx_AccessibleButton mx_CopyableText_copyButton"
             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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+              />
+              <path
+                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+              />
+            </svg>
+          </div>
         </div>
       </p>
     </div>

test/unit-tests/components/views/rooms/RoomInfoLine-test.tsx

@@ -0,0 +1,36 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { render } from "jest-matrix-react";
+import React from "react";
+import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import RoomInfoLine from "../../../../../src/components/views/rooms/RoomInfoLine.tsx";
+import { stubClient } from "../../../../test-utils";
+
+describe("RoomInfoLine", () => {
+    it("renders for public room", () => {
+        const cli = stubClient();
+        const room = new Room("!roomId", cli, cli.getUserId()!);
+        room.currentState.setStateEvents([
+            new MatrixEvent({
+                sender: cli.getUserId()!,
+                room_id: room.roomId,
+                state_key: "",
+                event_id: "$eventId",
+                type: "m.room.join_rules",
+                content: {
+                    join_rule: "public",
+                },
+            }),
+        ]);
+
+        const { asFragment, getByText } = render(<RoomInfoLine room={room} />);
+        expect(getByText("Public room")).toBeVisible();
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

test/unit-tests/components/views/rooms/__snapshots__/RoomInfoLine-test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`RoomInfoLine renders for public room 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_RoomInfoLine"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m-1-2.05V18q-.825 0-1.412-.587A1.93 1.93 0 0 1 9 16v-1l-4.8-4.8q-.075.45-.138.9Q4 11.55 4 12q0 3.025 1.987 5.3T11 19.95m6.9-2.55q.5-.55.9-1.187.4-.638.662-1.326.263-.687.4-1.412Q20 12.75 20 12a7.85 7.85 0 0 0-1.363-4.475A7.7 7.7 0 0 0 15 4.6V5q0 .824-.588 1.412A1.93 1.93 0 0 1 13 7h-2v2q0 .424-.287.713A.97.97 0 0 1 10 10H8v2h6q.424 0 .713.287.287.288.287.713v3h1q.65 0 1.175.387.525.388.725 1.013"
+      />
+    </svg>
+    Public room
+  </div>
+</DocumentFragment>
+`;

test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap

@@ -47,7 +47,22 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
                     class="mx_AccessibleButton mx_CopyableText_copyButton"
                     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="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                      />
+                      <path
+                        d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                      />
+                    </svg>
+                  </div>
                 </div>
               </div>
             </div>

test/unit-tests/toasts/SetupEncryptionToast-test.tsx

@@ -55,6 +55,14 @@ describe("SetupEncryptionToast", () => {
         });
     });
 
+    describe("Verify this session", () => {
+        it("should render the toast", async () => {
+            act(() => showToast(Kind.VERIFY_THIS_SESSION));
+
+            expect(await screen.findByRole("heading", { name: "Verify this session" })).toBeInTheDocument();
+        });
+    });
+
     describe("Key storage out of sync", () => {
         let client: Mocked<MatrixClient>;
 

test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap

@@ -8,8 +8,20 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
       role="alert"
     >
       <div
-        class="mx_Toast_toast mx_Toast_hasIcon mx_Toast_icon_verification_warning"
+        class="mx_Toast_toast mx_Toast_hasIcon"
       >
+        <svg
+          color="var(--cpd-color-icon-critical-primary)"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
         <div
           class="mx_Toast_title"
         >