[MM-55095] Replace usage of LocalizedIcon in 'backstage_header.tsx' with i/span tags (#25117)

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={
+        title="Breadcrumb Icon"
-          Object {
-            "defaultMessage": "Breadcrumb Icon",
-            "id": "generic_icons.breadcrumb",
-          }
-        }
       />
     </span>
     <div>

webapp/channels/src/components/backstage/components/backstage_header.tsx

@@ -3,16 +3,14 @@
 
 import React from 'react';
 import type {ReactNode} from 'react';
-
+import {useIntl} from 'react-intl';
-import LocalizedIcon from 'components/localized_icon';
-
-import {t} from 'utils/i18n';
 
 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>,
             );