From e5adf25fa095e6495d730233d39a45641d01b250 Mon Sep 17 00:00:00 2001
From: Sudheer Tripathi <31629433+sudheer121@users.noreply.github.com>
Date: Wed, 25 Oct 2023 15:50:54 +0530
Subject: [PATCH] [MM-55095] Replace usage of LocalizedIcon in
 'backstage_header.tsx' with i/span tags (#25117)

---
 .../__snapshots__/backstage_header.test.tsx.snap       |  9 ++-------
 .../backstage/components/backstage_header.tsx          | 10 ++++------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/webapp/channels/src/components/backstage/components/__snapshots__/backstage_header.test.tsx.snap b/webapp/channels/src/components/backstage/components/__snapshots__/backstage_header.test.tsx.snap
index 53140138ab..dff6f2e179 100644
--- a/webapp/channels/src/components/backstage/components/__snapshots__/backstage_header.test.tsx.snap
+++ b/webapp/channels/src/components/backstage/components/__snapshots__/backstage_header.test.tsx.snap
@@ -12,14 +12,9 @@ exports[`components/backstage/components/BackstageHeader should match snapshot w
       className="backstage-header__divider"
       key="divider1"
     >
-      <LocalizedIcon
+      <i
         className="fa fa-angle-right"
-        title={
-          Object {
-            "defaultMessage": "Breadcrumb Icon",
-            "id": "generic_icons.breadcrumb",
-          }
-        }
+        title="Breadcrumb Icon"
       />
     </span>
     <div>
diff --git a/webapp/channels/src/components/backstage/components/backstage_header.tsx b/webapp/channels/src/components/backstage/components/backstage_header.tsx
index 0a10ee5013..521c9fc194 100644
--- a/webapp/channels/src/components/backstage/components/backstage_header.tsx
+++ b/webapp/channels/src/components/backstage/components/backstage_header.tsx
@@ -3,16 +3,14 @@
 
 import React from 'react';
 import type {ReactNode} from 'react';
-
-import LocalizedIcon from 'components/localized_icon';
-
-import {t} from 'utils/i18n';
+import {useIntl} from 'react-intl';
 
 type Props = {
     children?: ReactNode;
 }
 
 const BackstageHeader = ({children}: Props) => {
+    const {formatMessage} = useIntl();
     const childrenElements: ReactNode[] = [];
 
     React.Children.forEach(children, (child, index) => {
@@ -22,9 +20,9 @@ const BackstageHeader = ({children}: Props) => {
                     key={'divider' + index}
                     className='backstage-header__divider'
                 >
-                    <LocalizedIcon
+                    <i
                         className='fa fa-angle-right'
-                        title={{id: t('generic_icons.breadcrumb'), defaultMessage: 'Breadcrumb Icon'}}
+                        title={formatMessage({id: 'generic_icons.breadcrumb', defaultMessage: 'Breadcrumb Icon'})}
                     />
                 </span>,
             );