[MM-55110] Replace usage of LocalizedIcon in 'custom_theme_chooser.tsx' with i/span tags (#25537)

webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap

@@ -19,23 +19,11 @@ exports[`components/user_settings/display/CustomThemeChooser should match, init
       <div
         className="header__icon"
       >
-        <LocalizedIcon
+        <i
           className="fa fa-plus"
-          title={
-            Object {
-              "defaultMessage": "Expand Icon",
-              "id": "generic_icons.expand",
-            }
-          }
         />
-        <LocalizedIcon
+        <i
           className="fa fa-minus"
-          title={
-            Object {
-              "defaultMessage": "Collapse Icon",
-              "id": "generic_icons.collapse",
-            }
-          }
         />
       </div>
     </div>
@@ -283,23 +271,11 @@ exports[`components/user_settings/display/CustomThemeChooser should match, init
       <div
         className="header__icon"
       >
-        <LocalizedIcon
+        <i
           className="fa fa-plus"
-          title={
-            Object {
-              "defaultMessage": "Expand Icon",
-              "id": "generic_icons.expand",
-            }
-          }
         />
-        <LocalizedIcon
+        <i
           className="fa fa-minus"
-          title={
-            Object {
-              "defaultMessage": "Collapse Icon",
-              "id": "generic_icons.collapse",
-            }
-          }
         />
       </div>
     </div>
@@ -503,23 +479,11 @@ exports[`components/user_settings/display/CustomThemeChooser should match, init
       <div
         className="header__icon"
       >
-        <LocalizedIcon
+        <i
           className="fa fa-plus"
-          title={
-            Object {
-              "defaultMessage": "Expand Icon",
-              "id": "generic_icons.expand",
-            }
-          }
         />
-        <LocalizedIcon
+        <i
           className="fa fa-minus"
-          title={
-            Object {
-              "defaultMessage": "Collapse Icon",
-              "id": "generic_icons.collapse",
-            }
-          }
         />
       </div>
     </div>

webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.test.tsx

@@ -7,12 +7,15 @@ import type {ChangeEvent} from 'react';
 
 import {Preferences} from 'mattermost-redux/constants';
 
-import CustomThemeChooser from 'components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser';
+import {CustomThemeChooser} from 'components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser';
+
+import {type MockIntl} from 'tests/helpers/intl-test-helper';
 
 describe('components/user_settings/display/CustomThemeChooser', () => {
     const baseProps = {
         theme: Preferences.THEMES.denim,
         updateTheme: jest.fn(),
+        intl: {formatMessage: jest.fn()} as MockIntl,
     };
 
     it('should match, init', () => {

webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx

@@ -3,19 +3,17 @@
 
 import React, {createRef} from 'react';
 import type {ChangeEvent, ClipboardEvent, MouseEvent, RefObject} from 'react';
-import {defineMessages, FormattedMessage} from 'react-intl';
+import {defineMessages, FormattedMessage, injectIntl} from 'react-intl';
-import type {MessageDescriptor} from 'react-intl';
+import type {IntlShape, MessageDescriptor} from 'react-intl';
 
 import type {Theme} from 'mattermost-redux/selectors/entities/preferences';
 import {setThemeDefaults} from 'mattermost-redux/utils/theme_utils';
 
-import LocalizedIcon from 'components/localized_icon';
 import OverlayTrigger from 'components/overlay_trigger';
 import type {BaseOverlayTrigger} from 'components/overlay_trigger';
 import Popover from 'components/widgets/popover';
 
 import Constants from 'utils/constants';
-import {t} from 'utils/i18n';
 
 import ColorChooser from '../color_chooser/color_chooser';
 
@@ -123,13 +121,14 @@ const messages: Record<string, MessageDescriptor> = defineMessages({
 type Props = {
     theme: Theme;
     updateTheme: (theme: Theme) => void;
+    intl: IntlShape;
 };
 
 type State = {
     copyTheme: string;
 };
 
-export default class CustomThemeChooser extends React.PureComponent<Props, State> {
+export class CustomThemeChooser extends React.PureComponent<Props, State> {
     textareaRef: RefObject<HTMLTextAreaElement>;
     sidebarStylesHeaderRef: RefObject<HTMLDivElement>;
     centerChannelStylesHeaderRef: RefObject<HTMLDivElement>;
@@ -289,8 +288,7 @@ export default class CustomThemeChooser extends React.PureComponent<Props, State
     };
 
     render() {
-        const theme = this.props.theme;
+        const {intl, theme} = this.props;
-
         const sidebarElements: JSX.Element[] = [];
         const centerChannelElements: JSX.Element[] = [];
         const linkAndButtonElements: JSX.Element[] = [];
@@ -469,13 +467,13 @@ export default class CustomThemeChooser extends React.PureComponent<Props, State
                             defaultMessage='Sidebar Styles'
                         />
                         <div className='header__icon'>
-                            <LocalizedIcon
+                            <i
                                 className='fa fa-plus'
-                                title={{id: t('generic_icons.expand'), defaultMessage: 'Expand Icon'}}
+                                title={intl.formatMessage({id: 'generic_icons.expand', defaultMessage: 'Expand Icon'})}
                             />
-                            <LocalizedIcon
+                            <i
                                 className='fa fa-minus'
-                                title={{id: t('generic_icons.collapse'), defaultMessage: 'Collapse Icon'}}
+                                title={intl.formatMessage({id: 'generic_icons.collapse', defaultMessage: 'Collapse Icon'})}
                             />
                         </div>
                     </div>
@@ -498,13 +496,13 @@ export default class CustomThemeChooser extends React.PureComponent<Props, State
                             defaultMessage='Center Channel Styles'
                         />
                         <div className='header__icon'>
-                            <LocalizedIcon
+                            <i
                                 className='fa fa-plus'
-                                title={{id: t('generic_icons.expand'), defaultMessage: 'Expand Icon'}}
+                                title={intl.formatMessage({id: 'generic_icons.expand', defaultMessage: 'Expand Icon'})}
                             />
-                            <LocalizedIcon
+                            <i
                                 className='fa fa-minus'
-                                title={{id: t('generic_icons.collapse'), defaultMessage: 'Collapse Icon'}}
+                                title={intl.formatMessage({id: 'generic_icons.collapse', defaultMessage: 'Collapse Icon'})}
                             />
                         </div>
                     </div>
@@ -528,13 +526,13 @@ export default class CustomThemeChooser extends React.PureComponent<Props, State
                             defaultMessage='Link and Button Styles'
                         />
                         <div className='header__icon'>
-                            <LocalizedIcon
+                            <i
                                 className='fa fa-plus'
-                                title={{id: t('generic_icons.expand'), defaultMessage: 'Expand Icon'}}
+                                title={intl.formatMessage({id: 'generic_icons.expand', defaultMessage: 'Expand Icon'})}
                             />
-                            <LocalizedIcon
+                            <i
                                 className='fa fa-minus'
-                                title={{id: t('generic_icons.collapse'), defaultMessage: 'Collapse Icon'}}
+                                title={intl.formatMessage({id: 'generic_icons.collapse', defaultMessage: 'Collapse Icon'})}
                             />
                         </div>
                     </div>
@@ -552,3 +550,5 @@ export default class CustomThemeChooser extends React.PureComponent<Props, State
         );
     }
 }
+
+export default injectIntl(CustomThemeChooser);