Convert ShieldOutlineIcon to function Component (#24810)

* Convert ShieldOutlineIcon to function Component

* Fixed Extra line and Test file

webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap

@@ -68,7 +68,7 @@ exports[`components/admin_console/system_user_detail should match default snapsh
             <div
               className="SystemUserDetail__field-text"
             >
-              <ShieldOutlineIcon
+              <Memo(ShieldOutlineIcon)
                 className="SystemUserDetail__field-icon"
               />
               <span
@@ -304,7 +304,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if LD
             <div
               className="SystemUserDetail__field-text"
             >
-              <ShieldOutlineIcon
+              <Memo(ShieldOutlineIcon)
                 className="SystemUserDetail__field-icon"
               />
               <span
@@ -542,7 +542,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if MF
             <div
               className="SystemUserDetail__field-text"
             >
-              <ShieldOutlineIcon
+              <Memo(ShieldOutlineIcon)
                 className="SystemUserDetail__field-icon"
               />
               <span
@@ -786,7 +786,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if SA
             <div
               className="SystemUserDetail__field-text"
             >
-              <ShieldOutlineIcon
+              <Memo(ShieldOutlineIcon)
                 className="SystemUserDetail__field-icon"
               />
               <span
@@ -1024,7 +1024,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if no
             <div
               className="SystemUserDetail__field-text"
             >
-              <ShieldOutlineIcon
+              <Memo(ShieldOutlineIcon)
                 className="SystemUserDetail__field-icon"
               />
               <span
@@ -1260,7 +1260,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if us
             <div
               className="SystemUserDetail__field-text"
             >
-              <ShieldOutlineIcon
+              <Memo(ShieldOutlineIcon)
                 className="SystemUserDetail__field-icon"
               />
               <span

webapp/channels/src/components/widgets/icons/shield_outline_icon.tsx

@@ -3,10 +3,11 @@
 
 import React from 'react';
 
-export default class ShieldOutlineIcon extends React.PureComponent<React.HTMLAttributes<HTMLSpanElement>> {
-    render() {
+type Props = React.HTMLAttributes<HTMLSpanElement>;
+
+const ShieldOutlineIcon = (props: Props) => {
     return (
-            <span {...this.props}>
+        <span {...props}>
             <svg
                 width='100%'
                 height='100%'
@@ -19,5 +20,5 @@ export default class ShieldOutlineIcon extends React.PureComponent<React.HTMLAtt
             </svg>
         </span>
     );
-    }
-}
+};
+export default React.memo(ShieldOutlineIcon);