From 63c97f5a6d8f55eb7583ad975ce12a20d6478273 Mon Sep 17 00:00:00 2001
From: Nicolas Le Cam <niko.lecam@gmail.com>
Date: Tue, 15 Oct 2024 20:59:28 +0200
Subject: [PATCH] Change HeaderIconWrapper so that it get its icon passed as a
 children instead of a props (#28723)

Signed-off-by: Nicolas Le Cam <niko.lecam@gmail.com>
---
 .../channel_header.test.tsx.snap              | 527 ++++++++----------
 .../channel_header/channel_header.tsx         |  15 +-
 .../channel_header/channel_info_button.tsx    |   5 +-
 .../components/header_icon_wrapper.test.tsx   |   2 +-
 .../components/header_icon_wrapper.tsx        |   6 +-
 .../channels/src/components/search/search.tsx |  33 +-
 .../channel_header_plug.tsx                   |  20 +-
 7 files changed, 277 insertions(+), 331 deletions(-)

diff --git a/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap b/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
index 1e9d23076949..5361f1d1fb57 100644
--- a/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
+++ b/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
@@ -74,14 +74,13 @@ exports[`components/ChannelHeader should match snapshot with last active display
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -353,14 +352,13 @@ exports[`components/ChannelHeader should match snapshot with no last active disp
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -563,34 +561,30 @@ exports[`components/ChannelHeader should render active channel files 1`] = `
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"
-              iconComponent={
-                <React.Fragment>
-                  <i
-                    aria-hidden="true"
-                    className="icon icon-account-outline channel-header__members"
-                  />
-                  <span
-                    className="icon__text"
-                    id="channelMemberCountText"
-                  >
-                    -
-                  </span>
-                </React.Fragment>
-              }
               onClick={[Function]}
               tooltip="Members"
-            />
+            >
+              <i
+                aria-hidden="true"
+                className="icon icon-account-outline channel-header__members"
+              />
+              <span
+                className="icon__text"
+                id="channelMemberCountText"
+              >
+                -
+              </span>
+            </HeaderIconWrapper>
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs  channel-header__icon--active"
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -788,34 +782,30 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = `
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"
-              iconComponent={
-                <React.Fragment>
-                  <i
-                    aria-hidden="true"
-                    className="icon icon-account-outline channel-header__members"
-                  />
-                  <span
-                    className="icon__text"
-                    id="channelMemberCountText"
-                  >
-                    -
-                  </span>
-                </React.Fragment>
-              }
               onClick={[Function]}
               tooltip="Members"
-            />
+            >
+              <i
+                aria-hidden="true"
+                className="icon icon-account-outline channel-header__members"
+              />
+              <span
+                className="icon__text"
+                id="channelMemberCountText"
+              >
+                -
+              </span>
+            </HeaderIconWrapper>
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -1013,34 +1003,30 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = `
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"
-              iconComponent={
-                <React.Fragment>
-                  <i
-                    aria-hidden="true"
-                    className="icon icon-account-outline channel-header__members"
-                  />
-                  <span
-                    className="icon__text"
-                    id="channelMemberCountText"
-                  >
-                    -
-                  </span>
-                </React.Fragment>
-              }
               onClick={[Function]}
               tooltip="Members"
-            />
+            >
+              <i
+                aria-hidden="true"
+                className="icon icon-account-outline channel-header__members"
+              />
+              <span
+                className="icon__text"
+                id="channelMemberCountText"
+              >
+                -
+              </span>
+            </HeaderIconWrapper>
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -1238,34 +1224,30 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = `
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"
-              iconComponent={
-                <React.Fragment>
-                  <i
-                    aria-hidden="true"
-                    className="icon icon-account-outline channel-header__members"
-                  />
-                  <span
-                    className="icon__text"
-                    id="channelMemberCountText"
-                  >
-                    -
-                  </span>
-                </React.Fragment>
-              }
               onClick={[Function]}
               tooltip="Members"
-            />
+            >
+              <i
+                aria-hidden="true"
+                className="icon icon-account-outline channel-header__members"
+              />
+              <span
+                className="icon__text"
+                id="channelMemberCountText"
+              >
+                -
+              </span>
+            </HeaderIconWrapper>
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -1463,34 +1445,30 @@ exports[`components/ChannelHeader should render archived view 1`] = `
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"
-              iconComponent={
-                <React.Fragment>
-                  <i
-                    aria-hidden="true"
-                    className="icon icon-account-outline channel-header__members"
-                  />
-                  <span
-                    className="icon__text"
-                    id="channelMemberCountText"
-                  >
-                    -
-                  </span>
-                </React.Fragment>
-              }
               onClick={[Function]}
               tooltip="Members"
-            />
+            >
+              <i
+                aria-hidden="true"
+                className="icon icon-account-outline channel-header__members"
+              />
+              <span
+                className="icon__text"
+                id="channelMemberCountText"
+              >
+                -
+              </span>
+            </HeaderIconWrapper>
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -1709,34 +1687,30 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"
-              iconComponent={
-                <React.Fragment>
-                  <i
-                    aria-hidden="true"
-                    className="icon icon-account-outline channel-header__members"
-                  />
-                  <span
-                    className="icon__text"
-                    id="channelMemberCountText"
-                  >
-                    -
-                  </span>
-                </React.Fragment>
-              }
               onClick={[Function]}
               tooltip="Members"
-            />
+            >
+              <i
+                aria-hidden="true"
+                className="icon icon-account-outline channel-header__members"
+              />
+              <span
+                className="icon__text"
+                id="channelMemberCountText"
+              >
+                -
+              </span>
+            </HeaderIconWrapper>
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -1934,34 +1908,30 @@ exports[`components/ChannelHeader should render not active channel files 1`] = `
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"
-              iconComponent={
-                <React.Fragment>
-                  <i
-                    aria-hidden="true"
-                    className="icon icon-account-outline channel-header__members"
-                  />
-                  <span
-                    className="icon__text"
-                    id="channelMemberCountText"
-                  >
-                    -
-                  </span>
-                </React.Fragment>
-              }
               onClick={[Function]}
               tooltip="Members"
-            />
+            >
+              <i
+                aria-hidden="true"
+                className="icon icon-account-outline channel-header__members"
+              />
+              <span
+                className="icon__text"
+                id="channelMemberCountText"
+              >
+                -
+              </span>
+            </HeaderIconWrapper>
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -2201,14 +2171,13 @@ exports[`components/ChannelHeader should render properly when custom status is e
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -2478,14 +2447,13 @@ exports[`components/ChannelHeader should render properly when custom status is s
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -2733,34 +2701,30 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"
-              iconComponent={
-                <React.Fragment>
-                  <i
-                    aria-hidden="true"
-                    className="icon icon-account-outline channel-header__members"
-                  />
-                  <span
-                    className="icon__text"
-                    id="channelMemberCountText"
-                  >
-                    -
-                  </span>
-                </React.Fragment>
-              }
               onClick={[Function]}
               tooltip="Members"
-            />
+            >
+              <i
+                aria-hidden="true"
+                className="icon icon-account-outline channel-header__members"
+              />
+              <span
+                className="icon__text"
+                id="channelMemberCountText"
+              >
+                -
+              </span>
+            </HeaderIconWrapper>
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -2958,34 +2922,30 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"
-              iconComponent={
-                <React.Fragment>
-                  <i
-                    aria-hidden="true"
-                    className="icon icon-account-outline channel-header__members"
-                  />
-                  <span
-                    className="icon__text"
-                    id="channelMemberCountText"
-                  >
-                    -
-                  </span>
-                </React.Fragment>
-              }
               onClick={[Function]}
               tooltip="Members"
-            />
+            >
+              <i
+                aria-hidden="true"
+                className="icon icon-account-outline channel-header__members"
+              />
+              <span
+                className="icon__text"
+                id="channelMemberCountText"
+              >
+                -
+              </span>
+            </HeaderIconWrapper>
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -3183,34 +3143,30 @@ exports[`components/ChannelHeader should render properly when populated with cha
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"
-              iconComponent={
-                <React.Fragment>
-                  <i
-                    aria-hidden="true"
-                    className="icon icon-account-outline channel-header__members"
-                  />
-                  <span
-                    className="icon__text"
-                    id="channelMemberCountText"
-                  >
-                    -
-                  </span>
-                </React.Fragment>
-              }
               onClick={[Function]}
               tooltip="Members"
-            />
+            >
+              <i
+                aria-hidden="true"
+                className="icon icon-account-outline channel-header__members"
+              />
+              <span
+                className="icon__text"
+                id="channelMemberCountText"
+              >
+                -
+              </span>
+            </HeaderIconWrapper>
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -3434,34 +3390,30 @@ exports[`components/ChannelHeader should render shared view 1`] = `
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"
-              iconComponent={
-                <React.Fragment>
-                  <i
-                    aria-hidden="true"
-                    className="icon icon-account-outline channel-header__members"
-                  />
-                  <span
-                    className="icon__text"
-                    id="channelMemberCountText"
-                  >
-                    -
-                  </span>
-                </React.Fragment>
-              }
               onClick={[Function]}
               tooltip="Members"
-            />
+            >
+              <i
+                aria-hidden="true"
+                className="icon icon-account-outline channel-header__members"
+              />
+              <span
+                className="icon__text"
+                id="channelMemberCountText"
+              >
+                -
+              </span>
+            </HeaderIconWrapper>
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
@@ -3661,54 +3613,47 @@ exports[`components/ChannelHeader should render the pinned icon with the pinned
             <HeaderIconWrapper
               buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="member_rhs"
-              iconComponent={
-                <React.Fragment>
-                  <i
-                    aria-hidden="true"
-                    className="icon icon-account-outline channel-header__members"
-                  />
-                  <span
-                    className="icon__text"
-                    id="channelMemberCountText"
-                  >
-                    -
-                  </span>
-                </React.Fragment>
-              }
               onClick={[Function]}
               tooltip="Members"
-            />
+            >
+              <i
+                aria-hidden="true"
+                className="icon icon-account-outline channel-header__members"
+              />
+              <span
+                className="icon__text"
+                id="channelMemberCountText"
+              >
+                -
+              </span>
+            </HeaderIconWrapper>
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
               buttonId="channelHeaderPinButton"
-              iconComponent={
-                <React.Fragment>
-                  <i
-                    aria-hidden="true"
-                    className="icon icon-pin-outline channel-header__pin"
-                  />
-                  <span
-                    className="icon__text"
-                    id="channelPinnedPostCountText"
-                  >
-                    2
-                  </span>
-                </React.Fragment>
-              }
               onClick={[Function]}
               tooltip="Pinned messages"
-            />
+            >
+              <i
+                aria-hidden="true"
+                className="icon icon-pin-outline channel-header__pin"
+              />
+              <span
+                className="icon__text"
+                id="channelPinnedPostCountText"
+              >
+                2
+              </span>
+            </HeaderIconWrapper>
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
-              iconComponent={
-                <i
-                  className="icon icon-file-text-outline"
-                />
-              }
               onClick={[Function]}
               tooltip="Channel files"
-            />
+            >
+              <i
+                className="icon icon-file-text-outline"
+              />
+            </HeaderIconWrapper>
           </div>
           <div
             className="channel-header__description"
diff --git a/webapp/channels/src/components/channel_header/channel_header.tsx b/webapp/channels/src/components/channel_header/channel_header.tsx
index 378aefb46bbc..a5e2ba232d2c 100644
--- a/webapp/channels/src/components/channel_header/channel_header.tsx
+++ b/webapp/channels/src/components/channel_header/channel_header.tsx
@@ -376,12 +376,13 @@ class ChannelHeader extends React.PureComponent<Props, State> {
 
         const pinnedButton = this.props.pinnedPostsCount ? (
             <HeaderIconWrapper
-                iconComponent={pinnedIcon}
                 buttonClass={pinnedIconClass}
                 buttonId={'channelHeaderPinButton'}
                 onClick={this.showPinnedPosts}
                 tooltip={this.props.intl.formatMessage({id: 'channel_header.pinnedPosts', defaultMessage: 'Pinned messages'})}
-            />
+            >
+                {pinnedIcon}
+            </HeaderIconWrapper>
         ) : (
             null
         );
@@ -421,12 +422,13 @@ class ChannelHeader extends React.PureComponent<Props, State> {
 
             memberListButton = (
                 <HeaderIconWrapper
-                    iconComponent={membersIcon}
                     tooltip={this.props.intl.formatMessage({id: 'channel_header.channelMembers', defaultMessage: 'Members'})}
                     buttonClass={membersIconClass}
                     buttonId={'member_rhs'}
                     onClick={this.toggleChannelMembersRHS}
-                />
+                >
+                    {membersIcon}
+                </HeaderIconWrapper>
             );
         }
 
@@ -614,12 +616,13 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                                     {pinnedButton}
                                     {this.props.isFileAttachmentsEnabled &&
                                         <HeaderIconWrapper
-                                            iconComponent={channelFilesIcon}
                                             buttonClass={channelFilesIconClass}
                                             buttonId={'channelHeaderFilesButton'}
                                             onClick={this.showChannelFiles}
                                             tooltip={this.props.intl.formatMessage({id: 'channel_header.channelFiles', defaultMessage: 'Channel files'})}
-                                        />
+                                        >
+                                            {channelFilesIcon}
+                                        </HeaderIconWrapper>
                                     }
                                 </div>
                                 {headerTextContainer}
diff --git a/webapp/channels/src/components/channel_header/channel_info_button.tsx b/webapp/channels/src/components/channel_header/channel_info_button.tsx
index d7b3a70f3334..044dfbfd2ccd 100644
--- a/webapp/channels/src/components/channel_header/channel_info_button.tsx
+++ b/webapp/channels/src/components/channel_header/channel_info_button.tsx
@@ -67,9 +67,10 @@ const ChannelInfoButton = ({channel}: Props) => {
             buttonClass={buttonClass}
             buttonId='channel-info-btn'
             onClick={toggleRHS}
-            iconComponent={<Icon className='icon-information-outline'/>}
             tooltip={tooltip}
-        />
+        >
+            <Icon className='icon-information-outline'/>
+        </HeaderIconWrapper>
     );
 };
 
diff --git a/webapp/channels/src/components/channel_header/components/header_icon_wrapper.test.tsx b/webapp/channels/src/components/channel_header/components/header_icon_wrapper.test.tsx
index 86dc064b99a1..679e175e0ab0 100644
--- a/webapp/channels/src/components/channel_header/components/header_icon_wrapper.test.tsx
+++ b/webapp/channels/src/components/channel_header/components/header_icon_wrapper.test.tsx
@@ -17,7 +17,7 @@ describe('components/channel_header/components/HeaderIconWrapper', () => {
     );
 
     const baseProps = {
-        iconComponent: mentionsIcon,
+        children: mentionsIcon,
         buttonClass: 'button_class',
         buttonId: 'button_id',
         onClick: jest.fn(),
diff --git a/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx b/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx
index 4bd6ef2ae873..c7d8b8935e1c 100644
--- a/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx
+++ b/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx
@@ -19,7 +19,7 @@ type Props = {
 
     buttonClass?: string;
     buttonId: string;
-    iconComponent: React.ReactNode;
+    children: React.ReactNode;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     tooltip: string;
     tooltipShortcut?: ShortcutDefinition;
@@ -32,7 +32,7 @@ const HeaderIconWrapper = (props: Props) => {
         ariaLabelOverride,
         buttonClass,
         buttonId,
-        iconComponent,
+        children,
         onClick,
         tooltip: tooltipText,
         tooltipShortcut,
@@ -58,7 +58,7 @@ const HeaderIconWrapper = (props: Props) => {
                     className={buttonClass || 'channel-header__icon'}
                     onClick={onClick}
                 >
-                    {iconComponent}
+                    {children}
                 </button>
             </WithTooltip>
             {boardsEnabled &&
diff --git a/webapp/channels/src/components/search/search.tsx b/webapp/channels/src/components/search/search.tsx
index 085e93b40bc0..0e122162c7a3 100644
--- a/webapp/channels/src/components/search/search.tsx
+++ b/webapp/channels/src/components/search/search.tsx
@@ -382,12 +382,6 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
 
     const renderMentionButton = (): JSX.Element => (
         <HeaderIconWrapper
-            iconComponent={
-                <MentionsIcon
-                    className='icon icon--standard'
-                    aria-hidden='true'
-                />
-            }
             buttonClass={classNames(
                 'channel-header__icon',
                 {'channel-header__icon--active': props.isMentionSearch},
@@ -397,14 +391,16 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
             tooltip={intl.formatMessage({id: 'channel_header.recentMentions', defaultMessage: 'Recent mentions'})}
             tooltipShortcut={mentionsShortcut}
             isRhsOpen={props.isRhsOpen}
-        />
+        >
+            <MentionsIcon
+                className='icon icon--standard'
+                aria-hidden='true'
+            />
+        </HeaderIconWrapper>
     );
 
     const renderFlagBtn = (): JSX.Element => (
         <HeaderIconWrapper
-            iconComponent={
-                <FlagIcon className='icon icon--standard'/>
-            }
             buttonClass={classNames(
                 'channel-header__icon ',
                 {'channel-header__icon--active': props.isFlaggedPosts},
@@ -413,7 +409,9 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
             onClick={getFlagged}
             tooltip={intl.formatMessage({id: 'channel_header.flagged', defaultMessage: 'Saved messages'})}
             isRhsOpen={props.isRhsOpen}
-        />
+        >
+            <FlagIcon className='icon icon--standard'/>
+        </HeaderIconWrapper>
     );
 
     const renderHintPopover = (): JSX.Element => {
@@ -500,16 +498,15 @@ const Search: React.FC<Props> = (props: Props): JSX.Element => {
         if (hideSearchBar) {
             return (
                 <HeaderIconWrapper
-                    iconComponent={
-                        <SearchIcon
-                            className='icon icon--standard'
-                            aria-hidden='true'
-                        />
-                    }
                     buttonId={'channelHeaderSearchButton'}
                     onClick={searchButtonClick}
                     tooltip={intl.formatMessage({id: 'channel_header.search', defaultMessage: 'Search'})}
-                />
+                >
+                    <SearchIcon
+                        className='icon icon--standard'
+                        aria-hidden='true'
+                    />
+                </HeaderIconWrapper>
             );
         }
 
diff --git a/webapp/channels/src/plugins/channel_header_plug/channel_header_plug.tsx b/webapp/channels/src/plugins/channel_header_plug/channel_header_plug.tsx
index 0f7bc0103bfe..a23d4e2fb67d 100644
--- a/webapp/channels/src/plugins/channel_header_plug/channel_header_plug.tsx
+++ b/webapp/channels/src/plugins/channel_header_plug/channel_header_plug.tsx
@@ -198,13 +198,14 @@ class ChannelHeaderPlug extends React.PureComponent<ChannelHeaderPlugProps, Chan
             <HeaderIconWrapper
                 key={'channelHeaderButton' + plug.id}
                 buttonClass='channel-header__icon'
-                iconComponent={plug.icon!}
                 onClick={() => this.fireAction(plug.action!)}
                 buttonId={plug.id + 'ChannelHeaderButton'}
                 tooltip={plug.tooltipText ?? plug.dropdownText ?? ''}
                 ariaLabelOverride={ariaLabel}
                 pluginId={plug.pluginId}
-            />
+            >
+                {plug.icon}
+            </HeaderIconWrapper>
         );
     };
 
@@ -265,17 +266,16 @@ class ChannelHeaderPlug extends React.PureComponent<ChannelHeaderPlugProps, Chan
             <HeaderIconWrapper
                 key={`channelHeaderButton_${binding.app_id}_${binding.location}`}
                 buttonClass='channel-header__icon style--none'
-                iconComponent={(
-                    <img
-                        src={binding.icon}
-                        width='24'
-                        height='24'
-                    />
-                )}
                 onClick={() => this.onBindingClick(binding)}
                 buttonId={`${binding.app_id}_${binding.location}`}
                 tooltip={binding.label}
-            />
+            >
+                <img
+                    src={binding.icon}
+                    width='24'
+                    height='24'
+                />
+            </HeaderIconWrapper>
         );
     };