From c91f85124cbab5dbb2f6433538e76cf32311e39e Mon Sep 17 00:00:00 2001
From: Tejas  Gavankar <68467996+tejas161@users.noreply.github.com>
Date: Wed, 1 Nov 2023 16:41:53 +0530
Subject: [PATCH] [MM-55091] Replace usage of LocalizedIcon in
 'add_users_to_group_modal.tsx' with i/span tags (#25202)

---
 .../add_users_to_group_modal.test.tsx.snap           | 10 ++--------
 .../add_users_to_group_modal.tsx                     | 12 ++++--------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap b/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
index 07dab9c521..f21647d07e 100644
--- a/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
@@ -37,18 +37,12 @@ exports[`component/add_users_to_group_modal should match snapshot 1`] = `
     closeLabel="Close"
   >
     <button
-      aria-label="Close"
+      aria-label="Back"
       className="modal-header-back-button btn btn-icon"
       onClick={[Function]}
       type="button"
     >
-      <LocalizedIcon
-        ariaLabel={
-          Object {
-            "defaultMessage": "Back",
-            "id": "user_groups_modal.goBackLabel",
-          }
-        }
+      <i
         className="icon icon-arrow-left"
       />
     </button>
diff --git a/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx b/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
index 0553ce2cb6..991551a50f 100644
--- a/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
+++ b/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
@@ -3,7 +3,7 @@
 
 import React, {useState, useCallback, useMemo} from 'react';
 import {Modal} from 'react-bootstrap';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import type {Group} from '@mattermost/types/groups';
 import type {UserProfile} from '@mattermost/types/users';
@@ -11,9 +11,7 @@ import type {UserProfile} from '@mattermost/types/users';
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import AddUserToGroupMultiSelect from 'components/add_user_to_group_multiselect';
-import LocalizedIcon from 'components/localized_icon';
 
-import {t} from 'utils/i18n';
 import {localizeMessage} from 'utils/utils';
 
 import type {ModalData} from 'types/actions';
@@ -36,6 +34,7 @@ const AddUsersToGroupModal = (props: Props) => {
     const [saving, setSaving] = useState(false);
     const [usersToAdd, setUsersToAdd] = useState<UserProfile[]>([]);
     const [showUnknownError, setShowUnknownError] = useState(false);
+    const {formatMessage} = useIntl();
 
     const doHide = useCallback(() => {
         setShow(false);
@@ -104,13 +103,10 @@ const AddUsersToGroupModal = (props: Props) => {
                 <button
                     type='button'
                     className='modal-header-back-button btn btn-icon'
-                    aria-label='Close'
+                    aria-label={formatMessage({id: 'user_groups_modal.goBackLabel', defaultMessage: 'Back'})}
                     onClick={goBack}
                 >
-                    <LocalizedIcon
-                        className='icon icon-arrow-left'
-                        ariaLabel={{id: t('user_groups_modal.goBackLabel'), defaultMessage: 'Back'}}
-                    />
+                    <i className='icon icon-arrow-left'/>
                 </button>
                 <Modal.Title
                     componentClass='h1'