Fix e2e icon rendering (#31454)

* Fix e2e icon rendering Regressed by change to compound icons, due to it relying on a hack of rendering icons atop each other to draw a background. Also fixes a nested tooltip which became annoying during testing Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-09 11:43:02 +00:00
parent 63f269e52c
commit 5324834b47
11 changed files with 306 additions and 255 deletions
--- a/playwright/snapshots/crypto/crypto.spec.ts/composer-e2e-icon-linux.png
+++ b/playwright/snapshots/crypto/crypto.spec.ts/composer-e2e-icon-linux.png
--- a/res/css/views/rooms/_E2EIcon.pcss
+++ b/res/css/views/rooms/_E2EIcon.pcss
@@ -9,54 +9,25 @@ Please see LICENSE files in the repository root for full details.
    width: 16px;
    height: 16px;
    margin: 0 9px;
-    position: relative;
    display: block;
+
+    svg {
+        width: inherit;
+        height: inherit;
+        display: block;
+    }
 }

 .mx_E2EIcon.mx_E2EIcon_inline {
    display: inline-block;
 }

-.mx_E2EIcon_warning,
-.mx_E2EIcon_normal,
-.mx_E2EIcon_verified {
-    &::before,
-    &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        inset: 0;
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: contain;
-    }
+.mx_E2EIcon_warning {
+    color: $e2e-warning-color;
 }

-/* transparent-looking border surrounding the shield for when overlain over avatars */
-.mx_E2EIcon_bordered {
-    mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-    background-color: $header-panel-bg-color;
-    mask-size: 100%;
-
-    /* shrink the actual badge */
-    &::after {
-        mask-size: 75%;
-    }
-    /* shrink the infill of the badge */
-    &::before {
-        mask-size: 60%;
-        background: var(--cpd-color-bg-canvas-default);
-    }
-}
-
-.mx_E2EIcon_warning::after {
-    mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
-    background-color: $e2e-warning-color;
-}
-
-.mx_E2EIcon_normal::after {
-    mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
-    background-color: var(--cpd-color-icon-tertiary);
+.mx_E2EIcon_normal {
+    color: var(--cpd-color-icon-tertiary);
 }

 .mx_E2EIcon_verified,
@@ -66,7 +37,6 @@ Please see LICENSE files in the repository root for full details.
    }
 }

-.mx_E2EIcon_verified::after {
-    mask-image: url("@vector-im/compound-design-tokens/icons/shield.svg");
-    background-color: $e2e-verified-color;
+.mx_E2EIcon_verified {
+    color: $e2e-verified-color;
 }
--- a/res/css/views/rooms/_MessageComposer.pcss
+++ b/res/css/views/rooms/_MessageComposer.pcss
@@ -38,11 +38,6 @@ Please see LICENSE files in the repository root for full details.
    font-weight: bold;
 }

-.mx_MessageComposer_autocomplete_wrapper {
-    position: relative;
-    height: 0;
-}
-
 .mx_MessageComposer_row {
    display: flex;
    flex-direction: row;
@@ -67,19 +62,20 @@ Please see LICENSE files in the repository root for full details.
    }
 }

-.mx_MessageComposer_composecontrols {
-    width: 100%;
-}
 .mx_MessageComposer_e2eIconWrapper {
    height: 12px; /* Match the height of the E2E icon for alignment */
-}
-.mx_MessageComposer_e2eIcon.mx_E2EIcon {
+    width: 12px;
    position: absolute;
    left: 20px;
+    top: 22px;
    margin-right: 0; /* Counteract the E2EIcon class */
    margin-left: 3px; /* Counteract the E2EIcon class */
-    width: 12px;
-    height: 12px;
+
+    .mx_MessageComposer_e2eIcon {
+        margin: 0;
+        width: inherit;
+        height: inherit;
+    }
 }

 .mx_MessageComposer_noperm_error {
@@ -92,13 +88,6 @@ Please see LICENSE files in the repository root for full details.
    justify-content: center;
 }

-.mx_MessageComposer_input_wrapper {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    cursor: text;
-}
-
 .mx_MessageComposer_input {
    flex: 1;
    vertical-align: middle;
@@ -145,38 +134,6 @@ Please see LICENSE files in the repository root for full details.
    }
 }

