Change avatar to use Compound implementation (#11448)

* Move avatar to new compound implementation

* Make space avatars square

* Remove reference to the avatar initial CSS class

* remove references to mx_BaseAvatar_image

* Fixe test suites

* Fix accessbility violations

* Add ConfirmUserActionDialog test

* Fix tests

* Add FacePile test

* Fix items clipping in members list

* Fix user info avatar sizing

* Fix tests

cypress/e2e/settings/general-user-settings-tab.spec.ts

@@ -232,7 +232,7 @@ describe("General user settings tab", () => {
         cy.closeDialog();
 
         // Assert the avatar's initial characters are set
-        cy.get(".mx_UserMenu .mx_BaseAvatar_initial").findByText("A").should("exist"); // Alice
+        cy.get(".mx_UserMenu .mx_BaseAvatar").findByText("A").should("exist"); // Alice
-        cy.get(".mx_RoomView_wrapper .mx_BaseAvatar_initial").findByText("A").should("exist"); // Alice
+        cy.get(".mx_RoomView_wrapper .mx_BaseAvatar").findByText("A").should("exist"); // Alice
     });
 });

cypress/e2e/threads/threads.spec.ts

@@ -98,7 +98,7 @@ describe("Threads", () => {
         // Wait until the both messages are read
         cy.get(".mx_ThreadView .mx_EventTile_last[data-layout=group]").within(() => {
             cy.get(".mx_EventTile_line .mx_MTextBody").findByText(MessageLong).should("exist");
-            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");
+            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar").should("be.visible");
 
             // Make sure the CSS style for spacing is applied to mx_EventTile_line on group/modern layout
             cy.get(".mx_EventTile_line").should("have.css", "padding-inline-start", ThreadViewGroupSpacingStart);
@@ -118,7 +118,7 @@ describe("Threads", () => {
             cy.get(".mx_EventTile_line .mx_MTextBody").findByText(MessageLong).should("exist");
 
             // Make sure the avatar inside ReadReceiptGroup is visible on the group layout
-            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");
+            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar").should("be.visible");
         });
 
         // Enable the bubble layout
@@ -127,12 +127,12 @@ describe("Threads", () => {
         cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble'].mx_EventTile_last").within(() => {
             // TODO: remove this after fixing the issue of ReadReceiptGroup being hidden on the bubble layout
             // See: https://github.com/vector-im/element-web/issues/23569
-            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("exist");
+            cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar").should("exist");
 
             // Make sure the avatar inside ReadReceiptGroup is visible on bubble layout
             // TODO: enable this after fixing the issue of ReadReceiptGroup being hidden on the bubble layout
             // See: https://github.com/vector-im/element-web/issues/23569
-            // cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");
+            // cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar").should("be.visible");
         });
 
         // Re-enable the group layout

cypress/e2e/timeline/timeline.spec.ts

@@ -45,7 +45,7 @@ const expectDisplayName = (e: JQuery<HTMLElement>, displayName: string): void =>
 const expectAvatar = (e: JQuery<HTMLElement>, avatarUrl: string): void => {
     cy.all([cy.window({ log: false }), cy.getClient()]).then(([win, cli]) => {
         const size = AVATAR_SIZE * win.devicePixelRatio;
-        expect(e.find(".mx_BaseAvatar_image").attr("src")).to.equal(
+        expect(e.find(".mx_BaseAvatar img").attr("src")).to.equal(
             // eslint-disable-next-line no-restricted-properties
             cli.mxcUrlToHttp(avatarUrl, size, size, AVATAR_RESIZE_METHOD),
         );

res/css/structures/_RightPanel.pcss

@@ -111,8 +111,4 @@ limitations under the License.
         margin-right: 8px;
         vertical-align: middle;
     }
-
-    .mx_BaseAvatar_image {
-        border-radius: 8px;
-    }
 }

res/css/structures/_RoomStatusBar.pcss

@@ -25,16 +25,6 @@ limitations under the License.
     text-align: left;
 }
 
-.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
-    margin-right: -12px;
-    border: 1px solid $background;
-}
-
-.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
-    padding-left: 1px;
-    padding-top: 1px;
-}
-
 .mx_RoomStatusBar_typingIndicatorRemaining {
     display: inline-block;
     color: #acacac;

res/css/structures/_SpaceHierarchy.pcss

@@ -108,12 +108,6 @@ limitations under the License.
         }
     }
 
-    .mx_SpaceHierarchy_subspace {
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
-    }
-
     .mx_SpaceHierarchy_subspace_toggle {
         position: absolute;
         left: -1px;

res/css/structures/_SpacePanel.pcss

@@ -232,10 +232,6 @@ limitations under the License.
             transform: rotate(45deg);
         }
 
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
-
         .mx_SpaceButton_menuButton {
             width: 20px;
             min-width: 20px; /* yay flex */
@@ -269,19 +265,6 @@ limitations under the License.
         min-width: 0;
         flex-grow: 1;
 
-        .mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial {
-            color: $secondary-content;
-            border-radius: 8px;
-            background-color: $panel-actions;
-            font-size: $font-15px !important; /* override inline style */
-            font-weight: var(--cpd-font-weight-semibold);
-            line-height: $font-18px;
-
-            & + .mx_BaseAvatar_image {
-                visibility: hidden;
-            }
-        }
-
         .mx_SpaceTreeLevel {
             // Indent subspaces
             padding-left: 16px;
@@ -290,6 +273,7 @@ limitations under the License.
 
     .mx_SpaceButton_avatarWrapper {
         position: relative;
+        line-height: 0;
     }
 
     .mx_SpacePanel_badgeContainer {

res/css/structures/_SpaceRoomView.pcss

@@ -143,10 +143,6 @@ limitations under the License.
 
             .mx_BaseAvatar {
                 width: 80px;
-
-                .mx_BaseAvatar_image {
-                    border-radius: 12px;
-                }
             }
         }
 

res/css/views/avatars/_BaseAvatar.pcss

@@ -14,57 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_BaseAvatar {
-    position: relative;
-    /* In at least Firefox, the case of relative positioned inline elements */
-    /* (such as mx_BaseAvatar) with absolute positioned children (such as */
-    /* mx_BaseAvatar_initial) is a dark corner full of spider webs. It will give */
-    /* different results during full reflow of the page vs. incremental reflow */
-    /* of small portions. While that's surely a browser bug, we can avoid it by */
-    /* using `inline-block` instead of the default `inline`. */
-    /* https://github.com/vector-im/element-web/issues/5594 */
-    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1535053 */
-    /* https://bugzilla.mozilla.org/show_bug.cgi?id=255139 */
-    display: inline-block;
-    user-select: none;
-
-    &.mx_RoomAvatar_isSpaceRoom {
-        &.mx_BaseAvatar_image,
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
-    }
-}
-
-.mx_BaseAvatar_initial {
-    position: absolute;
-    left: 0;
-    color: $avatar-initial-color;
-    text-align: center;
-    speak: none;
-    pointer-events: none;
-    font-weight: normal;
-}
-
-.mx_BaseAvatar_image {
-    object-fit: cover;
-    aspect-ratio: 1;
-    border-radius: 125px;
-    vertical-align: top;
-    background-color: $background;
-}
-
 /* Percy screenshot test specific CSS */
 @media only percy {
     /* Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot */
-    .mx_BaseAvatar_initial {
+    .mx_BaseAvatar {
         background-color: var(--percy-color-avatar) !important;
-        border-radius: 125px;
-    }
-    .mx_RoomAvatar_isSpaceRoom .mx_BaseAvatar_initial {
-        border-radius: 8px;
-    }
-    .mx_BaseAvatar_initial + .mx_BaseAvatar_image {
-        visibility: hidden;
     }
 }

res/css/views/avatars/_DecoratedRoomAvatar.pcss

@@ -18,6 +18,7 @@ limitations under the License.
 .mx_ExtraTile {
     position: relative;
     contain: content;
+    line-height: 1;
 
     &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
         mask-image: url("$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg");
@@ -29,9 +30,9 @@ limitations under the License.
     .mx_DecoratedRoomAvatar_icon {
         position: absolute;
         /* the following percentage based sizings are to match the scalable svg mask for the cutout */
-        bottom: -6.25%;
+        bottom: 0;
-        right: -6.25%;
+        right: 0;
-        margin: 12.5%;
+        transform: translate(-25%, -70%);
         width: 25%;
         height: 25%;
         border-radius: 50%;

res/css/views/dialogs/_AddExistingToSpaceDialog.pcss

@@ -157,12 +157,6 @@ limitations under the License.
 .mx_SubspaceSelector {
     display: flex;
 
-    .mx_BaseAvatar_image {
-        border-radius: 8px;
-        margin: 0;
-        vertical-align: unset;
-    }
-
     .mx_BaseAvatar {
         display: inline-flex;
         margin: auto 16px auto 5px;
@@ -228,16 +222,10 @@ limitations under the License.
     display: flex;
     margin-top: 12px;
 
-    .mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */
+    .mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ {
-    .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
         margin-right: 12px;
     }
 
-    img.mx_RoomAvatar_isSpaceRoom,
-    .mx_RoomAvatar_isSpaceRoom img {
-        border-radius: 8px;
-    }
-
     .mx_AddExistingToSpace_entry_name {
         font-size: $font-15px;
         line-height: 30px;

res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss

@@ -66,11 +66,6 @@ limitations under the License.
                 flex-grow: 1;
             }
 
-            img.mx_RoomAvatar_isSpaceRoom,
-            .mx_RoomAvatar_isSpaceRoom img {
-                border-radius: 4px;
-            }
-
             .mx_ManageRestrictedJoinRuleDialog_entry_name {
                 margin: 0 8px;
                 font-size: $font-15px;
@@ -98,10 +93,6 @@ limitations under the License.
         .mx_BaseAvatar {
             margin-right: 12px;
         }
-
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
     }
 
     .mx_ManageRestrictedJoinRuleDialog_section_info {

res/css/views/elements/_FacePile.pcss

@@ -29,14 +29,10 @@ limitations under the License.
             margin-right: -8px;
         }
 
-        .mx_BaseAvatar_image {
+        .mx_BaseAvatar {
             border: 1px solid var(--facepile-background, $background);
         }
 
-        .mx_BaseAvatar_initial {
-            margin: 1px; /* to offset the border on the image */
-        }
-
         .mx_FacePile_more {
             position: relative;
             border-radius: 100%;

res/css/views/right_panel/_RoomSummaryCard.pcss

@@ -123,11 +123,6 @@ limitations under the License.
                 text-overflow: ellipsis;
                 overflow: hidden;
 
-                .mx_BaseAvatar_image {
-                    vertical-align: top;
-                    margin-right: 12px;
-                }
-
                 span {
                     color: $primary-content;
                 }

res/css/views/right_panel/_UserInfo.pcss

@@ -95,49 +95,14 @@ limitations under the License.
 
         .mx_UserInfo_avatar_transition {
             max-width: 30vh;
+            aspect-ratio: 1 / 1;
             margin: 0 auto;
             transition: 0.5s;
 
-            .mx_UserInfo_avatar_transition_child {
+            .mx_BaseAvatar,
-                /* use padding-top instead of height to make this element square,
+            .mx_BaseAvatar img {
-                as the % in padding is a % of the width (including margin,
+                width: 100%;
-                that's why we had to put the margin to center on a parent div),
+                height: 100%;
-                and not a % of the parent height. */
-                padding-top: 100%;
-                position: relative;
-
-                .mx_BaseAvatar,
-                .mx_BaseAvatar_initial,
-                .mx_BaseAvatar_image {
-                    border-radius: 100%;
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100% !important;
-                    height: 100% !important;
-                }
-
-                .mx_BaseAvatar {
-                    &.mx_BaseAvatar_image {
-                        cursor: zoom-in;
-                    }
-
-                    .mx_BaseAvatar_initial {
-                        z-index: 1;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-
-                        /* override the calculated sizes so that the letter isn't HUGE */
-                        font-size: 6rem !important;
-                        width: 100% !important;
-                        transition: font-size 0.5s;
-
-                        & + .mx_BaseAvatar_image {
-                            cursor: default;
-                        }
-                    }
-                }
             }
         }
     }
@@ -285,14 +250,6 @@ limitations under the License.
                 max-width: 72px;
                 margin: 0 auto;
             }
-
-            .mx_UserInfo_avatar_transition_child {
-                .mx_BaseAvatar {
-                    .mx_BaseAvatar_initial {
-                        font-size: 40px !important; /* override the other override because here the avatar is smaller */
-                    }
-                }
-            }
         }
     }
 }

res/css/views/rooms/_EntityTile.pcss

@@ -67,6 +67,7 @@ limitations under the License.
     padding-top: 4px;
     padding-bottom: 4px;
     position: relative;
+    line-height: 0;
 }
 
 .mx_EntityTile_name {

res/css/views/rooms/_EventTile.pcss

@@ -571,6 +571,7 @@ $left-gutter: 64px;
 
             .mx_EventTile_avatar,
             .mx_EventTile_e2eIcon {
+                line-height: 1;
                 margin: $spacing-block-start 0 $spacing-block-end;
             }
 

res/css/views/rooms/_LegacyRoomHeader.pcss

@@ -163,10 +163,6 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_LegacyRoomHeader_avatar .mx_BaseAvatar_image {
-    object-fit: cover;
-}
-
 .mx_LegacyRoomHeader_button {
     cursor: pointer;
     flex: 0 0 auto;

res/css/views/rooms/_MemberInfo.pcss

@@ -96,7 +96,7 @@ limitations under the License.
         display: block;
     }
 
-    .mx_BaseAvatar.mx_BaseAvatar_image {
+    .mx_BaseAvatar img {
         cursor: zoom-in;
     }
 }

res/css/views/rooms/_RoomPreviewCard.pcss

@@ -70,13 +70,6 @@ limitations under the License.
         display: flex;
         align-items: center;
 
-        .mx_RoomAvatar_isSpaceRoom {
-            &.mx_BaseAvatar_image,
-            .mx_BaseAvatar_image {
-                border-radius: 12px;
-            }
-        }
-
         .mx_RoomPreviewCard_video {
             width: 50px;
             height: 50px;

res/css/views/rooms/_WhoIsTypingTile.pcss

@@ -31,10 +31,6 @@ limitations under the License.
     margin-left: -12px;
 }
 
-.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
-    padding-top: 1px;
-}
-
 .mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
     border: 1px solid $background;
     border-radius: 40px;

res/css/views/settings/_JoinRuleSettings.pcss

@@ -39,11 +39,6 @@ limitations under the License.
         color: $secondary-content;
         display: inline-block;
 
-        img.mx_RoomAvatar_isSpaceRoom,
-        .mx_RoomAvatar_isSpaceRoom img {
-            border-radius: 8px;
-        }
-
         .mx_BaseAvatar {
             margin-right: 8px;
         }

src/RoomInvite.tsx

@@ -177,8 +177,7 @@ export function showAnyInviteErrors(
                                             }
                                             name={name!}
                                             idName={user?.userId}
-                                            width={36}
+                                            size="36px"
-                                            height={36}
                                         />
                                     </div>
                                     <div className="mx_InviteDialog_tile_nameStack">

src/autocomplete/NotifProvider.tsx

@@ -56,7 +56,7 @@ export default class NotifProvider extends AutocompleteProvider {
                     suffix: " ",
                     component: (
                         <PillCompletion title="@room" description={_t("Notify the whole room")}>
-                            <RoomAvatar width={24} height={24} room={this.room} />
+                            <RoomAvatar size="24px" room={this.room} />
                         </PillCompletion>
                     ),
                     range: range!,

src/autocomplete/RoomProvider.tsx

@@ -122,7 +122,7 @@ export default class RoomProvider extends AutocompleteProvider {
                         href: makeRoomPermalink(this.room.client, room.displayedAlias),
                         component: (
                             <PillCompletion title={room.room.name} description={room.displayedAlias}>
-                                <RoomAvatar width={24} height={24} room={room.room} />
+                                <RoomAvatar size="24px" room={room.room} />
                             </PillCompletion>
                         ),
                         range: range!,

src/autocomplete/UserProvider.tsx

@@ -135,7 +135,7 @@ export default class UserProvider extends AutocompleteProvider {
                     href: makeUserPermalink(user.userId),
                     component: (
                         <PillCompletion title={displayName} description={description}>
-                            <MemberAvatar member={user} width={24} height={24} />
+                            <MemberAvatar member={user} size="24px" />
                         </PillCompletion>
                     ),
                     range: range!,

src/components/structures/HomePage.tsx

@@ -59,7 +59,7 @@ const getOwnProfile = (
     avatarUrl?: string;
 } => ({
     displayName: OwnProfileStore.instance.displayName || userId,
-    avatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(AVATAR_SIZE) ?? undefined,
+    avatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(parseInt(AVATAR_SIZE, 10)) ?? undefined,
 });
 
 const UserWelcomeTop: React.FC = () => {
@@ -84,9 +84,7 @@ const UserWelcomeTop: React.FC = () => {
                     idName={userId}
                     name={ownProfile.displayName}
                     url={ownProfile.avatarUrl}
-                    width={AVATAR_SIZE}
+                    size={AVATAR_SIZE + "px"}
-                    height={AVATAR_SIZE}
-                    resizeMethod="crop"
                 />
             </MiniAvatarUploader>
 
@@ -106,7 +104,7 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
     }
 
     let introSection: JSX.Element;
-    if (justRegistered || !OwnProfileStore.instance.getHttpAvatarUrl(AVATAR_SIZE)) {
+    if (justRegistered || !OwnProfileStore.instance.getHttpAvatarUrl(parseInt(AVATAR_SIZE, 10))) {
         introSection = <UserWelcomeTop />;
     } else {
         const brandingConfig = SdkConfig.getObject("branding");

src/components/structures/SpaceHierarchy.tsx

@@ -194,15 +194,14 @@ const Tile: React.FC<ITileProps> = ({
 
     let avatar: ReactElement;
     if (joinedRoom) {
-        avatar = <RoomAvatar room={joinedRoom} width={20} height={20} />;
+        avatar = <RoomAvatar room={joinedRoom} size="20px" />;
     } else {
         avatar = (
             <BaseAvatar
                 name={name}
                 idName={room.room_id}
                 url={room.avatar_url ? mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(20) : null}
-                width={20}
+                size="20px"
-                height={20}
             />
         );
     }

src/components/structures/SpaceRoomView.tsx

@@ -265,7 +265,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
     return (
         <div className="mx_SpaceRoomView_landing">
             <div className="mx_SpaceRoomView_landing_header">
-                <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
+                <RoomAvatar room={space} size="80px" viewAvatarOnClick={true} type="square" />
             </div>
             <div className="mx_SpaceRoomView_landing_name">
                 <RoomName room={space}>

src/components/structures/UserMenu.tsx

@@ -458,9 +458,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                             idName={userId}
                             name={displayName}
                             url={avatarUrl}
-                            width={avatarSize}
+                            size={avatarSize + "px"}
-                            height={avatarSize}
-                            resizeMethod="crop"
                             className="mx_UserMenu_userAvatar_BaseAvatar"
                         />
                         {liveAvatarAddon}

src/components/views/avatars/BaseAvatar.tsx

@@ -19,34 +19,29 @@ limitations under the License.
 
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import classNames from "classnames";
-import { ResizeMethod, ClientEvent } from "matrix-js-sdk/src/matrix";
+import { ClientEvent } from "matrix-js-sdk/src/matrix";
+import { Avatar } from "@vector-im/compound-web";
 
-import * as AvatarLogic from "../../../Avatar";
 import SettingsStore from "../../../settings/SettingsStore";
-import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
+import { ButtonEvent } from "../elements/AccessibleButton";
 import RoomContext from "../../../contexts/RoomContext";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
-import { toPx } from "../../../utils/units";
 import { _t } from "../../../languageHandler";
 
 interface IProps {
-    name?: string; // The name (first initial used as default)
+    name?: React.ComponentProps<typeof Avatar>["name"]; // The name (first initial used as default)
-    idName?: string; // ID for generating hash colours
+    idName?: React.ComponentProps<typeof Avatar>["id"]; // ID for generating hash colours
     title?: string; // onHover title text
     url?: string | null; // highest priority of them all, shortcut to set in urls[0]
     urls?: string[]; // [highest_priority, ... , lowest_priority]
-    width: number;
+    type?: React.ComponentProps<typeof Avatar>["type"];
-    height: number;
+    size: string;
-    // XXX: resizeMethod not actually used.
-    resizeMethod?: ResizeMethod;
-    defaultToInitialLetter?: boolean; // true to add default url
     onClick?: (ev: ButtonEvent) => void;
-    inputRef?: React.RefObject<HTMLImageElement & HTMLSpanElement>;
+    inputRef?: React.RefObject<HTMLSpanElement>;
     className?: string;
     tabIndex?: number;
     altText?: string;
-    ariaLabel?: string;
 }
 
 const calculateUrls = (url?: string | null, urls?: string[], lowBandwidth = false): string[] => {
@@ -107,120 +102,47 @@ const BaseAvatar: React.FC<IProps> = (props) => {
         title,
         url,
         urls,
-        width = 40,
+        size = "40px",
-        height = 40,
-        resizeMethod = "crop", // eslint-disable-line @typescript-eslint/no-unused-vars
-        defaultToInitialLetter = true,
         onClick,
         inputRef,
         className,
+        type = "round",
         altText = _t("Avatar"),
-        ariaLabel = _t("Avatar"),
         ...otherProps
     } = props;
 
     const [imageUrl, onError] = useImageUrl({ url, urls });
 
-    if (!imageUrl && defaultToInitialLetter && name) {
+    const extraProps: Partial<React.ComponentProps<typeof Avatar>> = {};
-        const initialLetter = AvatarLogic.getInitialLetter(name);
-        const textNode = (
-            <span
-                className="mx_BaseAvatar_initial"
-                aria-hidden="true"
-                style={{
-                    fontSize: toPx(width * 0.65),
-                    width: toPx(width),
-                    lineHeight: toPx(height),
-                }}
-            >
-                {initialLetter}
-            </span>
-        );
-        const imgNode = (
-            <img
-                loading="lazy"
-                className="mx_BaseAvatar_image"
-                src={AvatarLogic.defaultAvatarUrlForString(idName || name)}
-                alt=""
-                title={title}
-                onError={onError}
-                style={{
-                    width: toPx(width),
-                    height: toPx(height),
-                }}
-                aria-hidden="true"
-                data-testid="avatar-img"
-            />
-        );
-
-        if (onClick) {
-            return (
-                <AccessibleButton
-                    aria-label={ariaLabel}
-                    aria-live="off"
-                    {...otherProps}
-                    element="span"
-                    className={classNames("mx_BaseAvatar", className)}
-                    onClick={onClick}
-                    inputRef={inputRef}
-                >
-                    {textNode}
-                    {imgNode}
-                </AccessibleButton>
-            );
-        } else {
-            return (
-                <span
-                    className={classNames("mx_BaseAvatar", className)}
-                    ref={inputRef}
-                    {...otherProps}
-                    role="presentation"
-                >
-                    {textNode}
-                    {imgNode}
-                </span>
-            );
-        }
-    }
 
     if (onClick) {
-        return (
+        extraProps["aria-live"] = "off";
-            <AccessibleButton
+        extraProps["role"] = "button";
-                className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)}
+    } else if (!imageUrl) {
-                element="img"
+        extraProps["role"] = "presentation";
-                src={imageUrl}
+        extraProps["aria-label"] = undefined;
-                onClick={onClick}
-                onError={onError}
-                style={{
-                    width: toPx(width),
-                    height: toPx(height),
-                }}
-                title={title}
-                alt={altText}
-                inputRef={inputRef}
-                data-testid="avatar-img"
-                {...otherProps}
-            />
-        );
     } else {
-        return (
+        extraProps["role"] = undefined;
-            <img
-                loading="lazy"
-                className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)}
-                src={imageUrl}
-                onError={onError}
-                style={{
-                    width: toPx(width),
-                    height: toPx(height),
-                }}
-                title={title}
-                alt=""
-                ref={inputRef}
-                data-testid="avatar-img"
-                {...otherProps}
-            />
-        );
     }
+
+    return (
+        <Avatar
+            ref={inputRef}
+            src={imageUrl}
+            id={idName ?? ""}
+            name={name ?? ""}
+            type={type}
+            size={size}
+            className={classNames("mx_BaseAvatar", className)}
+            aria-label={altText}
+            onError={onError}
+            title={title}
+            onClick={onClick}
+            {...extraProps}
+            {...otherProps}
+            data-testid="avatar-img"
+        />
+    );
 };
 
 export default BaseAvatar;

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -33,7 +33,7 @@ import TooltipTarget from "../elements/TooltipTarget";
 
 interface IProps {
     room: Room;
-    avatarSize: number;
+    size: string;
     displayBadge?: boolean;
     forceCount?: boolean;
     oobData?: IOOBData;
@@ -207,8 +207,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
             <div className={classes}>
                 <RoomAvatar
                     room={this.props.room}
-                    width={this.props.avatarSize}
+                    size={this.props.size}
-                    height={this.props.avatarSize}
                     oobData={this.props.oobData}
                     viewAvatarOnClick={this.props.viewAvatarOnClick}
                 />

src/components/views/avatars/MemberAvatar.tsx

@@ -30,8 +30,7 @@ import { _t } from "../../../languageHandler";
 interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
     member: RoomMember | null;
     fallbackUserId?: string;
-    width: number;
+    size: string;
-    height: number;
     resizeMethod?: ResizeMethod;
     // Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser`
     viewUserOnClick?: boolean;
@@ -44,8 +43,7 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
 }
 
 export default function MemberAvatar({
-    width,
+    size,
-    height,
     resizeMethod = "crop",
     viewUserOnClick,
     forceHistorical,
@@ -68,8 +66,8 @@ export default function MemberAvatar({
     if (member?.name) {
         if (member.getMxcAvatarUrl()) {
             imageUrl = mediaFromMxc(member.getMxcAvatarUrl() ?? "").getThumbnailOfSourceHttp(
-                width,
+                parseInt(size, 10),
-                height,
+                parseInt(size, 10),
                 resizeMethod,
             );
         }
@@ -85,9 +83,7 @@ export default function MemberAvatar({
     return (
         <BaseAvatar
             {...props}
-            width={width}
+            size={size}
-            height={height}
-            resizeMethod={resizeMethod}
             name={name ?? ""}
             title={hideTitle ? undefined : title}
             idName={member?.userId ?? fallbackUserId}
@@ -104,7 +100,6 @@ export default function MemberAvatar({
                     : props.onClick
             }
             altText={_t("Profile picture")}
-            ariaLabel={_t("Profile picture")}
         />
     );
 }

src/components/views/avatars/RoomAvatar.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React, { ComponentProps } from "react";
 import { Room, RoomStateEvent, MatrixEvent, EventType, RoomType } from "matrix-js-sdk/src/matrix";
-import classNames from "classnames";
 
 import BaseAvatar from "./BaseAvatar";
 import ImageView from "../elements/ImageView";
@@ -47,9 +46,7 @@ interface IState {
 
 export default class RoomAvatar extends React.Component<IProps, IState> {
     public static defaultProps = {
-        width: 36,
+        size: "36px",
-        height: 36,
-        resizeMethod: "crop",
         oobData: {},
     };
 
@@ -87,9 +84,9 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
         let oobAvatar: string | null = null;
         if (props.oobData.avatarUrl) {
             oobAvatar = mediaFromMxc(props.oobData.avatarUrl).getThumbnailOfSourceHttp(
-                props.width,
+                parseInt(props.size, 10),
-                props.height,
+                parseInt(props.size, 10),
-                props.resizeMethod,
+                "crop",
             );
         }
 
@@ -102,7 +99,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     private static getRoomAvatarUrl(props: IProps): string | null {
         if (!props.room) return null;
 
-        return Avatar.avatarUrlForRoom(props.room, props.width, props.height, props.resizeMethod);
+        return Avatar.avatarUrlForRoom(props.room, parseInt(props.size, 10), parseInt(props.size, 10), "crop");
     }
 
     private onRoomAvatarClick = (): void => {
@@ -140,9 +137,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
         return (
             <BaseAvatar
                 {...otherProps}
-                className={classNames(className, {
+                type={(room?.getType() ?? this.props.oobData?.roomType) === RoomType.Space ? "square" : "round"}
-                    mx_RoomAvatar_isSpaceRoom: (room?.getType() ?? this.props.oobData?.roomType) === RoomType.Space,
-                })}
                 name={roomName}
                 idName={this.roomIdName}
                 urls={this.state.urls}

src/components/views/avatars/SearchResultAvatar.tsx

@@ -24,7 +24,7 @@ import BaseAvatar from "./BaseAvatar";
 
 interface SearchResultAvatarProps {
     user: Member | RoomMember;
-    size: number;
+    size: string;
 }
 
 export function SearchResultAvatar({ user, size }: SearchResultAvatarProps): JSX.Element {
@@ -46,11 +46,10 @@ export function SearchResultAvatar({ user, size }: SearchResultAvatarProps): JSX
         return (
             <BaseAvatar
                 className="mx_SearchResultAvatar"
-                url={avatarUrl ? mediaFromMxc(avatarUrl).getSquareThumbnailHttp(size) : null}
+                url={avatarUrl ? mediaFromMxc(avatarUrl).getSquareThumbnailHttp(parseInt(size, 10)) : null}
                 name={user.name}
                 idName={user.userId}
-                width={size}
+                size={size}
-                height={size}
             />
         );
     }

src/components/views/avatars/WidgetAvatar.tsx

@@ -22,13 +22,12 @@ import { IApp, isAppWidget } from "../../../stores/WidgetStore";
 import BaseAvatar, { BaseAvatarType } from "./BaseAvatar";
 import { mediaFromMxc } from "../../../customisations/Media";
 
-interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls" | "height" | "width"> {
+interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls"> {
     app: IApp | IWidget;
-    height?: number;
+    size: string;
-    width?: number;
 }
 
-const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 20, ...props }) => {
+const WidgetAvatar: React.FC<IProps> = ({ app, className, size = "20px", ...props }) => {
     let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg").default];
     // heuristics for some better icons until Widgets support their own icons
     if (app.type.includes("jitsi")) {
@@ -49,8 +48,7 @@ const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 2
             // MSC2765
             url={isAppWidget(app) && app.avatar_url ? mediaFromMxc(app.avatar_url).getSquareThumbnailHttp(20) : null}
             urls={iconUrls}
-            width={width}
+            size={size}
-            height={height}
         />
     );
 };

src/components/views/beacon/BeaconListItem.tsx

@@ -53,7 +53,7 @@ const BeaconListItem: React.FC<Props & HTMLProps<HTMLLIElement>> = ({ beacon, ..
     return (
         <li className="mx_BeaconListItem" {...rest}>
             {isSelfLocation ? (
-                <MemberAvatar className="mx_BeaconListItem_avatar" member={beaconMember} height={32} width={32} />
+                <MemberAvatar className="mx_BeaconListItem_avatar" member={beaconMember} size="32px" />
             ) : (
                 <StyledLiveBeaconIcon className="mx_BeaconListItem_avatarIcon" />
             )}

src/components/views/beacon/DialogOwnBeaconStatus.tsx

@@ -54,12 +54,7 @@ const DialogOwnBeaconStatus: React.FC<Props> = ({ roomId }) => {
     return (
         <div className="mx_DialogOwnBeaconStatus">
             {isSelfLocation ? (
-                <MemberAvatar
+                <MemberAvatar className="mx_DialogOwnBeaconStatus_avatar" member={beaconMember} size="32px" />
-                    className="mx_DialogOwnBeaconStatus_avatar"
-                    member={beaconMember}
-                    height={32}
-                    width={32}
-                />
             ) : (
                 <StyledLiveBeaconIcon className="mx_DialogOwnBeaconStatus_avatarIcon" />
             )}

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -62,9 +62,9 @@ export const Entry: React.FC<{
     return (
         <label className="mx_AddExistingToSpace_entry">
             {room?.isSpaceRoom() ? (
-                <RoomAvatar room={room} height={32} width={32} />
+                <RoomAvatar room={room} size="32px" />
             ) : (
-                <DecoratedRoomAvatar room={room} avatarSize={32} />
+                <DecoratedRoomAvatar room={room} size="32px" />
             )}
             <span className="mx_AddExistingToSpace_entry_name">{room.name}</span>
             <StyledCheckbox
@@ -427,7 +427,7 @@ export const SubspaceSelector: React.FC<ISubspaceSelectorProps> = ({ title, spac
                         });
                         return (
                             <div key={space.roomId} className={classes}>
-                                <RoomAvatar room={space} width={24} height={24} />
+                                <RoomAvatar room={space} size="24px" />
                                 {space.name || getDisplayAliasForRoom(space) || space.roomId}
                             </div>
                         );
@@ -445,7 +445,7 @@ export const SubspaceSelector: React.FC<ISubspaceSelectorProps> = ({ title, spac
 
     return (
         <div className="mx_SubspaceSelector">
-            <RoomAvatar room={value} height={40} width={40} />
+            <RoomAvatar room={value} size="40px" />
             <div>
                 <h1>{title}</h1>
                 {body}

src/components/views/dialogs/ConfirmUserActionDialog.tsx

@@ -102,7 +102,7 @@ export default class ConfirmUserActionDialog extends React.Component<IProps, ISt
             );
         }
 
-        const avatar = <MemberAvatar member={this.props.member} width={48} height={48} />;
+        const avatar = <MemberAvatar member={this.props.member} size="48px" />;
         const name = this.props.member.name;
         const userId = this.props.member.userId;
 

src/components/views/dialogs/ForwardDialog.tsx

@@ -142,7 +142,7 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
                 title={_t("Open room")}
                 alignment={Alignment.Top}
             >
-                <DecoratedRoomAvatar room={room} avatarSize={32} />
+                <DecoratedRoomAvatar room={room} size="32px" />
                 <span className="mx_ForwardList_entry_name">{room.name}</span>
                 <RoomContextDetails component="span" className="mx_ForwardList_entry_detail" room={room} />
             </AccessibleTooltipButton>
@@ -261,12 +261,7 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
             <EntityTile
                 className="mx_EntityTile_ellipsis"
                 avatarJsx={
-                    <BaseAvatar
+                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." size="36px" />
-                        url={require("../../../../res/img/ellipsis.svg").default}
-                        name="..."
-                        width={36}
-                        height={36}
-                    />
                 }
                 name={text}
                 presenceState="online"

src/components/views/dialogs/IncomingSasDialog.tsx

@@ -155,9 +155,7 @@ export default class IncomingSasDialog extends React.Component<IProps, IState> {
                         name={oppProfile.displayname}
                         idName={this.props.verifier.userId}
                         url={url}
-                        width={48}
+                        size="48px"
-                        height={48}
-                        resizeMethod="crop"
                     />
                     <h2>{oppProfile.displayname}</h2>
                 </div>
@@ -168,8 +166,7 @@ export default class IncomingSasDialog extends React.Component<IProps, IState> {
                     <BaseAvatar
                         name={this.props.verifier.userId.slice(1)}
                         idName={this.props.verifier.userId}
-                        width={48}
+                        size="48px"
-                        height={48}
                     />
                     <h2>{this.props.verifier.userId}</h2>
                 </div>

src/components/views/dialogs/InviteDialog.tsx

@@ -126,7 +126,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
     };
 
     public render(): React.ReactNode {
-        const avatarSize = 20;
+        const avatarSize = "20px";
         const avatar = <SearchResultAvatar user={this.props.member} size={avatarSize} />;
 
         let closeButton;
@@ -233,20 +233,21 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
             timestamp = <span className="mx_InviteDialog_tile--room_time">{humanTs}</span>;
         }
 
-        const avatarSize = 36;
+        const avatarSize = "36px";
         const avatar = (this.props.member as ThreepidMember).isEmail ? (
             <EmailPillAvatarIcon width={avatarSize} height={avatarSize} />
         ) : (
             <BaseAvatar
                 url={
                     this.props.member.getMxcAvatarUrl()
-                        ? mediaFromMxc(this.props.member.getMxcAvatarUrl()!).getSquareThumbnailHttp(avatarSize)
+                        ? mediaFromMxc(this.props.member.getMxcAvatarUrl()!).getSquareThumbnailHttp(
+                              parseInt(avatarSize, 10),
+                          )
                         : null
                 }
                 name={this.props.member.name}
                 idName={this.props.member.userId}
-                width={avatarSize}
+                size={avatarSize}
-                height={avatarSize}
             />
         );
 

src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx

@@ -54,11 +54,7 @@ const Entry: React.FC<{
         <label className="mx_ManageRestrictedJoinRuleDialog_entry">
             <div>
                 <div>
-                    {localRoom ? (
+                    {localRoom ? <RoomAvatar room={room} size="20px" /> : <RoomAvatar oobData={room} size="20px" />}
-                        <RoomAvatar room={room} height={20} width={20} />
-                    ) : (
-                        <RoomAvatar oobData={room} height={20} width={20} />
-                    )}
                     <span className="mx_ManageRestrictedJoinRuleDialog_entry_name">{room.name}</span>
                 </div>
                 {description && (

src/components/views/dialogs/ServerOfflineDialog.tsx

@@ -53,7 +53,7 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
                 throw new Error("Cannot render unknown context: " + c.constructor.name);
             const header = (
                 <div className="mx_ServerOfflineDialog_content_context_timeline_header">
-                    <RoomAvatar width={24} height={24} room={c.room} />
+                    <RoomAvatar size="24px" room={c.room} />
                     <span>{c.room.name}</span>
                 </div>
             );

src/components/views/dialogs/spotlight/SpotlightDialog.tsx

@@ -88,7 +88,7 @@ import { Filter } from "./Filter";
 
 const MAX_RECENT_SEARCHES = 10;
 const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons
-const AVATAR_SIZE = 24;
+const AVATAR_SIZE = "24px";
 
 interface IProps {
     initialText?: string;
@@ -609,11 +609,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         endAdornment={<RoomResultContextMenus room={result.room} />}
                         {...ariaProperties}
                     >
-                        <DecoratedRoomAvatar
+                        <DecoratedRoomAvatar room={result.room} size={AVATAR_SIZE} tooltipProps={{ tabIndex: -1 }} />
-                            room={result.room}
-                            avatarSize={AVATAR_SIZE}
-                            tooltipProps={{ tabIndex: -1 }}
-                        />
                         {result.room.name}
                         <NotificationBadge notification={notification} />
                         <RoomContextDetails
@@ -702,8 +698,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                                 avatarUrl: result.publicRoom.avatar_url,
                                 roomType: result.publicRoom.room_type,
                             }}
-                            width={AVATAR_SIZE}
+                            size={AVATAR_SIZE}
-                            height={AVATAR_SIZE}
                         />
                         <PublicRoomResultDetails
                             room={result.publicRoom}
@@ -843,11 +838,12 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                                         idName={room.room_id}
                                         url={
                                             room.avatar_url
-                                                ? mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(AVATAR_SIZE)
+                                                ? mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(
+                                                      parseInt(AVATAR_SIZE, 10),
+                                                  )
                                                 : null
                                         }
-                                        width={AVATAR_SIZE}
+                                        size={AVATAR_SIZE}
-                                        height={AVATAR_SIZE}
                                     />
                                     {room.name || room.canonical_alias}
                                     {room.name && room.canonical_alias && (
@@ -1037,7 +1033,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                                 >
                                     <DecoratedRoomAvatar
                                         room={room}
-                                        avatarSize={AVATAR_SIZE}
+                                        size={AVATAR_SIZE}
                                         tooltipProps={{ tabIndex: -1 }}
                                     />
                                     {room.name}
@@ -1075,7 +1071,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                                         viewRoom({ roomId: room.roomId }, false, ev.type !== "click");
                                     }}
                                 >
-                                    <DecoratedRoomAvatar room={room} avatarSize={32} tooltipProps={{ tabIndex: -1 }} />
+                                    <DecoratedRoomAvatar room={room} size="32px" tooltipProps={{ tabIndex: -1 }} />
                                     {room.name}
                                 </TooltipOption>
                             ))}

src/components/views/elements/AppPermission.tsx

@@ -94,9 +94,9 @@ export default class AppPermission extends React.Component<IProps, IState> {
         const userId = displayName === this.props.creatorUserId ? null : this.props.creatorUserId;
 
         const avatar = this.state.roomMember ? (
-            <MemberAvatar member={this.state.roomMember} width={38} height={38} />
+            <MemberAvatar member={this.state.roomMember} size="38px" />
         ) : (
-            <BaseAvatar name={this.props.creatorUserId} width={38} height={38} />
+            <BaseAvatar name={this.props.creatorUserId} size="38px" />
         );
 
         const warningTooltipText = (

src/components/views/elements/AppTile.tsx

@@ -526,7 +526,7 @@ export default class AppTile extends React.Component<IProps, IState> {
 
         return (
             <span>
-                <WidgetAvatar app={this.props.app} />
+                <WidgetAvatar app={this.props.app} size="20px" />
                 <b>{name}</b>
                 <span>
                     {title ? titleSpacer : ""}

src/components/views/elements/FacePile.tsx

@@ -23,25 +23,19 @@ import TextWithTooltip from "./TextWithTooltip";
 
 interface IProps extends HTMLAttributes<HTMLSpanElement> {
     members: RoomMember[];
-    faceSize: number;
+    size: string;
     overflow: boolean;
     tooltip?: ReactNode;
     children?: ReactNode;
 }
 
-const FacePile: FC<IProps> = ({ members, faceSize, overflow, tooltip, children, ...props }) => {
+const FacePile: FC<IProps> = ({ members, size, overflow, tooltip, children, ...props }) => {
     const faces = members.map(
         tooltip
-            ? (m) => <MemberAvatar key={m.userId} member={m} width={faceSize} height={faceSize} hideTitle />
+            ? (m) => <MemberAvatar key={m.userId} member={m} size={size} hideTitle />
             : (m) => (
                   <TooltipTarget key={m.userId} label={m.name}>
-                      <MemberAvatar
+                      <MemberAvatar member={m} size={size} viewUserOnClick={!props.onClick} hideTitle />
-                          member={m}
-                          width={faceSize}
-                          height={faceSize}
-                          viewUserOnClick={!props.onClick}
-                          hideTitle
-                      />
                   </TooltipTarget>
               ),
     );

src/components/views/elements/GenericEventListSummary.tsx

@@ -103,7 +103,7 @@ const GenericEventListSummary: React.FC<IProps> = ({
             }),
             (member) => member.getMxcAvatarUrl(),
         );
-        const avatars = uniqueMembers.map((m) => <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
+        const avatars = uniqueMembers.map((m) => <MemberAvatar key={m.userId} member={m} size="14px" />);
         body = (
             <div className="mx_EventTile_line">
                 <div className="mx_EventTile_info">

src/components/views/elements/ImageView.tsx

@@ -477,8 +477,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                 <MemberAvatar
                     member={mxEvent.sender}
                     fallbackUserId={mxEvent.getSender()}
-                    width={32}
+                    size="32px"
-                    height={32}
                     viewUserOnClick={true}
                 />
             );

src/components/views/elements/MiniAvatarUploader.tsx

@@ -26,7 +26,7 @@ import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
 import AccessibleButton from "./AccessibleButton";
 import Spinner from "./Spinner";
 
-export const AVATAR_SIZE = 52;
+export const AVATAR_SIZE = "52px";
 
 interface IProps {
     hasAvatar: boolean;

src/components/views/elements/Pill.tsx

@@ -44,7 +44,7 @@ export const pillRoomNotifLen = (): number => {
     return "@room".length;
 };
 
-const linkIcon = <LinkIcon className="mx_Pill_LinkIcon mx_BaseAvatar mx_BaseAvatar_image" />;
+const linkIcon = <LinkIcon className="mx_Pill_LinkIcon mx_BaseAvatar" />;
 
 const PillRoomAvatar: React.FC<{
     shouldShowPillAvatar: boolean;
@@ -55,7 +55,7 @@ const PillRoomAvatar: React.FC<{
     }
 
     if (room) {
-        return <RoomAvatar room={room} width={16} height={16} aria-hidden="true" />;
+        return <RoomAvatar room={room} size="16px" aria-hidden="true" />;
     }
     return linkIcon;
 };
@@ -69,9 +69,9 @@ const PillMemberAvatar: React.FC<{
     }
 
     if (member) {
-        return <MemberAvatar member={member} width={16} height={16} aria-hidden="true" hideTitle />;
+        return <MemberAvatar member={member} size="16px" aria-hidden="true" hideTitle />;
     }
-    return <UserIcon className="mx_Pill_UserIcon mx_BaseAvatar mx_BaseAvatar_image" />;
+    return <UserIcon className="mx_Pill_UserIcon mx_BaseAvatar" />;
 };
 
 export interface PillProps {

src/components/views/elements/RoomFacePile.tsx

@@ -77,13 +77,7 @@ const RoomFacePile: FC<IProps> = ({ room, onlyKnownUsers = true, numShown = DEFA
     );
 
     return (
-        <FacePile
+        <FacePile members={shownMembers} size="28px" overflow={members.length > numShown} tooltip={tooltip} {...props}>
-            members={shownMembers}
-            faceSize={28}
-            overflow={members.length > numShown}
-            tooltip={tooltip}
-            {...props}
-        >
             {onlyKnownUsers && (
                 <span className="mx_FacePile_summary">
                     {_t("%(count)s people you know have already joined", { count: members.length })}

src/components/views/location/Marker.tsx

@@ -78,8 +78,7 @@ const Marker = React.forwardRef<HTMLDivElement, Props>(({ id, roomMember, useMem
                     {roomMember ? (
                         <MemberAvatar
                             member={roomMember}
-                            width={36}
+                            size="36px"
-                            height={36}
                             viewUserOnClick={false}
                             // no mxid on hover when marker has tooltip
                             hideTitle={!!tooltip}

src/components/views/location/ShareType.tsx

@@ -31,8 +31,8 @@ const UserAvatar: React.FC = () => {
     const userId = matrixClient.getSafeUserId();
     const displayName = OwnProfileStore.instance.displayName ?? undefined;
     // 40 - 2px border
-    const avatarSize = 36;
+    const avatarSize = "36px";
-    const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize) ?? undefined;
+    const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(parseInt(avatarSize, 10)) ?? undefined;
 
     return (
         <div className={`mx_ShareType_option-icon ${LocationShareType.Own}`}>
@@ -40,9 +40,7 @@ const UserAvatar: React.FC = () => {
                 idName={userId}
                 name={displayName}
                 url={avatarUrl}
-                width={avatarSize}
+                size={avatarSize}
-                height={avatarSize}
-                resizeMethod="crop"
                 className="mx_UserMenu_userAvatar_BaseAvatar"
             />
         </div>

src/components/views/messages/CallEvent.tsx

@@ -62,8 +62,7 @@ const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
                         member={mxEvent.sender}
                         fallbackUserId={mxEvent.getSender()}
                         viewUserOnClick
-                        width={24}
+                        size="24px"
-                        height={24}
                     />
                     <div className="mx_CallEvent_columns">
                         <div className="mx_CallEvent_details">
@@ -76,7 +75,7 @@ const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
                                 active={false}
                                 participantCount={participatingMembers.length}
                             />
-                            <FacePile members={facePileMembers} faceSize={24} overflow={facePileOverflow} />
+                            <FacePile members={facePileMembers} size="24px" overflow={facePileOverflow} />
                         </div>
                         {call && <GroupCallDuration groupCall={call.groupCall} />}
                         <AccessibleTooltipButton

src/components/views/messages/LegacyCallEvent.tsx

@@ -290,7 +290,7 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
                 <div className={className}>
                     {silenceIcon}
                     <div className="mx_LegacyCallEvent_info">
-                        <MemberAvatar member={event.sender} width={32} height={32} />
+                        <MemberAvatar member={event.sender} size="32px" />
                         <div className="mx_LegacyCallEvent_info_basic">
                             <div className="mx_LegacyCallEvent_sender">{sender}</div>
                             <div className="mx_LegacyCallEvent_type">

src/components/views/messages/RoomAvatarEvent.tsx

@@ -82,7 +82,7 @@ export default class RoomAvatarEvent extends React.Component<IProps> {
                                 className="mx_RoomAvatarEvent_avatar"
                                 onClick={this.onAvatarClick}
                             >
-                                <RoomAvatar width={14} height={14} oobData={oobData} />
+                                <RoomAvatar size="14px" oobData={oobData} />
                             </AccessibleButton>
                         ),
                     },

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -186,7 +186,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
                 forceHide={!(isPinned || isMaximised)}
                 disabled={isPinned || isMaximised}
             >
-                <WidgetAvatar app={app} />
+                <WidgetAvatar app={app} size="20px" />
                 <span>{name}</span>
                 {subtitle}
             </AccessibleTooltipButton>
@@ -307,7 +307,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose })
     const header = (
         <React.Fragment>
             <div className="mx_RoomSummaryCard_avatar" role="presentation">
-                <RoomAvatar room={room} height={54} width={54} viewAvatarOnClick />
+                <RoomAvatar room={room} size="54px" viewAvatarOnClick />
                 <TextWithTooltip
                     tooltip={isRoomEncrypted ? _t("Encrypted") : _t("Not encrypted")}
                     class={classNames("mx_RoomSummaryCard_e2ee", {

src/components/views/right_panel/UserInfo.tsx

@@ -68,7 +68,6 @@ import ConfirmUserActionDialog from "../dialogs/ConfirmUserActionDialog";
 import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
 import { mediaFromMxc } from "../../../customisations/Media";
-import UIStore from "../../../stores/UIStore";
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import ConfirmSpaceUserActionDialog from "../dialogs/ConfirmSpaceUserActionDialog";
 import { bulkSpaceBehaviour } from "../../../utils/space";
@@ -1579,8 +1578,7 @@ export const UserInfoHeader: React.FC<{
                     <MemberAvatar
                         key={member.userId} // to instantly blank the avatar when UserInfo changes members
                         member={member as RoomMember}
-                        width={2 * 0.3 * UIStore.instance.windowHeight} // 2x@30vh
+                        size="30vh" // 2x@30vh
-                        height={2 * 0.3 * UIStore.instance.windowHeight} // 2x@30vh
                         resizeMethod="scale"
                         fallbackUserId={member.userId}
                         onClick={onMemberAvatarClick}
@@ -1724,7 +1722,7 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
     if (room?.isSpaceRoom()) {
         scopeHeader = (
             <div data-testid="space-header" className="mx_RightPanel_scopeHeader">
-                <RoomAvatar room={room} height={32} width={32} />
+                <RoomAvatar room={room} size="32px" />
                 <RoomName room={room} />
             </div>
         );

src/components/views/rooms/EntityTile.tsx

@@ -184,9 +184,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
             e2eIcon = <E2EIcon status={e2eStatus} isUser={true} bordered={true} />;
         }
 
-        const av = this.props.avatarJsx || (
+        const av = this.props.avatarJsx || <BaseAvatar name={this.props.name} size="36px" aria-hidden="true" />;
-            <BaseAvatar name={this.props.name} width={36} height={36} aria-hidden="true" />
-        );
 
         // The wrapping div is required to make the magic mouse listener work, for some reason.
         return (

src/components/views/rooms/EventTile.tsx

@@ -1006,28 +1006,28 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
 
         let avatar: JSX.Element | null = null;
         let sender: JSX.Element | null = null;
-        let avatarSize: number;
+        let avatarSize: string;
         let needsSenderProfile: boolean;
 
         if (isRenderingNotification) {
-            avatarSize = 24;
+            avatarSize = "24px";
             needsSenderProfile = true;
         } else if (isInfoMessage) {
             // a small avatar, with no sender profile, for
             // joins/parts/etc
-            avatarSize = 14;
+            avatarSize = "14px";
             needsSenderProfile = false;
         } else if (
             this.context.timelineRenderingType === TimelineRenderingType.ThreadsList ||
             (this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation)
         ) {
-            avatarSize = 32;
+            avatarSize = "32px";
             needsSenderProfile = true;
         } else if (eventType === EventType.RoomCreate || isBubbleMessage) {
-            avatarSize = 0;
+            avatarSize = "0";
             needsSenderProfile = false;
         } else if (this.props.layout == Layout.IRC) {
-            avatarSize = 14;
+            avatarSize = "14px";
             needsSenderProfile = true;
         } else if (
             (this.props.continuation && this.context.timelineRenderingType !== TimelineRenderingType.File) ||
@@ -1035,10 +1035,10 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             ElementCall.CALL_EVENT_TYPE.matches(eventType)
         ) {
             // no avatar or sender profile for continuation messages and call tiles
-            avatarSize = 0;
+            avatarSize = "0";
             needsSenderProfile = false;
         } else {
-            avatarSize = 30;
+            avatarSize = "30px";
             needsSenderProfile = true;
         }
 
@@ -1062,8 +1062,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                 <div className="mx_EventTile_avatar">
                     <MemberAvatar
                         member={member}
-                        width={avatarSize}
+                        size={avatarSize}
-                        height={avatarSize}
                         viewUserOnClick={viewUserOnClick}
                         forceHistorical={this.props.mxEvent.getType() === EventType.RoomMember}
                     />
@@ -1309,7 +1308,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                         </div>
                         {isRenderingNotification && room ? (
                             <div className="mx_EventTile_avatar">
-                                <RoomAvatar room={room} width={28} height={28} />
+                                <RoomAvatar room={room} size="28px" />
                             </div>
                         ) : (
                             avatar

src/components/views/rooms/LegacyRoomHeader.tsx

@@ -729,7 +729,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
             roomAvatar = (
                 <DecoratedRoomAvatar
                     room={this.props.room}
-                    avatarSize={24}
+                    size="24px"
                     oobData={this.props.oobData}
                     viewAvatarOnClick={true}
                 />

src/components/views/rooms/MemberList.tsx

@@ -241,12 +241,7 @@ export default class MemberList extends React.Component<IProps, IState> {
             <EntityTile
                 className="mx_EntityTile_ellipsis"
                 avatarJsx={
-                    <BaseAvatar
+                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." size="36px" />
-                        url={require("../../../../res/img/ellipsis.svg").default}
-                        name="..."
-                        width={36}
-                        height={36}
-                    />
                 }
                 name={text}
                 presenceState="online"
@@ -412,7 +407,7 @@ export default class MemberList extends React.Component<IProps, IState> {
         if (room?.isSpaceRoom()) {
             scopeHeader = (
                 <div className="mx_RightPanel_scopeHeader">
-                    <RoomAvatar room={room} height={32} width={32} />
+                    <RoomAvatar room={room} size="32px" />
                     <RoomName room={room} />
                 </div>
             );

src/components/views/rooms/MemberTile.tsx

@@ -186,7 +186,7 @@ export default class MemberTile extends React.Component<IProps, IState> {
         const name = this.getDisplayName();
         const presenceState = member.user?.presence as PresenceState | undefined;
 
-        const av = <MemberAvatar member={member} width={36} height={36} aria-hidden="true" />;
+        const av = <MemberAvatar member={member} size="36px" aria-hidden="true" />;
 
         if (member.user) {
             this.userLastModifiedTime = member.user.getLastModifiedTime();

src/components/views/rooms/NewRoomIntro.tsx

@@ -87,8 +87,7 @@ const NewRoomIntro: React.FC = () => {
             <React.Fragment>
                 <RoomAvatar
                     room={room}
-                    width={AVATAR_SIZE}
+                    size={AVATAR_SIZE}
-                    height={AVATAR_SIZE}
                     onClick={() => {
                         defaultDispatcher.dispatch<ViewUserPayload>({
                             action: Action.ViewUser,
@@ -223,9 +222,7 @@ const NewRoomIntro: React.FC = () => {
         }
 
         const avatarUrl = room.currentState.getStateEvents(EventType.RoomAvatar, "")?.getContent()?.url;
-        let avatar = (
+        let avatar = <RoomAvatar room={room} size={AVATAR_SIZE} viewAvatarOnClick={!!avatarUrl} />;
-            <RoomAvatar room={room} width={AVATAR_SIZE} height={AVATAR_SIZE} viewAvatarOnClick={!!avatarUrl} />
-        );
 
         if (!avatarUrl) {
             avatar = (

src/components/views/rooms/PinnedEventTile.tsx

@@ -37,7 +37,7 @@ interface IProps {
     onUnpinClicked?(): void;
 }
 
-const AVATAR_SIZE = 24;
+const AVATAR_SIZE = "24px";
 
 export default class PinnedEventTile extends React.Component<IProps> {
     public static contextType = MatrixClientContext;
@@ -89,8 +89,7 @@ export default class PinnedEventTile extends React.Component<IProps> {
                 <MemberAvatar
                     className="mx_PinnedEventTile_senderAvatar"
                     member={this.props.event.sender}
-                    width={AVATAR_SIZE}
+                    size={AVATAR_SIZE}
-                    height={AVATAR_SIZE}
                     fallbackUserId={sender}
                 />
 

src/components/views/rooms/ReadReceiptGroup.tsx

@@ -272,8 +272,7 @@ function ReadReceiptPerson({
             <MemberAvatar
                 member={roomMember}
                 fallbackUserId={userId}
-                width={24}
+                size="24px"
-                height={24}
                 aria-hidden="true"
                 aria-live="off"
                 resizeMethod="crop"

src/components/views/rooms/ReadReceiptMarker.tsx

@@ -214,9 +214,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
                     fallbackUserId={this.props.fallbackUserId}
                     aria-hidden="true"
                     aria-live="off"
-                    width={14}
+                    size="14px"
-                    height={14}
-                    resizeMethod="crop"
                     style={style}
                     inputRef={this.avatar as RefObject<HTMLImageElement>}
                     hideTitle

src/components/views/rooms/ReplyTile.tsx

@@ -143,7 +143,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
         if (!hasOwnSender) {
             sender = (
                 <div className="mx_ReplyTile_sender">
-                    <MemberAvatar member={mxEvent.sender} fallbackUserId={mxEvent.getSender()} width={16} height={16} />
+                    <MemberAvatar member={mxEvent.sender} fallbackUserId={mxEvent.getSender()} size="16px" />
                     <SenderProfile mxEvent={mxEvent} />
                 </div>
             );

src/components/views/rooms/RoomBreadcrumbs.tsx

@@ -59,7 +59,7 @@ const RoomBreadcrumbTile: React.FC<{ room: Room; onClick: (ev: ButtonEvent) => v
         >
             <DecoratedRoomAvatar
                 room={room}
-                avatarSize={32}
+                size="32px"
                 displayBadge={true}
                 forceCount={true}
                 tooltipProps={{ tabIndex: isActive ? 0 : -1 }}

src/components/views/rooms/RoomHeader.tsx

@@ -113,15 +113,20 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
     const globalNotificationState = useGlobalNotificationState();
 
     return (
-        <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
+        <Flex
-            <DecoratedRoomAvatar room={room} avatarSize={40} displayBadge={false} />
+            as="header"
-            <Box
+            align="center"
-                flex="1"
+            gap="var(--cpd-space-3x)"
-                className="mx_RoomHeader_info"
+            className="mx_RoomHeader light-panel"
-                onClick={() => {
+            onClick={() => {
-                    showOrHidePanel(RightPanelPhases.RoomSummary);
+                const rightPanel = RightPanelStore.instance;
-                }}
+                rightPanel.isOpen
-            >
+                    ? rightPanel.togglePanel(null)
+                    : rightPanel.setCard({ phase: RightPanelPhases.RoomSummary });
+            }}
+        >
+            <DecoratedRoomAvatar room={room} size="40px" displayBadge={false} />
+            <Box flex="1" className="mx_RoomHeader_info">
                 <BodyText
                     as="div"
                     size="lg"

src/components/views/rooms/RoomList.tsx

@@ -564,9 +564,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                         name,
                         avatarUrl: room.avatar_url,
                     }}
-                    width={32}
+                    size="32px"
-                    height={32}
-                    resizeMethod="crop"
                 />
             );
             const viewRoom = (ev: SyntheticEvent): void => {

src/components/views/rooms/RoomPreviewCard.tsx

@@ -95,7 +95,7 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
 
             inviterSection = (
                 <div className="mx_RoomPreviewCard_inviter">
-                    <MemberAvatar member={inviter} fallbackUserId={inviteSender} width={32} height={32} />
+                    <MemberAvatar member={inviter} fallbackUserId={inviteSender} size="32px" />
                     <div>
                         <div className="mx_RoomPreviewCard_inviter_name">
                             {_t(
@@ -160,15 +160,15 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
     if (isVideoRoom) {
         avatarRow = (
             <>
-                <RoomAvatar room={room} height={50} width={50} viewAvatarOnClick />
+                <RoomAvatar room={room} size="50px" viewAvatarOnClick />
                 <div className="mx_RoomPreviewCard_video" />
                 <BetaPill onClick={viewLabs} tooltipTitle={_t("Video rooms are a beta feature")} />
             </>
         );
     } else if (room.isSpaceRoom()) {
-        avatarRow = <RoomAvatar room={room} height={80} width={80} viewAvatarOnClick />;
+        avatarRow = <RoomAvatar room={room} size="80px" viewAvatarOnClick />;
     } else {
-        avatarRow = <RoomAvatar room={room} height={50} width={50} viewAvatarOnClick />;
+        avatarRow = <RoomAvatar room={room} size="50px" viewAvatarOnClick />;
     }
 
     let notice: string | null = null;

src/components/views/rooms/RoomTile.tsx

@@ -479,7 +479,7 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
                         >
                             <DecoratedRoomAvatar
                                 room={this.props.room}
-                                avatarSize={32}
+                                size="32px"
                                 displayBadge={this.props.isMinimized}
                                 tooltipProps={{ tabIndex: isActive ? 0 : -1 }}
                             />

src/components/views/rooms/ThirdPartyMemberInfo.tsx

@@ -134,7 +134,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
         if (this.room?.isSpaceRoom()) {
             scopeHeader = (
                 <div className="mx_RightPanel_scopeHeader">
-                    <RoomAvatar room={this.room} height={32} width={32} />
+                    <RoomAvatar room={this.room} size="32px" />
                     <RoomName room={this.room} />
                 </div>
             );

src/components/views/rooms/ThreadSummary.tsx

@@ -101,8 +101,7 @@ export const ThreadMessagePreview: React.FC<IPreviewProps> = ({ thread, showDisp
             <MemberAvatar
                 member={lastReply.sender}
                 fallbackUserId={lastReply.getSender()}
-                width={24}
+                size="24px"
-                height={24}
                 className="mx_ThreadSummary_avatar"
             />
             {showDisplayname && (

src/components/views/rooms/WhoIsTypingTile.tsx

@@ -177,8 +177,7 @@ export default class WhoIsTypingTile extends React.Component<IProps, IState> {
                 <MemberAvatar
                     key={u.userId}
                     member={u}
-                    width={24}
+                    size="24px"
-                    height={24}
                     resizeMethod="crop"
                     viewUserOnClick={true}
                     aria-live="off"

src/components/views/settings/BridgeTile.tsx

@@ -133,9 +133,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
             networkIcon = (
                 <BaseAvatar
                     className="mx_RoomSettingsDialog_protocolIcon"
-                    width={48}
+                    size="48px"
-                    height={48}
-                    resizeMethod="crop"
                     name={protocolName}
                     idName={protocolName}
                     url={avatarUrl}

src/components/views/settings/JoinRuleSettings.tsx

@@ -253,7 +253,7 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
                         {shownSpaces.map((room) => {
                             return (
                                 <span key={room.roomId}>
-                                    <RoomAvatar room={room} height={32} width={32} />
+                                    <RoomAvatar room={room} size="32px" />
                                     {room.name}
                                 </span>
                             );

src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx

@@ -82,7 +82,7 @@ const Knock: VFC<{
 
     return (
         <div className="mx_PeopleRoomSettingsTab_knock">
-            <MemberAvatar height={42} member={roomMember} width={42} />
+            <MemberAvatar member={roomMember} size="42px" />
             <div className="mx_PeopleRoomSettingsTab_content">
                 <span className="mx_PeopleRoomSettingsTab_name">{roomMember.name}</span>
                 <Timestamp roomMember={roomMember} />

src/components/views/spaces/SpacePanel.tsx

@@ -119,7 +119,7 @@ interface IMetaSpaceButtonProps extends ComponentProps<typeof SpaceButton> {
 
 type MetaSpaceButtonProps = Pick<IMetaSpaceButtonProps, "selected" | "isPanelCollapsed">;
 
-const MetaSpaceButton: React.FC<IMetaSpaceButtonProps> = ({ selected, isPanelCollapsed, ...props }) => {
+const MetaSpaceButton: React.FC<IMetaSpaceButtonProps> = ({ selected, isPanelCollapsed, size = "32px", ...props }) => {
     return (
         <li
             className={classNames("mx_SpaceItem", {
@@ -128,7 +128,7 @@ const MetaSpaceButton: React.FC<IMetaSpaceButtonProps> = ({ selected, isPanelCol
             role="treeitem"
             aria-selected={selected}
         >
-            <SpaceButton {...props} selected={selected} isNarrow={isPanelCollapsed} />
+            <SpaceButton {...props} selected={selected} isNarrow={isPanelCollapsed} size={size} />
         </li>
     );
 };
@@ -160,6 +160,7 @@ const HomeButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollapsed
             notificationState={notificationState}
             ContextMenuComponent={HomeButtonContextMenu}
             contextMenuTooltip={_t("common|options")}
+            size="32px"
         />
     );
 };
@@ -173,6 +174,7 @@ const FavouritesButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCol
             isPanelCollapsed={isPanelCollapsed}
             label={getMetaSpaceName(MetaSpace.Favourites)}
             notificationState={SpaceStore.instance.getNotificationState(MetaSpace.Favourites)}
+            size="32px"
         />
     );
 };
@@ -186,6 +188,7 @@ const PeopleButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollaps
             isPanelCollapsed={isPanelCollapsed}
             label={getMetaSpaceName(MetaSpace.People)}
             notificationState={SpaceStore.instance.getNotificationState(MetaSpace.People)}
+            size="32px"
         />
     );
 };
@@ -199,6 +202,7 @@ const OrphansButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollap
             isPanelCollapsed={isPanelCollapsed}
             label={getMetaSpaceName(MetaSpace.Orphans)}
             notificationState={SpaceStore.instance.getNotificationState(MetaSpace.Orphans)}
+            size="32px"
         />
     );
 };
@@ -244,6 +248,7 @@ const CreateSpaceButton: React.FC<Pick<IInnerSpacePanelProps, "isPanelCollapsed"
                 onClick={onNewClick}
                 isNarrow={isPanelCollapsed}
                 innerRef={handle}
+                size="32px"
             />
 
             {contextMenu}

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -48,7 +48,7 @@ import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 
-interface IButtonProps extends Omit<ComponentProps<typeof AccessibleTooltipButton>, "title" | "onClick"> {
+interface IButtonProps extends Omit<ComponentProps<typeof AccessibleTooltipButton>, "title" | "onClick" | "size"> {
     space?: Room;
     spaceKey?: SpaceKey;
     className?: string;
@@ -57,7 +57,7 @@ interface IButtonProps extends Omit<ComponentProps<typeof AccessibleTooltipButto
     contextMenuTooltip?: string;
     notificationState?: NotificationState;
     isNarrow?: boolean;
-    avatarSize?: number;
+    size: string;
     innerRef?: RefObject<HTMLElement>;
     ContextMenuComponent?: ComponentType<ComponentProps<typeof SpaceContextMenu>>;
     onClick?(ev?: ButtonEvent): void;
@@ -71,7 +71,7 @@ export const SpaceButton: React.FC<IButtonProps> = ({
     label,
     contextMenuTooltip,
     notificationState,
-    avatarSize,
+    size,
     isNarrow,
     children,
     innerRef,
@@ -90,7 +90,7 @@ export const SpaceButton: React.FC<IButtonProps> = ({
         </div>
     );
     if (space) {
-        avatar = <RoomAvatar width={avatarSize} height={avatarSize} room={space} />;
+        avatar = <RoomAvatar size={size} room={space} type="square" />;
     }
 
     let notifBadge;
@@ -374,7 +374,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                     contextMenuTooltip={_t("Space options")}
                     notificationState={notificationState}
                     isNarrow={isPanelCollapsed}
-                    avatarSize={isNested ? 24 : 32}
+                    size={isNested ? "24px" : "32px"}
                     onKeyDown={this.onKeyDown}
                     ContextMenuComponent={this.props.space.getMyMembership() === "join" ? SpaceContextMenu : undefined}
                 >

src/components/views/voip/CallView.tsx

@@ -246,7 +246,7 @@ export const Lobby: FC<LobbyProps> = ({ room, joinCallButtonDisabledTooltip, con
         <div className="mx_CallView_lobby">
             {children}
             <div className="mx_CallView_preview">
-                <MemberAvatar key={me.userId} member={me} width={200} height={200} resizeMethod="scale" />
+                <MemberAvatar key={me.userId} member={me} size="200px" resizeMethod="scale" />
                 <video
                     ref={videoRef}
                     style={{ visibility: videoMuted ? "hidden" : undefined }}
@@ -398,7 +398,7 @@ const JoinCallView: FC<JoinCallViewProps> = ({ room, resizing, call }) => {
             facePile = (
                 <div className="mx_CallView_participants">
                     {_t("%(count)s people joined", { count: members.length })}
-                    <FacePile members={shownMembers} faceSize={24} overflow={overflow} />
+                    <FacePile members={shownMembers} size="24px" overflow={overflow} />
                 </div>
             );
         }

src/components/views/voip/LegacyCallView.tsx

@@ -420,7 +420,7 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
 
         const callRoomId = LegacyCallHandler.instance.roomIdForCall(call);
         const callRoom = (callRoomId ? MatrixClientPeg.safeGet().getRoom(callRoomId) : undefined) ?? undefined;
-        const avatarSize = pipMode ? 76 : 160;
+        const avatarSize = pipMode ? "76px" : "160px";
         const transfereeCall = LegacyCallHandler.instance.getTransfereeForCallId(call.callId);
         const isOnHold = isLocalOnHold || isRemoteOnHold;
 
@@ -507,7 +507,7 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
                             className="mx_LegacyCallView_avatarContainer"
                             style={{ width: avatarSize, height: avatarSize }}
                         >
-                            <RoomAvatar room={callRoom} height={avatarSize} width={avatarSize} />
+                            <RoomAvatar room={callRoom} size={avatarSize} />
                         </div>
                     </div>
                     <div className="mx_LegacyCallView_status">{_t("Connecting")}</div>

src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx

@@ -62,7 +62,7 @@ interface ISecondaryCallInfoProps {
 const SecondaryCallInfo: React.FC<ISecondaryCallInfoProps> = ({ callRoom }) => {
     return (
         <span className="mx_LegacyCallViewHeader_secondaryCallInfo">
-            <RoomAvatar room={callRoom} height={16} width={16} />
+            <RoomAvatar room={callRoom} size="16px" />
             <span className="mx_LegacyCallView_secondaryCall_roomName">
                 {_t("%(name)s on hold", { name: callRoom.name })}
             </span>
@@ -101,7 +101,7 @@ const LegacyCallViewHeader: React.FC<LegacyCallViewHeaderProps> = ({
     }
     return (
         <div className="mx_LegacyCallViewHeader mx_LegacyCallViewHeader_pip" onMouseDown={onPipMouseDown}>
-            <RoomAvatar room={callRoom} height={32} width={32} />
+            <RoomAvatar room={callRoom} size="32px" />
             <div className="mx_LegacyCallViewHeader_callInfo">
                 <div className="mx_LegacyCallViewHeader_roomName">{callRoomName}</div>
                 {onHoldCallRoom && <SecondaryCallInfo callRoom={onHoldCallRoom} />}

src/components/views/voip/VideoFeed.tsx

@@ -203,12 +203,12 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
             const callRoom = (callRoomId ? MatrixClientPeg.safeGet().getRoom(callRoomId) : undefined) ?? undefined;
 
             let avatarSize;
-            if (pipMode && primary) avatarSize = 76;
+            if (pipMode && primary) avatarSize = "76px";
-            else if (pipMode && !primary) avatarSize = 16;
+            else if (pipMode && !primary) avatarSize = "16px";
-            else if (!pipMode && primary) avatarSize = 160;
+            else if (!pipMode && primary) avatarSize = "160px";
             else; // TBD
 
-            content = <RoomAvatar room={callRoom} height={avatarSize} width={avatarSize} />;
+            content = <RoomAvatar room={callRoom} size={avatarSize} />;
         } else {
             const videoClasses = classnames("mx_VideoFeed_video", {
                 mx_VideoFeed_video_mirror:

src/toasts/IncomingCallToast.tsx

@@ -130,7 +130,7 @@ export function IncomingCallToast({ callEvent }: Props): JSX.Element {
 
     return (
         <React.Fragment>
-            <RoomAvatar room={room ?? undefined} height={24} width={24} />
+            <RoomAvatar room={room ?? undefined} size="24px" />
             <div className="mx_IncomingCallToast_content">
                 <div className="mx_IncomingCallToast_info">
                     <span className="mx_IncomingCallToast_room">{room ? room.name : _t("Unknown room")}</span>

src/toasts/IncomingLegacyCallToast.tsx

@@ -112,7 +112,7 @@ export default class IncomingLegacyCallToast extends React.Component<IProps, ISt
 
         return (
             <React.Fragment>
-                <RoomAvatar room={room ?? undefined} height={32} width={32} />
+                <RoomAvatar room={room ?? undefined} size="32px" />
                 <div className={contentClass}>
                     <span className="mx_LegacyCallEvent_caller">{room ? room.name : _t("Unknown caller")}</span>
                     <div className="mx_LegacyCallEvent_type">

src/utils/exportUtils/HtmlExport.tsx

@@ -76,14 +76,7 @@ export default class HTMLExporter extends Exporter {
             }
         }
         const avatar = (
-            <BaseAvatar
+            <BaseAvatar size="32px" name={this.room.name} title={this.room.name} url={blob ? avatarPath : ""} />
-                width={32}
-                height={32}
-                name={this.room.name}
-                title={this.room.name}
-                url={blob ? avatarPath : ""}
-                resizeMethod="crop"
-            />
         );
         return renderToStaticMarkup(avatar);
     }

src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx

@@ -113,7 +113,7 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
         });
     };
 
-    let roomAvatar = <RoomAvatar room={room} width={32} height={32} />;
+    let roomAvatar = <RoomAvatar room={room} size="32px" />;
     let roomName = (
         <div className="mx_VoiceBroadcastHeader_room_wrapper">
             <div className="mx_VoiceBroadcastHeader_room">{room.name}</div>

test/components/structures/__snapshots__/MessagePanel-test.tsx.snap

@@ -95,26 +95,15 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
                 class="mx_GenericEventListSummary_avatars"
               >
                 <span
-                  class="mx_BaseAvatar"
+                  class="_avatar_i91o9_17 mx_BaseAvatar"
+                  data-color="7"
+                  data-testid="avatar-img"
+                  data-type="round"
                   role="presentation"
+                  style="--cpd-avatar-size: 14px;"
+                  title="@user:id"
                 >
-                  <span
+                  u
-                    aria-hidden="true"
-                    class="mx_BaseAvatar_initial"
-                    style="font-size: 9.1px; width: 14px; line-height: 14px;"
-                  >
-                    U
-                  </span>
-                  <img
-                    alt=""
-                    aria-hidden="true"
-                    class="mx_BaseAvatar_image"
-                    data-testid="avatar-img"
-                    loading="lazy"
-                    src="data:image/png;base64,00"
-                    style="width: 14px; height: 14px;"
-                    title="@user:id"
-                  />
                 </span>
               </span>
               <span

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

@@ -18,25 +18,14 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="mx_BaseAvatar"
+              class="_avatar_i91o9_17 mx_BaseAvatar"
+              data-color="3"
+              data-testid="avatar-img"
+              data-type="round"
               role="presentation"
+              style="--cpd-avatar-size: 24px;"
             >
-              <span
+              u
-                aria-hidden="true"
-                class="mx_BaseAvatar_initial"
-                style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
-              >
-                U
-              </span>
-              <img
-                alt=""
-                aria-hidden="true"
-                class="mx_BaseAvatar_image"
-                data-testid="avatar-img"
-                loading="lazy"
-                src="data:image/png;base64,00"
-                style="width: 24px; height: 24px;"
-              />
             </span>
           </div>
         </div>
@@ -111,25 +100,14 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="mx_BaseAvatar"
+              class="_avatar_i91o9_17 mx_BaseAvatar"
+              data-color="3"
+              data-testid="avatar-img"
+              data-type="round"
               role="presentation"
+              style="--cpd-avatar-size: 24px;"
             >
-              <span
+              u
-                aria-hidden="true"
-                class="mx_BaseAvatar_initial"
-                style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
-              >
-                U
-              </span>
-              <img
-                alt=""
-                aria-hidden="true"
-                class="mx_BaseAvatar_image"
-                data-testid="avatar-img"
-                loading="lazy"
-                src="data:image/png;base64,00"
-                style="width: 24px; height: 24px;"
-              />
             </span>
           </div>
         </div>
@@ -198,30 +176,18 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
                     </span>
                   </div>
                 </div>
-                <span
+                <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="mx_AccessibleButton mx_BaseAvatar"
+                  class="_avatar_i91o9_17 mx_BaseAvatar"
+                  data-color="3"
+                  data-testid="avatar-img"
+                  data-type="round"
                   role="button"
-                  tabindex="0"
+                  style="--cpd-avatar-size: 52px;"
                 >
-                  <span
+                  u
-                    aria-hidden="true"
+                </button>
-                    class="mx_BaseAvatar_initial"
-                    style="font-size: 33.800000000000004px; width: 52px; line-height: 52px;"
-                  >
-                    U
-                  </span>
-                  <img
-                    alt=""
-                    aria-hidden="true"
-                    class="mx_BaseAvatar_image"
-                    data-testid="avatar-img"
-                    loading="lazy"
-                    src="data:image/png;base64,00"
-                    style="width: 52px; height: 52px;"
-                  />
-                </span>
                 <h2>
                   @user:example.com
                 </h2>
@@ -301,25 +267,14 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="mx_BaseAvatar"
+              class="_avatar_i91o9_17 mx_BaseAvatar"
+              data-color="3"
+              data-testid="avatar-img"
+              data-type="round"
               role="presentation"
+              style="--cpd-avatar-size: 24px;"
             >
-              <span
+              u
-                aria-hidden="true"
-                class="mx_BaseAvatar_initial"
-                style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
-              >
-                U
-              </span>
-              <img
-                alt=""
-                aria-hidden="true"
-                class="mx_BaseAvatar_image"
-                data-testid="avatar-img"
-                loading="lazy"
-                src="data:image/png;base64,00"
-                style="width: 24px; height: 24px;"
-              />
             </span>
           </div>
         </div>
@@ -388,30 +343,18 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                     </span>
                   </div>
                 </div>
-                <span
+                <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="mx_AccessibleButton mx_BaseAvatar"
+                  class="_avatar_i91o9_17 mx_BaseAvatar"
+                  data-color="3"
+                  data-testid="avatar-img"
+                  data-type="round"
                   role="button"
-                  tabindex="0"
+                  style="--cpd-avatar-size: 52px;"
                 >
-                  <span
+                  u
-                    aria-hidden="true"
+                </button>
-                    class="mx_BaseAvatar_initial"
-                    style="font-size: 33.800000000000004px; width: 52px; line-height: 52px;"
-                  >
-                    U
-                  </span>
-                  <img
-                    alt=""
-                    aria-hidden="true"
-                    class="mx_BaseAvatar_image"
-                    data-testid="avatar-img"
-                    loading="lazy"
-                    src="data:image/png;base64,00"
-                    style="width: 52px; height: 52px;"
-                  />
-                </span>
                 <h2>
                   @user:example.com
                 </h2>
@@ -566,25 +509,14 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="mx_BaseAvatar"
+              class="_avatar_i91o9_17 mx_BaseAvatar"
+              data-color="3"
+              data-testid="avatar-img"
+              data-type="round"
               role="presentation"
+              style="--cpd-avatar-size: 24px;"
             >
-              <span
+              u
-                aria-hidden="true"
-                class="mx_BaseAvatar_initial"
-                style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
-              >
-                U
-              </span>
-              <img
-                alt=""
-                aria-hidden="true"
-                class="mx_BaseAvatar_image"
-                data-testid="avatar-img"
-                loading="lazy"
-                src="data:image/png;base64,00"
-                style="width: 24px; height: 24px;"
-              />
             </span>
           </div>
         </div>
@@ -652,30 +584,18 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
               <li
                 class="mx_NewRoomIntro"
               >
-                <span
+                <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="mx_AccessibleButton mx_BaseAvatar"
+                  class="_avatar_i91o9_17 mx_BaseAvatar"
+                  data-color="3"
+                  data-testid="avatar-img"
+                  data-type="round"
                   role="button"
-                  tabindex="0"
+                  style="--cpd-avatar-size: 52px;"
                 >
-                  <span
+                  u
-                    aria-hidden="true"
+                </button>
-                    class="mx_BaseAvatar_initial"
-                    style="font-size: 33.800000000000004px; width: 52px; line-height: 52px;"
-                  >
-                    U
-                  </span>
-                  <img
-                    alt=""
-                    aria-hidden="true"
-                    class="mx_BaseAvatar_image"
-                    data-testid="avatar-img"
-                    loading="lazy"
-                    src="data:image/png;base64,00"
-                    style="width: 52px; height: 52px;"
-                  />
-                </span>
                 <h2>
                   @user:example.com
                 </h2>

test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap

@@ -71,25 +71,14 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="mx_BaseAvatar"
+              class="_avatar_i91o9_17 mx_BaseAvatar"
+              data-color="7"
+              data-testid="avatar-img"
+              data-type="round"
               role="presentation"
+              style="--cpd-avatar-size: 20px;"
             >
-              <span
+              U
-                aria-hidden="true"
-                class="mx_BaseAvatar_initial"
-                style="font-size: 13px; width: 20px; line-height: 20px;"
-              >
-                U
-              </span>
-              <img
-                alt=""
-                aria-hidden="true"
-                class="mx_BaseAvatar_image"
-                data-testid="avatar-img"
-                loading="lazy"
-                src="data:image/png;base64,00"
-                style="width: 20px; height: 20px;"
-              />
             </span>
           </div>
           <div
@@ -152,25 +141,14 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="mx_BaseAvatar"
+              class="_avatar_i91o9_17 mx_BaseAvatar"
+              data-color="8"
+              data-testid="avatar-img"
+              data-type="round"
               role="presentation"
+              style="--cpd-avatar-size: 20px;"
             >
-              <span
+              U
-                aria-hidden="true"
-                class="mx_BaseAvatar_initial"
-                style="font-size: 13px; width: 20px; line-height: 20px;"
-              >
-                U
-              </span>
-              <img
-                alt=""
-                aria-hidden="true"
-                class="mx_BaseAvatar_image"
-                data-testid="avatar-img"
-                loading="lazy"
-                src="data:image/png;base64,00"
-                style="width: 20px; height: 20px;"
-              />
             </span>
           </div>
           <div
@@ -234,25 +212,14 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="mx_BaseAvatar"
+              class="_avatar_i91o9_17 mx_BaseAvatar"
+              data-color="8"
+              data-testid="avatar-img"
+              data-type="round"
               role="presentation"
+              style="--cpd-avatar-size: 20px;"
             >
-              <span
+              N
-                aria-hidden="true"
-                class="mx_BaseAvatar_initial"
-                style="font-size: 13px; width: 20px; line-height: 20px;"
-              >
-                N
-              </span>
-              <img
-                alt=""
-                aria-hidden="true"
-                class="mx_BaseAvatar_image"
-                data-testid="avatar-img"
-                loading="lazy"
-                src="data:image/png;base64,00"
-                style="width: 20px; height: 20px;"
-              />
             </span>
           </div>
           <div
@@ -322,25 +289,14 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="mx_BaseAvatar"
+              class="_avatar_i91o9_17 mx_BaseAvatar"
+              data-color="2"
+              data-testid="avatar-img"
+              data-type="round"
               role="presentation"
+              style="--cpd-avatar-size: 20px;"
             >
-              <span
+              N
-                aria-hidden="true"
-                class="mx_BaseAvatar_initial"
-                style="font-size: 13px; width: 20px; line-height: 20px;"
-              >
-                N
-              </span>
-              <img
-                alt=""
-                aria-hidden="true"
-                class="mx_BaseAvatar_image"
-                data-testid="avatar-img"
-                loading="lazy"
-                src="data:image/png;base64,00"
-                style="width: 20px; height: 20px;"
-              />
             </span>
           </div>
           <div

test/components/structures/__snapshots__/UserMenu-test.tsx.snap

@@ -18,25 +18,14 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
         class="mx_UserMenu_userAvatar"
       >
         <span
-          class="mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar"
+          class="_avatar_i91o9_17 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar"
+          data-color="2"
+          data-testid="avatar-img"
+          data-type="round"
           role="presentation"
+          style="--cpd-avatar-size: 32px;"
         >
-          <span
+          u
-            aria-hidden="true"
-            class="mx_BaseAvatar_initial"
-            style="font-size: 20.8px; width: 32px; line-height: 32px;"
-          >
-            U
-          </span>
-          <img
-            alt=""
-            aria-hidden="true"
-            class="mx_BaseAvatar_image"
-            data-testid="avatar-img"
-            loading="lazy"
-            src="data:image/png;base64,00"
-            style="width: 32px; height: 32px;"
-          />
         </span>
       </div>
     </div>

test/components/views/avatars/MemberAvatar-test.tsx

@@ -36,7 +36,7 @@ describe("MemberAvatar", () => {
     function getComponent(props: Partial<ComponentProps<typeof MemberAvatar>>) {
         return (
             <RoomContext.Provider value={getRoomContext(room, {})}>
-                <MemberAvatar member={null} width={35} height={35} {...props} />
+                <MemberAvatar member={null} size="35px" {...props} />
             </RoomContext.Provider>
         );
     }

test/components/views/avatars/RoomAvatar-test.tsx

@@ -55,7 +55,6 @@ describe("RoomAvatar", () => {
         const room = new Room("!room:example.com", client, client.getSafeUserId());
         room.name = "test room";
         expect(render(<RoomAvatar room={room} />).container).toMatchSnapshot();
-        expect(AvatarModule.defaultAvatarUrlForString).toHaveBeenCalledWith(room.roomId);
     });
 
     it("should render as expected for a DM room", () => {
@@ -64,7 +63,6 @@ describe("RoomAvatar", () => {
         room.name = "DM room";
         mocked(DMRoomMap.shared().getUserIdForRoomId).mockReturnValue(userId);
         expect(render(<RoomAvatar room={room} />).container).toMatchSnapshot();
-        expect(AvatarModule.defaultAvatarUrlForString).toHaveBeenCalledWith(userId);
     });
 
     it("should render as expected for a LocalRoom", () => {
@@ -73,6 +71,5 @@ describe("RoomAvatar", () => {
         localRoom.name = "local test room";
         localRoom.targets.push(new DirectoryMember({ user_id: userId }));
         expect(render(<RoomAvatar room={localRoom} />).container).toMatchSnapshot();
-        expect(AvatarModule.defaultAvatarUrlForString).toHaveBeenCalledWith(userId);
     });
 });

test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap

@@ -3,25 +3,14 @@
 exports[`RoomAvatar should render as expected for a DM room 1`] = `
 <div>
   <span
-    class="mx_BaseAvatar"
+    class="_avatar_i91o9_17 mx_BaseAvatar"
+    data-color="1"
+    data-testid="avatar-img"
+    data-type="round"
     role="presentation"
+    style="--cpd-avatar-size: 36px;"
   >
-    <span
+    D
-      aria-hidden="true"
-      class="mx_BaseAvatar_initial"
-      style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
-    >
-      D
-    </span>
-    <img
-      alt=""
-      aria-hidden="true"
-      class="mx_BaseAvatar_image"
-      data-testid="avatar-img"
-      loading="lazy"
-      src="data:image/png;base64,00"
-      style="width: 36px; height: 36px;"
-    />
   </span>
 </div>
 `;
@@ -29,25 +18,14 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
 exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 <div>
   <span
-    class="mx_BaseAvatar"
+    class="_avatar_i91o9_17 mx_BaseAvatar"
+    data-color="7"
+    data-testid="avatar-img"
+    data-type="round"
     role="presentation"
+    style="--cpd-avatar-size: 36px;"
   >
-    <span
+    l
-      aria-hidden="true"
-      class="mx_BaseAvatar_initial"
-      style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
-    >
-      L
-    </span>
-    <img
-      alt=""
-      aria-hidden="true"
-      class="mx_BaseAvatar_image"
-      data-testid="avatar-img"
-      loading="lazy"
-      src="data:image/png;base64,00"
-      style="width: 36px; height: 36px;"
-    />
   </span>
 </div>
 `;
@@ -55,25 +33,14 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 exports[`RoomAvatar should render as expected for a Room 1`] = `
 <div>
   <span
-    class="mx_BaseAvatar"
+    class="_avatar_i91o9_17 mx_BaseAvatar"
+    data-color="2"
+    data-testid="avatar-img"
+    data-type="round"
     role="presentation"
+    style="--cpd-avatar-size: 36px;"
   >
-    <span
+    t
-      aria-hidden="true"
-      class="mx_BaseAvatar_initial"
-      style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
-    >
-      T
-    </span>
-    <img
-      alt=""
-      aria-hidden="true"
-      class="mx_BaseAvatar_image"
-      data-testid="avatar-img"
-      loading="lazy"
-      src="data:image/png;base64,00"
-      style="width: 36px; height: 36px;"
-    />
   </span>
 </div>
 `;

test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap

@@ -11,26 +11,15 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
         class="mx_Marker_border"
       >
         <span
-          class="mx_BaseAvatar"
+          class="_avatar_i91o9_17 mx_BaseAvatar"
+          data-color="8"
+          data-testid="avatar-img"
+          data-type="round"
           role="presentation"
+          style="--cpd-avatar-size: 36px;"
+          title="@alice:server"
         >
-          <span
+          a
-            aria-hidden="true"
-            class="mx_BaseAvatar_initial"
-            style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
-          >
-            A
-          </span>
-          <img
-            alt=""
-            aria-hidden="true"
-            class="mx_BaseAvatar_image"
-            data-testid="avatar-img"
-            loading="lazy"
-            src="data:image/png;base64,00"
-            style="width: 36px; height: 36px;"
-            title="@alice:server"
-          />
         </span>
       </div>
     </div>