Switch to non-solid compound icons for room settings & composer (#31561)

* Switch to non-solid compound icons for room settings & composer

Also manually fixes sticker.svg to be tintable until it is redrawn

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

* Replace sticker.svg

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

* Update snapshots

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

---------

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

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -13,10 +13,11 @@ import { RoomEvent, type Room, RoomStateEvent, type MatrixEvent, EventType } fro
 import {
     AdminIcon,
     GroupIcon,
-    LockSolidIcon,
+    LockIcon,
     PollsIcon,
-    SettingsSolidIcon,
-    VoiceCallSolidIcon,
+    SettingsIcon,
+    VoiceCallIcon,
+    NotificationsIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import TabbedView, { Tab } from "../../structures/TabbedView";
@@ -40,7 +41,6 @@ import { PollHistoryTab } from "../settings/tabs/room/PollHistoryTab";
 import ErrorBoundary from "../elements/ErrorBoundary";
 import { PeopleRoomSettingsTab } from "../settings/tabs/room/PeopleRoomSettingsTab";
 import { Icon as AdvancedIcon } from "../../../../res/img/element-icons/room/settings/advanced.svg";
-import { Icon as NotificationsIcon } from "../../../../res/img/element-icons/notifications.svg";
 import { Icon as BridgeIcon } from "../../../../res/img/feather-customised/bridge.svg";
 
 export const enum RoomSettingsTab {
@@ -140,7 +140,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
             new Tab(
                 RoomSettingsTab.General,
                 _td("common|general"),
-                <SettingsSolidIcon />,
+                <SettingsIcon />,
                 <GeneralRoomSettingsTab room={this.state.room} />,
                 "RoomSettingsGeneral",
             ),
@@ -160,7 +160,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
                 new Tab(
                     RoomSettingsTab.Voip,
                     _td("settings|voip|title"),
-                    <VoiceCallSolidIcon />,
+                    <VoiceCallIcon />,
                     <VoipRoomSettingsTab room={this.state.room} />,
                 ),
             );
@@ -169,7 +169,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
             new Tab(
                 RoomSettingsTab.Security,
                 _td("room_settings|security|title"),
-                <LockSolidIcon />,
+                <LockIcon />,
                 <SecurityRoomSettingsTab room={this.state.room} closeSettingsFn={() => this.props.onFinished(true)} />,
                 "RoomSettingsSecurityPrivacy",
             ),

src/components/views/location/LocationButton.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ReactNode, type SyntheticEvent, useContext } from "react";
 import classNames from "classnames";
 import { type RoomMember, type IEventRelation } from "matrix-js-sdk/src/matrix";
-import { LocationPinSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { LocationPinIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import { CollapsibleButton } from "../rooms/CollapsibleButton";
@@ -56,7 +56,7 @@ const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition, relati
     return (
         <React.Fragment>
             <CollapsibleButton className={className} onClick={openMenu} title={_t("common|location")} inputRef={button}>
-                <LocationPinSolidIcon />
+                <LocationPinIcon />
             </CollapsibleButton>
 
             {contextMenu}

src/components/views/rooms/MessageComposerButtons.tsx

@@ -17,9 +17,10 @@ import {
 import React, { type JSX, createContext, type ReactElement, type ReactNode, useContext, useRef } from "react";
 import {
     AttachmentIcon,
-    MicOnSolidIcon,
+    MicOnIcon,
     OverflowHorizontalIcon,
     PollsIcon,
+    StickerIcon,
     TextFormattingIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
@@ -42,7 +43,6 @@ import { filterBoolean } from "../../../utils/arrays";
 import { useSettingValue } from "../../../hooks/useSettings";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
 import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
-import { Icon as StickersIcon } from "../../../../res/img/element-icons/room/composer/sticker.svg";
 
 interface IProps {
     addEmoji: (emoji: string) => boolean;
@@ -260,7 +260,7 @@ function showStickersButton(props: IProps): ReactElement | null {
             onClick={() => props.setStickerPickerOpen(!props.isStickerPickerOpen)}
             title={props.isStickerPickerOpen ? _t("composer|close_sticker_picker") : _t("common|sticker")}
         >
-            <StickersIcon />
+            <StickerIcon />
         </CollapsibleButton>
     ) : null;
 }
@@ -274,7 +274,7 @@ function voiceRecordingButton(props: IProps, narrow: boolean): ReactElement | nu
             onClick={props.onRecordStartEndClick}
             title={_t("composer|voice_message_button")}
         >
-            <MicOnSolidIcon />
+            <MicOnIcon />
         </CollapsibleButton>
     );
 }