-.mx_MessageComposer_editor {
-    width: 100%;
-    max-height: 120px;
-    min-height: 19px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    word-break: break-word;
-
-    /* FIXME: rather unpleasant hack to get rid of <p/> margins. */
-    /* really we should be mixing in markdown-body from github-markdown-css instead */
-    > :first-child {
-        margin-top: 0 !important;
-    }
-
-    > :last-child {
-        margin-bottom: 0 !important;
-    }
-}
-
-@keyframes visualbell {
-    from {
-        background-color: $visual-bell-bg-color;
-    }
-    to {
-        background-color: $background;
-    }
-}
-
-.mx_MessageComposer_input_error {
-    animation: 0.2s visualbell;
-}
-
 .mx_MessageComposer_button_highlight {
    @mixin composerButtonHighLight;
 }
@@ -198,10 +155,6 @@ Please see LICENSE files in the repository root for full details.
            z-index: 2;
        }
    }
-
-    &.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
-        background-color: $alert;
-    }
 }
 .mx_MessageComposer_wysiwyg {
    .mx_MessageComposer_wrapper {
@@ -237,10 +190,6 @@ Please see LICENSE files in the repository root for full details.
                z-index: 2;
            }
        }
-
-        &.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
-            background-color: $alert;
-        }
    }
 }

@@ -322,6 +271,10 @@ Please see LICENSE files in the repository root for full details.
        padding: 0 0 0 25px;
    }

+    .mx_MessageComposer_e2eIconWrapper {
+        left: 0;
+    }
+
    &:not(.mx_MessageComposer_e2eStatus) {
        .mx_MessageComposer_wrapper {
            padding: 0;
--- a/src/components/views/rooms/E2EIcon.tsx
+++ b/src/components/views/rooms/E2EIcon.tsx
@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, type ComponentProps, type CSSProperties } from "react";
 import classNames from "classnames";
 import { Tooltip } from "@vector-im/compound-web";
+import { ErrorSolidIcon, ShieldIcon, LockSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t, _td, type TranslationKey } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -32,31 +33,20 @@ interface Props {
    onClick?: () => void;
    hideTooltip?: boolean;
    tooltipPlacement?: ComponentProps<typeof Tooltip>["placement"];
-    bordered?: boolean;
    status: E2EStatus;
    isUser?: boolean;
 }

-const E2EIcon: React.FC<Props> = ({
-    isUser,
-    status,
-    className,
-    size,
-    onClick,
-    hideTooltip,
-    tooltipPlacement,
-    bordered,
-}) => {
-    const classes = classNames(
-        {
-            mx_E2EIcon: true,
-            mx_E2EIcon_bordered: bordered,
-            mx_E2EIcon_warning: status === E2EStatus.Warning,
-            mx_E2EIcon_normal: status === E2EStatus.Normal,
-            mx_E2EIcon_verified: status === E2EStatus.Verified,
-        },
-        className,
-    );
+const icons: Record<E2EStatus, JSX.Element> = {
+    [E2EStatus.Warning]: <ErrorSolidIcon className="mx_E2EIcon_warning" />,
+    [E2EStatus.Normal]: <LockSolidIcon className="mx_E2EIcon_normal" />,
+    [E2EStatus.Verified]: <ShieldIcon className="mx_E2EIcon_verified" />,
+};
+
+const E2EIcon: React.FC<Props> = ({ isUser, status, className, size, onClick, hideTooltip, tooltipPlacement }) => {
+    const icon = icons[status];
+
+    const classes = classNames("mx_E2EIcon", className);

    let e2eTitle: TranslationKey | undefined;
    if (isUser) {
@@ -74,19 +64,17 @@ const E2EIcon: React.FC<Props> = ({

    let content: JSX.Element;
    if (onClick) {
-        content = <AccessibleButton onClick={onClick} className={classes} style={style} data-testid="e2e-icon" />;
+        content = (
+            <AccessibleButton onClick={onClick} className={classes} style={style} data-testid="e2e-icon">
+                {icon}
+            </AccessibleButton>
+        );
    } else {
-        // Verified and warning icon have a transparent cutout, so add a white background.
-        // The normal icon already has the correct shape and size, so reuse that.
-        if (status === E2EStatus.Verified || status === E2EStatus.Warning) {
-            content = (
-                <div className={classes} style={style} data-testid="e2e-icon">
-                    <div className="mx_E2EIcon_normal" />
-                </div>
-            );
-        } else {
-            content = <div className={classes} style={style} data-testid="e2e-icon" />;
-        }
+        content = (
+            <div className={classes} style={style} data-testid="e2e-icon">
+                {icon}
+            </div>
+        );
    }

    if (!e2eTitle || hideTooltip) {
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -533,8 +533,8 @@ export class MessageComposer extends React.Component<IProps, IState> {
                        <Tooltip label={_t("composer|room_unencrypted")}>
                            <LockOffIcon
                                aria-label={_t("composer|room_unencrypted")}
-                                width={12}
-                                height={12}
+                                width="12px"
+                                height="12px"
                                color="var(--cpd-color-icon-info-primary)"
                                className="mx_E2EIcon mx_MessageComposer_e2eIcon"
                            />
@@ -544,7 +544,12 @@ export class MessageComposer extends React.Component<IProps, IState> {
            } else if (this.props.e2eStatus !== E2EStatus.Normal) {
                leftIcon = (
                    <div className="mx_MessageComposer_e2eIconWrapper">
-                        <E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" />
+                        <E2EIcon
+                            key="e2eIcon"
+                            status={this.props.e2eStatus}
+                            className="mx_MessageComposer_e2eIcon"
+                            size={12}
+                        />
                    </div>
                );
            }
@@ -587,14 +592,20 @@ export class MessageComposer extends React.Component<IProps, IState> {
                );
            }

+            const isTooltipOpen = Boolean(this.state.recordingTimeLeftSeconds);
+            const secondsLeft = this.state.recordingTimeLeftSeconds
+                ? Math.round(this.state.recordingTimeLeftSeconds)
+                : 0;
            controls.push(
-                <VoiceRecordComposerTile
-                    key="controls_voice_record"
-                    ref={this.voiceRecordingButton}
-                    room={this.props.room}
-                    relation={this.props.relation}
-                    replyToEvent={this.props.replyToEvent}
-                />,
+                <Tooltip open={isTooltipOpen} description={formatTimeLeft(secondsLeft)} placement="bottom">
+                    <VoiceRecordComposerTile
+                        key="controls_voice_record"
+                        ref={this.voiceRecordingButton}
+                        room={this.props.room}
+                        relation={this.props.relation}
+                        replyToEvent={this.props.replyToEvent}
+                    />
+                </Tooltip>,
            );
        } else if (this.context.tombstone) {
            const replacementRoomId = this.context.tombstone.getContent()["replacement_room"];
@@ -636,9 +647,6 @@ export class MessageComposer extends React.Component<IProps, IState> {
            );
        }

-        const isTooltipOpen = Boolean(this.state.recordingTimeLeftSeconds);
-        const secondsLeft = this.state.recordingTimeLeftSeconds ? Math.round(this.state.recordingTimeLeftSeconds) : 0;
-
        const threadId =
            this.props.relation?.rel_type === THREAD_RELATION_TYPE.name ? this.props.relation.event_id : null;

@@ -663,55 +671,51 @@ export class MessageComposer extends React.Component<IProps, IState> {
        });

        return (
-            <Tooltip open={isTooltipOpen} description={formatTimeLeft(secondsLeft)} placement="bottom">
-                <div className={classes} ref={this.ref} role="region" aria-label={_t("a11y|message_composer")}>
-                    <div className="mx_MessageComposer_wrapper">
-                        <UserIdentityWarning room={this.props.room} key={this.props.room.roomId} />
-                        <ReplyPreview
-                            replyToEvent={this.props.replyToEvent}
-                            permalinkCreator={this.props.permalinkCreator}
-                        />
-                        <div className="mx_MessageComposer_row">
-                            {leftIcon}
-                            {composer}
-                            <div className="mx_MessageComposer_actions">
-                                {controls}
-                                {canSendMessages && (
-                                    <MessageComposerButtons
-                                        addEmoji={this.addEmoji}
-                                        haveRecording={this.state.haveRecording}
-                                        isMenuOpen={this.state.isMenuOpen}
-                                        isStickerPickerOpen={this.state.isStickerPickerOpen}
-                                        menuPosition={menuPosition}
-                                        relation={this.props.relation}
-                                        onRecordStartEndClick={this.onRecordStartEndClick}
-                                        setStickerPickerOpen={this.setStickerPickerOpen}
-                                        showLocationButton={
-                                            !window.electron && SettingsStore.getValue(UIFeature.LocationSharing)
-                                        }
-                                        showPollsButton={this.state.showPollsButton}
-                                        showStickersButton={this.showStickersButton}
-                                        isRichTextEnabled={this.state.isRichTextEnabled}
-                                        onComposerModeClick={this.onRichTextToggle}
-                                        toggleButtonMenu={this.toggleButtonMenu}
-                                    />
-                                )}
-                                {showSendButton && (
-                                    <SendButton
-                                        key="controls_send"
-                                        onClick={this.sendMessage}
-                                        title={
-                                            this.state.haveRecording
-                                                ? _t("composer|send_button_voice_message")
-                                                : undefined
-                                        }
-                                    />
-                                )}
-                            </div>
+            <div className={classes} ref={this.ref} role="region" aria-label={_t("a11y|message_composer")}>
+                <div className="mx_MessageComposer_wrapper">
+                    <UserIdentityWarning room={this.props.room} key={this.props.room.roomId} />
+                    <ReplyPreview
+                        replyToEvent={this.props.replyToEvent}
+                        permalinkCreator={this.props.permalinkCreator}
+                    />
+                    <div className="mx_MessageComposer_row">
+                        {leftIcon}
+                        {composer}
+                        <div className="mx_MessageComposer_actions">
+                            {controls}
+                            {canSendMessages && (
+                                <MessageComposerButtons
+                                    addEmoji={this.addEmoji}
+                                    haveRecording={this.state.haveRecording}
+                                    isMenuOpen={this.state.isMenuOpen}
+                                    isStickerPickerOpen={this.state.isStickerPickerOpen}
+                                    menuPosition={menuPosition}
+                                    relation={this.props.relation}
+                                    onRecordStartEndClick={this.onRecordStartEndClick}
+                                    setStickerPickerOpen={this.setStickerPickerOpen}
+                                    showLocationButton={
+                                        !window.electron && SettingsStore.getValue(UIFeature.LocationSharing)
+                                    }
+                                    showPollsButton={this.state.showPollsButton}
+                                    showStickersButton={this.showStickersButton}
+                                    isRichTextEnabled={this.state.isRichTextEnabled}
+                                    onComposerModeClick={this.onRichTextToggle}
+                                    toggleButtonMenu={this.toggleButtonMenu}
+                                />
+                            )}
+                            {showSendButton && (
+                                <SendButton
+                                    key="controls_send"
+                                    onClick={this.sendMessage}
+                                    title={
+                                        this.state.haveRecording ? _t("composer|send_button_voice_message") : undefined
+                                    }
+                                />
+                            )}
                        </div>
                    </div>
                </div>
-            </Tooltip>
+            </div>
        );
    }
 }
--- a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
@@ -68,7 +68,7 @@ export default function SendWysiwygComposer({
            />
        );
    } else if (e2eStatus !== E2EStatus.Normal) {
-        leftIcon = <E2EIcon status={e2eStatus} />;
+        leftIcon = <E2EIcon status={e2eStatus} size={12} />;
    }
    return (
        <ComposerContext.Provider value={defaultContextValue}>
--- a/test/unit-tests/components/structures/snapshots/RoomView-test.tsx.snap
+++ b/test/unit-tests/components/structures/snapshots/RoomView-test.tsx.snap
@@ -363,13 +363,13 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
            >
              <svg
                aria-label="Messages in this room are not end-to-end encrypted"
-                aria-labelledby="_r_o5_"
+                aria-labelledby="_r_o1_"
                class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                color="var(--cpd-color-icon-info-primary)"
                fill="currentColor"
-                height="12"
+                height="12px"
                viewBox="0 0 24 24"
-                width="12"
+                width="12px"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
@@ -1238,13 +1238,13 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
              >
                <svg
                  aria-label="Messages in this room are not end-to-end encrypted"
-                  aria-labelledby="_r_14_"
+                  aria-labelledby="_r_10_"
                  class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                  color="var(--cpd-color-icon-info-primary)"
                  fill="currentColor"
-                  height="12"
+                  height="12px"
                  viewBox="0 0 24 24"
-                  width="12"
+                  width="12px"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
@@ -1674,13 +1674,13 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
              >
                <svg
                  aria-label="Messages in this room are not end-to-end encrypted"
-                  aria-labelledby="_r_6e_"
+                  aria-labelledby="_r_6a_"
                  class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                  color="var(--cpd-color-icon-info-primary)"
                  fill="currentColor"
-                  height="12"
+                  height="12px"
                  viewBox="0 0 24 24"
-                  width="12"
+                  width="12px"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
@@ -2110,13 +2110,13 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
              >
                <svg
                  aria-label="Messages in this room are not end-to-end encrypted"
-                  aria-labelledby="_r_3h_"
+                  aria-labelledby="_r_3d_"
                  class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                  color="var(--cpd-color-icon-info-primary)"
                  fill="currentColor"
-                  height="12"
+                  height="12px"
                  viewBox="0 0 24 24"
-                  width="12"
+                  width="12px"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
@@ -2762,13 +2762,25 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                  tabindex="0"
                >
                  <div
-                    aria-labelledby="_r_g8_"
-                    class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
+                    aria-labelledby="_r_g4_"
+                    class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                    data-testid="e2e-icon"
+                    style="width: 12px; height: 12px;"
                  >
-                    <div
-                      class="mx_E2EIcon_normal"
-                    />
+                    <svg
+                      class="mx_E2EIcon_verified"
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        clip-rule="evenodd"
+                        d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
                  </div>
                </span>
              </div>
@@ -3264,13 +3276,13 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                  >
                    <svg
                      aria-label="Messages in this room are not end-to-end encrypted"
-                      aria-labelledby="_r_l8_"
+                      aria-labelledby="_r_l4_"
                      class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                      color="var(--cpd-color-icon-info-primary)"
                      fill="currentColor"
-                      height="12"
+                      height="12px"
                      viewBox="0 0 24 24"
-                      width="12"
+                      width="12px"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
--- a/test/unit-tests/components/views/dialogs/snapshots/UntrustedDeviceDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/snapshots/UntrustedDeviceDialog-test.tsx.snap
@@ -22,13 +22,22 @@ exports[`<UntrustedDeviceDialog /> should display the dialog for the device of a
        id="mx_BaseDialog_title"
      >
        <div
-          class="mx_E2EIcon mx_E2EIcon_warning"
+          class="mx_E2EIcon"
          data-testid="e2e-icon"
          style="width: 24px; height: 24px;"
        >
-          <div
-            class="mx_E2EIcon_normal"
-          />
+          <svg
+            class="mx_E2EIcon_warning"
+            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>
        Not Trusted
      </h1>
@@ -102,13 +111,22 @@ exports[`<UntrustedDeviceDialog /> should display the dialog for the device of t
        id="mx_BaseDialog_title"
      >
        <div
-          class="mx_E2EIcon mx_E2EIcon_warning"
+          class="mx_E2EIcon"
          data-testid="e2e-icon"
          style="width: 24px; height: 24px;"
        >
-          <div
-            class="mx_E2EIcon_normal"
-          />
+          <svg
+            class="mx_E2EIcon_warning"
+            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>
        Not Trusted
      </h1>
--- a/test/unit-tests/components/views/dialogs/snapshots/VerificationRequestDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/snapshots/VerificationRequestDialog-test.tsx.snap
@@ -32,13 +32,24 @@ exports[`VerificationRequestDialog After scanning QR, shows confirmation dialog
        Check again on your other device to finish verification.
      </p>
      <div
-        class="mx_E2EIcon mx_E2EIcon_verified"
+        class="mx_E2EIcon"
        data-testid="e2e-icon"
        style="width: 128px; height: 128px;"
      >
-        <div
-          class="mx_E2EIcon_normal"
-        />
+        <svg
+          class="mx_E2EIcon_verified"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414"
+            fill-rule="evenodd"
+          />
+        </svg>
      </div>
      <div
        class="mx_VerificationPanel_reciprocateButtons"
@@ -297,13 +308,24 @@ exports[`VerificationRequestDialog Shows a successful message if verification fi
        Now you can read or send messages securely, and anyone you chat with can also trust this device.
      </p>
      <div
-        class="mx_E2EIcon mx_E2EIcon_verified"
+        class="mx_E2EIcon"
        data-testid="e2e-icon"
        style="width: 128px; height: 128px;"
      >
-        <div
-          class="mx_E2EIcon_normal"
-        />
+        <svg
+          class="mx_E2EIcon_verified"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414"
+            fill-rule="evenodd"
+          />
+        </svg>
      </div>
      <div
        class="mx_AccessibleButton mx_UserInfo_wideButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
--- a/test/unit-tests/components/views/dialogs/devtools/snapshots/Users-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/devtools/snapshots/Users-test.tsx.snap
@@ -39,9 +39,22 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
        <span>
          Verification status: 
          <div
-            class="mx_E2EIcon mx_E2EIcon_normal mx_E2EIcon_inline"
+            class="mx_E2EIcon mx_E2EIcon_inline"
            data-testid="e2e-icon"
-          />
+          >
+            <svg
+              class="mx_E2EIcon_normal"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+              />
+            </svg>
+          </div>
           Signed by owner
        </span>
      </li>
@@ -130,12 +143,21 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
        <span>
          Verification status: 
          <div
-            class="mx_E2EIcon mx_E2EIcon_warning mx_E2EIcon_inline"
+            class="mx_E2EIcon mx_E2EIcon_inline"
            data-testid="e2e-icon"
          >
-            <div
-              class="mx_E2EIcon_normal"
-            />
+            <svg
+              class="mx_E2EIcon_warning"
+              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>
           Not signed by owner
        </span>
@@ -225,12 +247,23 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
        <span>
          Verification status: 
          <div
-            class="mx_E2EIcon mx_E2EIcon_verified mx_E2EIcon_inline"
+            class="mx_E2EIcon mx_E2EIcon_inline"
            data-testid="e2e-icon"
          >
-            <div
-              class="mx_E2EIcon_normal"
-            />
+            <svg
+              class="mx_E2EIcon_verified"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414"
+                fill-rule="evenodd"
+              />
+            </svg>
          </div>
           Verified by cross-signing
        </span>
@@ -323,12 +356,23 @@ exports[`<Users /> should render a single user 1`] = `
        <span>
          Verification status: 
          <div
-            class="mx_E2EIcon mx_E2EIcon_verified mx_E2EIcon_inline"
+            class="mx_E2EIcon mx_E2EIcon_inline"
            data-testid="e2e-icon"
          >
-            <div
-              class="mx_E2EIcon_normal"
-            />
+            <svg
+              class="mx_E2EIcon_verified"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414"
+                fill-rule="evenodd"
+              />
+            </svg>
          </div>
           Verified
        </span>
@@ -344,12 +388,23 @@ exports[`<Users /> should render a single user 1`] = `
            class="mx_DevTools_button"
          >
            <div
-              class="mx_E2EIcon mx_E2EIcon_verified mx_E2EIcon_inline"
+              class="mx_E2EIcon mx_E2EIcon_inline"
              data-testid="e2e-icon"
            >
-              <div
-                class="mx_E2EIcon_normal"
-              />
+              <svg
+                class="mx_E2EIcon_verified"
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414"
+                  fill-rule="evenodd"
+                />
+              </svg>
            </div>
            VERIFIED
          </button>
@@ -359,9 +414,22 @@ exports[`<Users /> should render a single user 1`] = `
            class="mx_DevTools_button"
          >
            <div
-              class="mx_E2EIcon mx_E2EIcon_normal mx_E2EIcon_inline"
+              class="mx_E2EIcon mx_E2EIcon_inline"
              data-testid="e2e-icon"
-            />
+            >
+              <svg
+                class="mx_E2EIcon_normal"
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+                />
+              </svg>
+            </div>
            SIGNED
          </button>
        </li>
@@ -370,12 +438,21 @@ exports[`<Users /> should render a single user 1`] = `
            class="mx_DevTools_button"
          >
            <div
-              class="mx_E2EIcon mx_E2EIcon_warning mx_E2EIcon_inline"
+              class="mx_E2EIcon mx_E2EIcon_inline"
              data-testid="e2e-icon"
            >
-              <div
-                class="mx_E2EIcon_normal"
-              />
+              <svg
+                class="mx_E2EIcon_warning"
+                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>
            UNSIGNED
          </button>
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
@@ -340,7 +340,14 @@ describe("SendWysiwygComposer", () => {
                const leftIcon = screen.getByTestId("e2e-icon");
                // Then
                expect(leftIcon).toBeInTheDocument();
-                expect(leftIcon).toHaveClass(expectedClass ? `mx_E2EIcon ${expectedClass}` : `mx_E2EIcon`);
+                expect(leftIcon).toHaveClass("mx_E2EIcon");
+                if (expectedClass) {
+                    // eslint-disable-next-line jest/no-conditional-expect
+                    expect(leftIcon.querySelector("svg")).toHaveClass(expectedClass);
+                } else {
+                    // eslint-disable-next-line jest/no-conditional-expect
+                    expect(leftIcon.querySelector("svg")).not.toBeInTheDocument();
+                }
            });
        },
    );