From 34422f4479296056d231033f5435841fad7c65d1 Mon Sep 17 00:00:00 2001
From: Evan <evan.wilkinson@gmail.com>
Date: Sun, 15 Sep 2024 15:21:56 -0400
Subject: [PATCH 1/3] chore(docs): update menutoggle examples icon prop

---
 .../examples/ActionListSingleGroup.tsx        | 10 +-
 .../Card/examples/CardExpandable.tsx          | 10 +-
 .../Card/examples/CardExpandableWithIcon.tsx  | 10 +-
 .../Card/examples/CardHeaderInCardHead.tsx    | 10 +-
 .../examples/CardOnlyActionsInCardHead.tsx    | 10 +-
 .../Card/examples/CardWithImageAndActions.tsx | 10 +-
 .../DataList/examples/DataListActions.tsx     | 10 +-
 .../DataList/examples/DataListCheckboxes.tsx  | 28 ++++--
 .../examples/DataListClickableRows.tsx        | 19 ++--
 .../DataList/examples/DataListExpandable.tsx  | 28 ++++--
 .../examples/DataListMixedExpandable.tsx      | 28 ++++--
 .../examples/DataListWidthModifiers.tsx       | 19 ++--
 .../examples/DropdownWithKebabToggle.tsx      | 19 +++-
 .../DualListSelectorComplexOptionsActions.tsx | 19 ++--
 .../Hint/examples/HintBasicWithTitle.tsx      | 10 +-
 .../Hint/examples/HintBasicWithoutTitle.tsx   | 10 +-
 .../examples/LabelGroupEditableAddModal.tsx   | 10 +-
 .../MenuToggle/examples/MenuToggle.md         | 16 ++--
 .../examples/NotificationDrawerBasic.tsx      | 43 +++++++--
 .../examples/NotificationDrawerGroups.tsx     | 55 +++++++++--
 .../OverflowMenuBreakpointOnContainer.tsx     | 12 ++-
 .../examples/OverflowMenuGroupTypes.tsx       | 12 ++-
 .../examples/OverflowMenuMultiGroup.tsx       | 12 ++-
 .../examples/OverflowMenuPersistent.tsx       | 12 ++-
 .../examples/OverflowMenuSimple.tsx           | 12 ++-
 .../Toolbar/examples/ToolbarStacked.tsx       | 10 +-
 .../Toolbar/examples/ToolbarWithFilters.tsx   | 10 +-
 .../examples/TreeViewWithActionItems.tsx      | 10 +-
 .../src/demos/CardView/examples/CardView.tsx  | 19 ++--
 .../examples/ApplicationLauncherDemo.tsx      | 12 ++-
 .../react-core/src/demos/DashboardHeader.tsx  | 25 +++--
 .../demos/DataList/examples/DataListBasic.tsx | 13 ++-
 .../DataListExpandableControlInToolbar.tsx    | 27 ++++--
 .../examples/FilterAttributeSearch.tsx        |  9 +-
 .../Filters/examples/FilterCheckboxSelect.tsx |  7 +-
 .../demos/Filters/examples/FilterFaceted.tsx  |  9 +-
 .../examples/FilterMixedSelectGroup.tsx       | 15 ++-
 .../examples/FilterSameSelectGroup.tsx        | 15 ++-
 .../Filters/examples/FilterSingleSelect.tsx   |  7 +-
 .../examples/NotificationDrawerBasic.tsx      | 55 +++++++----
 .../examples/NotificationDrawerGrouped.tsx    | 91 +++++++++++++------
 .../src/demos/RTL/examples/PaginatedTable.jsx | 18 ++--
 .../src/demos/RTL/examples/PaginatedTable.tsx | 18 ++--
 .../AlertGroupToastWithNotificationDrawer.tsx | 19 ++--
 .../examples/Card/CardHorizontalGrid.tsx      | 10 +-
 .../DateTimePicker/DateTimePicker.tsx         |  7 +-
 .../Masthead/MastheadWithHorizontalNav.tsx    | 19 ++--
 ...stheadWithUtilitiesAndUserDropdownMenu.tsx | 28 ++++--
 .../src/demos/examples/Nav/NavFlyout.tsx      | 19 ++--
 .../src/demos/examples/Nav/NavHorizontal.tsx  | 19 ++--
 .../examples/Nav/NavHorizontalWithSubnav.tsx  | 19 ++--
 .../src/demos/examples/Nav/NavManual.tsx      | 19 ++--
 .../examples/Page/PageContextSelector.tsx     | 19 ++--
 .../Page/PageStickySectionBreadcrumb.tsx      | 19 ++--
 .../examples/Page/PageStickySectionGroup.tsx  | 19 ++--
 .../Page/PageStickySectionGroupAlternate.tsx  | 19 ++--
 .../PrimaryDetail/PrimaryDetailCardView.tsx   | 19 ++--
 .../src/demos/examples/Tabs/TabsAndTable.tsx  | 26 +++++-
 .../Toolbar/ConsoleLogViewerToolbar.tsx       | 30 +++++-
 .../components/demos/CardDemo/CardDemo.tsx    |  7 +-
 .../demos/DataListDemo/DataListDemo.tsx       |  7 +-
 .../DualListSelectorWithActionsDemo.tsx       | 19 ++--
 ...lListSelectorDeprecatedWithActionsDemo.tsx | 14 ++-
 .../demos/MastheadDemo/MastheadDemo.tsx       | 10 +-
 .../NotificationDrawerBasicDemo.tsx           | 55 +++++++----
 .../NotificationDrawerGroupsDemo.tsx          | 82 +++++++++++------
 .../OverflowMenuDemo/OverflowMenuDemo.tsx     | 39 +++++---
 .../demos/ToolbarDemo/ToolbarDemo.tsx         |  7 +-
 .../src/components/Table/ActionsColumn.tsx    |  7 +-
 .../Table/examples/TableActionsOverflow.tsx   |  9 +-
 .../Table/examples/TableSortableCustom.tsx    |  9 +-
 .../react-table/src/demos/DashboardHeader.tsx | 19 ++--
 .../demos/examples/TableColumnManagement.tsx  | 23 ++++-
 .../TableColumnManagementWithDraggable.tsx    | 21 ++++-
 .../src/demos/examples/TableCompact.tsx       |  7 +-
 .../demos/examples/TableCompoundExpansion.tsx | 14 ++-
 .../src/demos/examples/TableFilterable.tsx    |  7 +-
 .../examples/TableSortableResponsive.tsx      | 13 ++-
 .../examples/TableStaticBottomPagination.tsx  |  7 +-
 .../examples/LegacyTableSortableCustom.tsx    |  8 +-
 80 files changed, 1078 insertions(+), 420 deletions(-)

diff --git a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
index db018b6c289..576c16fc5d2 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
+++ b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
@@ -7,6 +7,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement,
   Divider
@@ -84,9 +85,12 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
                   variant="plain"
                   isExpanded={isOpen}
                   aria-label="Action list single group kebab"
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon />
+                    </Icon>
+                  }
+                />
               )}
               isOpen={isOpen}
               onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
diff --git a/packages/react-core/src/components/Card/examples/CardExpandable.tsx b/packages/react-core/src/components/Card/examples/CardExpandable.tsx
index 2afaecee5b4..732471f6571 100644
--- a/packages/react-core/src/components/Card/examples/CardExpandable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardExpandable.tsx
@@ -11,6 +11,7 @@ import {
   DropdownList,
   DropdownItem,
   Divider,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -71,9 +72,12 @@ export const CardExpandable: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={
+              <Icon>
+                <EllipsisVIcon aria-hidden="true" />
+              </Icon>
+            }
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
diff --git a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
index 691282989f3..44801dc886f 100644
--- a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
+++ b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
@@ -10,6 +10,7 @@ import {
   DropdownList,
   DropdownItem,
   Divider,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -67,9 +68,12 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable with icon example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={
+              <Icon>
+                <EllipsisVIcon aria-hidden="true" />
+              </Icon>
+            }
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
diff --git a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
index 8f00a7e7431..2db2c6889d6 100644
--- a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
+++ b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
@@ -9,6 +9,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement,
   Divider
@@ -58,9 +59,12 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card title inline with images and actions example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={
+              <Icon>
+                <EllipsisVIcon aria-hidden="true" />
+              </Icon>
+            }
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
diff --git a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
index ceff2f1e042..8ebcfdfa91d 100644
--- a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
+++ b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
@@ -7,6 +7,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement,
   Divider
@@ -56,9 +57,12 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header without title example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={
+              <Icon>
+                <EllipsisVIcon aria-hidden="true" />
+              </Icon>
+            }
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
diff --git a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
index 867d0310b38..8bd10fe05d5 100644
--- a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
@@ -10,6 +10,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement,
   Divider
@@ -64,9 +65,12 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header images and actions example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={
+              <Icon>
+                <EllipsisVIcon aria-hidden="true" />
+              </Icon>
+            }
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
diff --git a/packages/react-core/src/components/DataList/examples/DataListActions.tsx b/packages/react-core/src/components/DataList/examples/DataListActions.tsx
index 68b5d53f1ec..8d95bcbf07e 100644
--- a/packages/react-core/src/components/DataList/examples/DataListActions.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListActions.tsx
@@ -10,6 +10,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -87,9 +88,12 @@ export const DataListActions: React.FunctionComponent = () => {
                     onClick={onToggle}
                     variant="plain"
                     aria-label="Data list with actions example kebab toggle"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
+                  />
                 )}
                 isOpen={isOpen}
                 onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
diff --git a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
index 8f3ca384ddd..2ae26ebca50 100644
--- a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
@@ -11,6 +11,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -85,9 +86,12 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle1}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 1"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
               isOpen={isOpen1}
               onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -141,9 +145,12 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle2}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 2"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
               isOpen={isOpen2}
               onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
@@ -206,9 +213,12 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle3}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 3"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
               isOpen={isOpen3}
               onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}
diff --git a/packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx b/packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx
index bf1ca001978..48898052cb9 100644
--- a/packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx
@@ -9,6 +9,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -77,9 +78,12 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 1"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
+                  />
                 )}
                 isOpen={isOpen1}
                 onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -128,9 +132,12 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 2"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
+                  />
                 )}
                 isOpen={isOpen2}
                 onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
diff --git a/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
index 19a4564f57b..751bc8ee2f6 100644
--- a/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
@@ -11,6 +11,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -97,9 +98,12 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 1"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
+                  />
                 )}
                 isOpen={isOpen1}
                 onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -173,9 +177,12 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 2"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
+                  />
                 )}
                 isOpen={isOpen2}
                 onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
@@ -249,9 +256,12 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 3"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
+                  />
                 )}
                 isOpen={isOpen3}
                 onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}
diff --git a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
index 7f6a33c6b9b..d8d677d58f9 100644
--- a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
@@ -11,6 +11,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -99,9 +100,12 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 1"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
+                  />
                 )}
                 isOpen={isOpen1}
                 onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -177,9 +181,12 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 2"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
+                  />
                 )}
                 isOpen={isOpen2}
                 onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
@@ -243,9 +250,12 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 3"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
+                  />
                 )}
                 isOpen={isOpen3}
                 onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}
diff --git a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
index 47c316c761e..2e3b9fb93af 100644
--- a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
@@ -13,6 +13,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -104,9 +105,12 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle1}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 1"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                   isOpen={isOpen1}
                   onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -179,9 +183,12 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle2}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 2"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                   isOpen={isOpen2}
                   onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
index 759a4b8c8a6..162413442c6 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
@@ -1,5 +1,13 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Divider,
+  Icon,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DropdownWithKebab: React.FunctionComponent = () => {
@@ -27,9 +35,12 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggleClick}
           isExpanded={isOpen}
-        >
-          <EllipsisVIcon />
-        </MenuToggle>
+          icon={
+            <Icon>
+              <EllipsisVIcon />
+            </Icon>
+          }
+        />
       )}
       shouldFocusToggleOnSelect
     >
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
index 81b66c9197e..cc977e0aadf 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
@@ -18,6 +18,7 @@ import {
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -166,9 +167,12 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-available-toggle"
                 aria-label="Complex actions example available kebab toggle"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
+                icon={
+                  <Icon>
+                    <EllipsisVIcon aria-hidden="true" />
+                  </Icon>
+                }
+              />
             )}
             isOpen={isAvailableKebabOpen}
             onOpenChange={(isOpen: boolean) => setIsAvailableKebabOpen(isOpen)}
@@ -202,9 +206,12 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-chosen-toggle"
                 aria-label="Complex actions example chosen kebab toggle"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
+                icon={
+                  <Icon>
+                    <EllipsisVIcon aria-hidden="true" />
+                  </Icon>
+                }
+              />
             )}
             isOpen={isChosenKebabOpen}
             onOpenChange={(isOpen: boolean) => setIsChosenKebabOpen(isOpen)}
diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
index c7b79f22040..29069ab1db7 100644
--- a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
+++ b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
@@ -9,6 +9,7 @@ import {
   DropdownList,
   DropdownItem,
   Divider,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -37,9 +38,12 @@ export const HintBasicWithTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-        >
-          <EllipsisVIcon />
-        </MenuToggle>
+          icon={
+            <Icon>
+              <EllipsisVIcon />
+            </Icon>
+          }
+        />
       )}
     >
       <DropdownList>
diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
index 6274169020b..69682ba271a 100644
--- a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
+++ b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
@@ -8,6 +8,7 @@ import {
   DropdownList,
   DropdownItem,
   Divider,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -36,9 +37,12 @@ export const HintBasicWithoutTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-        >
-          <EllipsisVIcon />
-        </MenuToggle>
+          icon={
+            <Icon>
+              <EllipsisVIcon />
+            </Icon>
+          }
+        />
       )}
     >
       <DropdownList>
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx
index 57a390a1f62..82aac571303 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx
@@ -5,6 +5,7 @@ import {
   Button,
   Form,
   FormGroup,
+  Icon,
   TextInput,
   Menu,
   MenuContent,
@@ -200,8 +201,13 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   };
 
   const iconToggle = (
-    <MenuToggle ref={iconToggleRef} onClick={onIconToggleClick} isExpanded={isIconOpen}>
-      {icon || 'Select'}
+    <MenuToggle
+      ref={iconToggleRef}
+      onClick={onIconToggleClick}
+      isExpanded={isIconOpen}
+      icon={icon ? <Icon>{icon}</Icon> : null}
+    >
+      {icon ? '' : 'Select'}
     </MenuToggle>
   );
 
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
index e495dce2cc4..48b93861eb5 100644
--- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
@@ -127,13 +127,13 @@ This can be used alongside a text label that provides more context for the image
 
 ```ts
 import React from 'react';
-import { MenuToggle, Avatar } from '@patternfly/react-core';
+import { MenuToggle, Avatar, Icon } from '@patternfly/react-core';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 
 <React.Fragment>
-  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
-  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
-  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
+  <MenuToggle icon={<Icon><Avatar src={imgAvatar} alt="avatar" /></Icon>}>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Icon><Avatar src={imgAvatar} alt="avatar" /></Icon>} isExpanded>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Icon><Avatar src={imgAvatar} alt="avatar" /></Icon>} isDisabled>Ned Username</MenuToggle>
 </React.Fragment>
 ```
 
@@ -166,15 +166,15 @@ If the toggle does not have any visible text content, use the `aria-label` prope
 
 ```ts
 import React from 'react';
-import { MenuToggle } from '@patternfly/react-core';
+import { MenuToggle, Icon } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 <React.Fragment>
-  <MenuToggle icon={<EllipsisVIcon />} variant="plain" aria-label="plain kebab"/>
+  <MenuToggle icon={<Icon><EllipsisVIcon /></Icon>} variant="plain" aria-label="plain kebab"/>
   {' '}
-  <MenuToggle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain expanded kebab"/>
+  <MenuToggle icon={<Icon><EllipsisVIcon /></Icon>} variant="plain" isExpanded aria-label="plain expanded kebab"/>
   {' '}
-  <MenuToggle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain kebab"/>
+  <MenuToggle icon={<Icon><EllipsisVIcon /></Icon>} variant="plain" isDisabled aria-label="disabled plain kebab"/>
 </React.Fragment>
 ```
 
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index 2a680522119..224a61ffdf3 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -10,6 +10,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -64,7 +65,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               onClick={onToggle(0)}
               variant="plain"
               aria-label={`Basic example header kebab toggle`}
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={
+                <Icon>
+                  <EllipsisVIcon aria-hidden="true" />
+                </Icon>
+              }
             />
           )}
         >
@@ -91,7 +96,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(1)}
                     variant="plain"
                     aria-label={`Basic example notification 1 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
                   />
                 )}
               >
@@ -120,7 +129,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(2)}
                     variant="plain"
                     aria-label={`Basic example notification 2 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
                   />
                 )}
               >
@@ -151,7 +164,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(3)}
                     variant="plain"
                     aria-label={`Basic example notification 3 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
                   />
                 )}
               >
@@ -181,7 +198,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(4)}
                     variant="plain"
                     aria-label={`Basic example notification 4 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
                   />
                 )}
               >
@@ -210,7 +231,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(5)}
                     variant="plain"
                     aria-label={`Basic example notification 5 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
                   />
                 )}
               >
@@ -235,7 +260,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(6)}
                     variant="plain"
                     aria-label={`Basic example notification 6 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
                   />
                 )}
               >
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
index 403d4328791..e2eca10ebc5 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
@@ -18,6 +18,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -89,7 +90,11 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
               onClick={() => onToggle('groups-kebab-toggle-1')}
               variant="plain"
               aria-label={`Groups example header kebab toggle`}
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={
+                <Icon>
+                  <EllipsisVIcon aria-hidden="true" />
+                </Icon>
+              }
             />
           )}
         >
@@ -124,7 +129,11 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-2')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 1 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon aria-hidden="true" />
+                          </Icon>
+                        }
                       />
                     )}
                   >
@@ -154,7 +163,11 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-3')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 2 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon aria-hidden="true" />
+                          </Icon>
+                        }
                       />
                     )}
                   >
@@ -185,7 +198,11 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-4')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 3 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon aria-hidden="true" />
+                          </Icon>
+                        }
                       />
                     )}
                   >
@@ -215,7 +232,11 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-5')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 4 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon aria-hidden="true" />
+                          </Icon>
+                        }
                       />
                     )}
                   >
@@ -254,7 +275,11 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-6')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 1 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon aria-hidden="true" />
+                          </Icon>
+                        }
                       />
                     )}
                   >
@@ -284,7 +309,11 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-7')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 2 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon aria-hidden="true" />
+                          </Icon>
+                        }
                       />
                     )}
                   >
@@ -315,7 +344,11 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-8')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 3 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon aria-hidden="true" />
+                          </Icon>
+                        }
                       />
                     )}
                   >
@@ -345,7 +378,11 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-9')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 4 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon aria-hidden="true" />
+                          </Icon>
+                        }
                       />
                     )}
                   >
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
index adb9d801ba0..24fe126d088 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
@@ -10,7 +10,8 @@ import {
   Slider,
   SliderOnChangeEvent,
   Dropdown,
-  DropdownList
+  DropdownList,
+  Icon
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -95,9 +96,12 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
                   variant="plain"
                   onClick={onToggle}
                   isExpanded={isOpen}
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon />
+                    </Icon>
+                  }
+                />
               )}
               isOpen={isOpen}
               onOpenChange={(isOpen) => setIsOpen(isOpen)}
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx
index 09c4c1827f5..4d717a7480d 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx
@@ -10,7 +10,8 @@ import {
   Button,
   ButtonVariant,
   Dropdown,
-  DropdownList
+  DropdownList,
+  Icon
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
@@ -99,9 +100,12 @@ export const OverflowMenuGroupTypes: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={
+                <Icon>
+                  <EllipsisVIcon />
+                </Icon>
+              }
+            />
           )}
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx
index 81631ce25a0..408d3e3262f 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx
@@ -10,7 +10,8 @@ import {
   Button,
   ButtonVariant,
   Dropdown,
-  DropdownList
+  DropdownList,
+  Icon
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
@@ -88,9 +89,12 @@ export const OverflowMenuMultiGroup: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={
+                <Icon>
+                  <EllipsisVIcon />
+                </Icon>
+              }
+            />
           )}
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx
index 794ff820099..1dac3497b1e 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx
@@ -10,7 +10,8 @@ import {
   Button,
   ButtonVariant,
   Dropdown,
-  DropdownList
+  DropdownList,
+  Icon
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -62,9 +63,12 @@ export const OverflowMenuPersistent: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={
+                <Icon>
+                  <EllipsisVIcon />
+                </Icon>
+              }
+            />
           )}
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx
index a83a7789466..109fd35cc55 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx
@@ -8,7 +8,8 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Dropdown,
-  DropdownList
+  DropdownList,
+  Icon
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -62,9 +63,12 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={
+                <Icon>
+                  <EllipsisVIcon />
+                </Icon>
+              }
+            />
           )}
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
index 3ba89ed6a1d..ee12a08fb25 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
@@ -10,6 +10,7 @@ import {
   DropdownItem,
   DropdownList,
   Divider,
+  Icon,
   MenuToggle,
   MenuToggleCheckbox,
   MenuToggleElement,
@@ -229,9 +230,12 @@ export const ToolbarStacked: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={onKebabToggle}
                       isExpanded={kebabIsOpen}
-                    >
-                      <EllipsisVIcon />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon />
+                        </Icon>
+                      }
+                    />
                   )}
                   isOpen={kebabIsOpen}
                 >
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
index f9dfa122bbd..df8bf7fc13d 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
@@ -4,6 +4,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   Toolbar,
   ToolbarItem,
   ToolbarContent,
@@ -231,9 +232,12 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
               onClick={onKebabToggle}
               variant="plain"
               aria-label="Toolbar with filters example kebab toggle"
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={
+                <Icon>
+                  <EllipsisVIcon aria-hidden="true" />
+                </Icon>
+              }
+            />
           )}
         >
           <DropdownList>
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewWithActionItems.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewWithActionItems.tsx
index ff22530aaf3..30a15047122 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeViewWithActionItems.tsx
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewWithActionItems.tsx
@@ -5,6 +5,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   TreeViewDataItem
 } from '@patternfly/react-core';
@@ -47,9 +48,12 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
               onClick={onToggle}
               variant="plain"
               aria-label="Tree view with actions example kebab toggle"
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={
+                <Icon>
+                  <EllipsisVIcon />
+                </Icon>
+              }
+            />
           )}
         >
           <DropdownList>
diff --git a/packages/react-core/src/demos/CardView/examples/CardView.tsx b/packages/react-core/src/demos/CardView/examples/CardView.tsx
index 32ff8a17d19..1289099aa0e 100644
--- a/packages/react-core/src/demos/CardView/examples/CardView.tsx
+++ b/packages/react-core/src/demos/CardView/examples/CardView.tsx
@@ -17,6 +17,7 @@ import {
   EmptyStateVariant,
   EmptyStateActions,
   Gallery,
+  Icon,
   MenuToggle,
   MenuToggleCheckbox,
   OverflowMenu,
@@ -429,9 +430,12 @@ export const CardViewBasic: React.FunctionComponent = () => {
                   variant="plain"
                   onClick={onToolbarKebabDropdownToggle}
                   isExpanded={isLowerToolbarKebabDropdownOpen}
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon />
+                    </Icon>
+                  }
+                />
               )}
               isOpen={isLowerToolbarKebabDropdownOpen}
               onOpenChange={(isOpen) => setIsLowerToolbarDropdownOpen(isOpen)}
@@ -520,9 +524,12 @@ export const CardViewBasic: React.FunctionComponent = () => {
                                 onCardKebabDropdownToggle(e, key.toString());
                               }}
                               isExpanded={!!state[key]}
-                            >
-                              <EllipsisVIcon />
-                            </MenuToggle>
+                              icon={
+                                <Icon>
+                                  <EllipsisVIcon />
+                                </Icon>
+                              }
+                            />
                           )}
                           popperProps={{ position: 'right' }}
                         >
diff --git a/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx
index 6ab61463836..440e6599f70 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx
@@ -9,7 +9,8 @@ import {
   Dropdown,
   DropdownGroup,
   DropdownList,
-  DropdownItem
+  DropdownItem,
+  Icon
 } from '@patternfly/react-core';
 import ThIcon from '@patternfly/react-icons/dist/js/icons/th-icon';
 import pfIcon from '@patternfly/react-core/src/demos/Card/pf-logo-small.svg';
@@ -215,9 +216,12 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
           onClick={onToggleClick}
           isExpanded={isOpen}
           style={{ width: 'auto' }}
-        >
-          <ThIcon />
-        </MenuToggle>
+          icon={
+            <Icon>
+              <ThIcon />
+            </Icon>
+          }
+        />
       )}
       ref={menuRef}
       onActionClick={onFavorite}
diff --git a/packages/react-core/src/demos/DashboardHeader.tsx b/packages/react-core/src/demos/DashboardHeader.tsx
index 969ac730753..433c91175ed 100644
--- a/packages/react-core/src/demos/DashboardHeader.tsx
+++ b/packages/react-core/src/demos/DashboardHeader.tsx
@@ -9,6 +9,7 @@ import {
   DropdownGroup,
   DropdownItem,
   DropdownList,
+  Icon,
   Masthead,
   MastheadMain,
   MastheadToggle,
@@ -137,9 +138,12 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label="Settings and help"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -158,9 +162,12 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label="Toolbar menu"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownGroup key="group 2" aria-label="User actions">
@@ -182,7 +189,11 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                     ref={toggleRef}
                     isExpanded={isDropdownOpen}
                     onClick={onDropdownToggle}
-                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
+                    icon={
+                      <Icon>
+                        <Avatar src={imgAvatar} alt="" size="sm" />
+                      </Icon>
+                    }
                   >
                     Ned Username
                   </MenuToggle>
diff --git a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
index 3160a0f0f64..43fda5df145 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
@@ -9,6 +9,7 @@ import {
   DataListItemCells,
   Flex,
   FlexItem,
+  Icon,
   MenuToggle,
   MenuToggleCheckbox,
   OverflowMenu,
@@ -58,9 +59,15 @@ export const DataListBasic: React.FunctionComponent = () => {
             <Button variant="primary">Create instance</Button>
           </OverflowMenuItem>
           <OverflowMenuControl hasAdditionalOptions>
-            <MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain">
-              <EllipsisVIcon />
-            </MenuToggle>
+            <MenuToggle
+              aria-label="Toolbar kebab overflow menu"
+              variant="plain"
+              icon={
+                <Icon>
+                  <EllipsisVIcon />
+                </Icon>
+              }
+            />
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarItem>
diff --git a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
index 391be32e611..20d155d75d9 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
@@ -187,9 +187,12 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen1}
                         variant="plain"
                         aria-label="Primary content kebab toggle"
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon aria-hidden="true" />
+                          </Icon>
+                        }
+                      />
                     )}
                   >
                     <DropdownList>
@@ -269,9 +272,12 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen2}
                         variant="plain"
                         aria-label="Secondary content kebab toggle"
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon aria-hidden="true" />
+                          </Icon>
+                        }
+                      />
                     )}
                   >
                     <DropdownList>
@@ -351,9 +357,12 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen3}
                         variant="plain"
                         aria-label="Tertiary content kebab toggle"
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon aria-hidden="true" />
+                          </Icon>
+                        }
+                      />
                     )}
                   >
                     <DropdownList>
diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
index fdfcf898db3..db9e4e33851 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
@@ -21,7 +21,8 @@ import {
   ToolbarGroup,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateActions
+  EmptyStateActions,
+  Icon
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -525,7 +526,11 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
       ref={attributeToggleRef}
       onClick={onAttributeToggleClick}
       isExpanded={isAttributeMenuOpen}
-      icon={<FilterIcon />}
+      icon={
+        <Icon>
+          <FilterIcon />
+        </Icon>
+      }
     >
       {activeAttributeMenu}
     </MenuToggle>
diff --git a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
index 02d271100e9..bec6860d336 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  Icon,
   Menu,
   MenuContent,
   MenuList,
@@ -291,7 +292,11 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}
-      icon={<FilterIcon />}
+      icon={
+        <Icon>
+          <FilterIcon />
+        </Icon>
+      }
       {...(selections.length > 0 && { badge: <Badge isRead>{selections.length}</Badge> })}
       style={
         {
diff --git a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
index cbd0ac327fc..706e05e3ca0 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
@@ -20,7 +20,8 @@ import {
   ToolbarFilter,
   ToolbarToggleGroup,
   MenuGroup,
-  EmptyStateActions
+  EmptyStateActions,
+  Icon
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -322,7 +323,11 @@ export const FilterFaceted: React.FunctionComponent = () => {
       {...(areSelectionsPresent && {
         badge: <Badge isRead>{locationSelections.length + statusSelections.length}</Badge>
       })}
-      icon={<FilterIcon />}
+      icon={
+        <Icon>
+          <FilterIcon />
+        </Icon>
+      }
       style={
         {
           width: '200px'
diff --git a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
index c2f03c640df..6201121951f 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
@@ -19,7 +19,8 @@ import {
   Badge,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateActions
+  EmptyStateActions,
+  Icon
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -292,7 +293,11 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       ref={statusToggleRef}
       onClick={onStatusToggleClick}
       isExpanded={isStatusMenuOpen}
-      icon={<FilterIcon />}
+      icon={
+        <Icon>
+          <FilterIcon />
+        </Icon>
+      }
       style={
         {
           width: '200px'
@@ -391,7 +396,11 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       onClick={onLocationMenuToggleClick}
       isExpanded={isLocationMenuOpen}
       {...(locationSelections.length > 0 && { badge: <Badge isRead>{locationSelections.length}</Badge> })}
-      icon={<FilterIcon />}
+      icon={
+        <Icon>
+          <FilterIcon />
+        </Icon>
+      }
       style={
         {
           width: '200px'
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
index 7d63bc50335..0c8d988ea76 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
@@ -17,7 +17,8 @@ import {
   Button,
   Bullseye,
   ToolbarToggleGroup,
-  EmptyStateActions
+  EmptyStateActions,
+  Icon
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -293,7 +294,11 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
       ref={statusToggleRef}
       onClick={onStatusToggleClick}
       isExpanded={isStatusMenuOpen}
-      icon={<FilterIcon />}
+      icon={
+        <Icon>
+          <FilterIcon />
+        </Icon>
+      }
       style={
         {
           width: '200px'
@@ -387,7 +392,11 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
       ref={locationToggleRef}
       onClick={onLocationMenuToggleClick}
       isExpanded={isLocationMenuOpen}
-      icon={<FilterIcon />}
+      icon={
+        <Icon>
+          <FilterIcon />
+        </Icon>
+      }
       style={
         {
           width: '200px'
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
index f17ec50f154..9ad84c89b27 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  Icon,
   Menu,
   MenuContent,
   MenuList,
@@ -295,7 +296,11 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}
-      icon={<FilterIcon />}
+      icon={
+        <Icon>
+          <FilterIcon />
+        </Icon>
+      }
       style={
         {
           width: '200px'
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index adcc9fa0b29..aa3a8cb0de4 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -16,6 +16,7 @@ import {
   EmptyStateBody,
   EmptyStateFooter,
   EmptyStateVariant,
+  Icon,
   MenuToggle,
   Nav,
   NavItem,
@@ -221,9 +222,12 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onKebabDropdownToggle}
                     variant="plain"
                     aria-label="Settings and help"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
+                  />
                 )}
               >
                 <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -341,9 +345,12 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => onToggle('toggle-id-0')}
               isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={
+                <Icon>
+                  <EllipsisVIcon aria-hidden="true" />
+                </Icon>
+              }
+            />
           )}
         >
           <DropdownList>{notificationDrawerActions}</DropdownList>
@@ -376,9 +383,12 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-1')}
                       isExpanded={isActionsMenuOpen['toggle-id-1'] || false}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -412,9 +422,12 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-2')}
                       isExpanded={isActionsMenuOpen['toggle-id-2'] || false}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -449,9 +462,12 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-3')}
                       isExpanded={isActionsMenuOpen['toggle-id-3'] || false}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -485,9 +501,12 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-4')}
                       isExpanded={isActionsMenuOpen['toggle-id-4'] || false}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
index 79faf1020bf..4c0e43cf82d 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
@@ -16,6 +16,7 @@ import {
   EmptyStateBody,
   EmptyStateFooter,
   EmptyStateVariant,
+  Icon,
   MenuToggle,
   Nav,
   NavItem,
@@ -271,9 +272,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                     onClick={onKebabDropdownToggle}
                     variant="plain"
                     aria-label="Settings and help"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon aria-hidden="true" />
+                      </Icon>
+                    }
+                  />
                 )}
               >
                 <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -392,9 +396,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => onToggle('toggle-id-0')}
               isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={
+                <Icon>
+                  <EllipsisVIcon aria-hidden="true" />
+                </Icon>
+              }
+            />
           )}
         >
           <DropdownList>{notificationDrawerActions}</DropdownList>
@@ -434,9 +441,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-5')}
                           isExpanded={isActionsMenuOpen['toggle-id-5'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -470,9 +480,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-6')}
                           isExpanded={isActionsMenuOpen['toggle-id-6'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -507,9 +520,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-7')}
                           isExpanded={isActionsMenuOpen['toggle-id-7'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -543,9 +559,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-8')}
                           isExpanded={isActionsMenuOpen['toggle-id-8'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -588,9 +607,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-9')}
                           isExpanded={isActionsMenuOpen['toggle-id-9'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -624,9 +646,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-10')}
                           isExpanded={isActionsMenuOpen['toggle-id-10'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -661,9 +686,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-11')}
                           isExpanded={isActionsMenuOpen['toggle-id-11'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -697,9 +725,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-12')}
                           isExpanded={isActionsMenuOpen['toggle-id-12'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
index c11e65c4122..a60157b47d8 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
@@ -374,9 +374,12 @@ export const PaginatedTableAction = () => {
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label={translation.kebabDropdown.settingsAndHelp}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -395,9 +398,12 @@ export const PaginatedTableAction = () => {
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label={translation.kebabAndUserDropdown.toolbarMenuAriaLabel}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownGroup key="group 2" aria-label={translation.kebabAndUserDropdown.groupAriaLabel}>
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
index 31a14cdfd5f..1903bcd29f1 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
@@ -398,9 +398,12 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label={translation.kebabDropdown.settingsAndHelp}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -419,9 +422,12 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label={translation.kebabAndUserDropdown.toolbarMenuAriaLabel}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownGroup key="group 2" aria-label={translation.kebabAndUserDropdown.groupAriaLabel}>
diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
index 87ecd8a90f9..b9f5cf4784e 100644
--- a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
+++ b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
@@ -24,6 +24,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -248,9 +249,12 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
               variant="plain"
               onClick={() => onDropdownToggle('dropdown-toggle-id-0')}
               aria-label="Notification drawer actions"
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={
+                <Icon>
+                  <EllipsisVIcon aria-hidden="true" />
+                </Icon>
+              }
+            />
           )}
         >
           <DropdownList>{notificationDrawerActions}</DropdownList>
@@ -280,9 +284,12 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
                         variant="plain"
                         onClick={() => onDropdownToggle(key)}
                         aria-label={`Notification ${index + 1} actions`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon aria-hidden="true" />
+                          </Icon>
+                        }
+                      />
                     )}
                   >
                     <DropdownList>{notificationDrawerDropdownItems(key)}</DropdownList>
diff --git a/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx b/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
index 00faa385a2b..da45f10064c 100644
--- a/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
@@ -10,6 +10,7 @@ import {
   Label,
   Grid,
   Flex,
+  Icon,
   List,
   ListItem,
   Button,
@@ -63,9 +64,12 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
           onClick={onActionToggle}
           variant="plain"
           aria-label="Horizontal card grid demo kebab toggle"
-        >
-          <EllipsisVIcon aria-hidden="true" />
-        </MenuToggle>
+          icon={
+            <Icon>
+              <EllipsisVIcon aria-hidden="true" />
+            </Icon>
+          }
+        />
       )}
     >
       <DropdownList>{dropdownItems}</DropdownList>
diff --git a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
index 3725c11c924..6cf98bf303b 100644
--- a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
+++ b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
@@ -9,6 +9,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -65,7 +66,11 @@ export const DateTimePicker: React.FunctionComponent = () => {
           onClick={onToggleTime}
           isExpanded={isTimeOpen}
           aria-label="Time picker"
-          icon={<OutlinedClockIcon aria-hidden="true" />}
+          icon={
+            <Icon>
+              <OutlinedClockIcon aria-hidden="true" />
+            </Icon>
+          }
         />
       )}
     >
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
index e40ea9286a6..07631f3746b 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
@@ -15,6 +15,7 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
+  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -211,9 +212,12 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -232,9 +236,12 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index 51826d3544c..af2384e226c 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -16,6 +16,7 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
+  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -156,9 +157,12 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       onClick={onToggleClick}
       isExpanded={isOpen}
       style={{ width: 'auto' }}
-    >
-      <ThIcon />
-    </MenuToggle>
+      icon={
+        <Icon>
+          <ThIcon />
+        </Icon>
+      }
+    />
   );
 
   const menuItems = [
@@ -412,9 +416,12 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -433,9 +440,12 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
index 16a0edb7e01..7d98799fedb 100644
--- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -9,6 +9,7 @@ import {
   DropdownGroup,
   DropdownItem,
   DropdownList,
+  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -157,9 +158,12 @@ export const NavFlyout: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -178,9 +182,12 @@ export const NavFlyout: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
index 550823c7bf5..b0a249b90dc 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
@@ -14,6 +14,7 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
+  Icon,
   Masthead,
   MastheadMain,
   MastheadBrand,
@@ -135,9 +136,12 @@ export const NavHorizontal: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -156,9 +160,12 @@ export const NavHorizontal: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
index 1c64947ae8d..cd4ebff0f0b 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
@@ -14,6 +14,7 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
+  Icon,
   MenuToggle,
   Masthead,
   MastheadMain,
@@ -184,9 +185,12 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -205,9 +209,12 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">
diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
index 88edc7da7f8..ebe9782d4d6 100644
--- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
@@ -14,6 +14,7 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
+  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -151,9 +152,12 @@ export const NavManual: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -172,9 +176,12 @@ export const NavManual: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">
diff --git a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
index fc74c057f37..c252e3ce17f 100644
--- a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
@@ -15,6 +15,7 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
+  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -164,9 +165,12 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -185,9 +189,12 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index 2a443776ff9..2541cca9ce4 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -16,6 +16,7 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
+  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -147,9 +148,12 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -168,9 +172,12 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
index 41b48a59a2a..b93f9f7e79a 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -16,6 +16,7 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
+  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -147,9 +148,12 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -168,9 +172,12 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index 6a139aecedf..7fb01ce6821 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -16,6 +16,7 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
+  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -139,9 +140,12 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -160,9 +164,12 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
index b62382e7b98..95879d556de 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
@@ -22,6 +22,7 @@ import {
   Flex,
   FlexItem,
   Gallery,
+  Icon,
   MenuToggle,
   MenuToggleCheckbox,
   PageSection,
@@ -469,9 +470,12 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToolbarKebabDropdownToggle}
               aria-label="Toolbar actions"
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={
+                <Icon>
+                  <EllipsisVIcon aria-hidden="true" />
+                </Icon>
+              }
+            />
           )}
         >
           <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
@@ -528,9 +532,12 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
                           onCardKebabDropdownToggle(e, key.toString());
                         }}
                         isExpanded={!!state[key]}
-                      >
-                        <EllipsisVIcon />
-                      </MenuToggle>
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon />
+                          </Icon>
+                        }
+                      />
                     )}
                   >
                     <DropdownList>
diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
index c1f1e20ae7f..bb0981aa63b 100644
--- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
@@ -15,6 +15,7 @@ import {
   DropdownList,
   Flex,
   FlexItem,
+  Icon,
   Label,
   LabelGroup,
   MenuToggle,
@@ -171,9 +172,12 @@ export const TablesAndTabs = () => {
       aria-haspopup="menu"
       isExpanded={props.isOpen}
       ref={props.toggleRef}
-    >
-      <EllipsisVIcon />
-    </MenuToggle>
+      icon={
+        <Icon>
+          <EllipsisVIcon />
+        </Icon>
+      }
+    />
   );
 
   const toolbar = (
@@ -185,7 +189,15 @@ export const TablesAndTabs = () => {
           </ToolbarItem>
         </ToolbarToggleGroup>
         <ToolbarItem>
-          <MenuToggle variant="plain" aria-label="Sort columns" icon={<SortAmountDownIcon aria-hidden="true" />} />
+          <MenuToggle
+            variant="plain"
+            aria-label="Sort columns"
+            icon={
+              <Icon>
+                <SortAmountDownIcon aria-hidden="true" />
+              </Icon>
+            }
+          />
         </ToolbarItem>
         <OverflowMenu breakpoint="md">
           <OverflowMenuContent>
@@ -208,7 +220,11 @@ export const TablesAndTabs = () => {
                   variant="plain"
                   onClick={() => {}}
                   isExpanded={false}
-                  icon={<EllipsisVIcon />}
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon />
+                    </Icon>
+                  }
                 />
               )}
               isOpen={false}
diff --git a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
index 3007c02050a..680f7d0f00b 100644
--- a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
+++ b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Badge,
   Button,
+  Icon,
   MenuToggle,
   SearchInput,
   Select,
@@ -301,7 +302,16 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
           onOpenChangeKeys={['Escape']}
           onSelect={onOptionSelect}
           toggle={(toggleRef) => (
-            <MenuToggle ref={toggleRef} isExpanded={optionExpanded} onClick={onOptionToggle} icon={<CogIcon />}>
+            <MenuToggle
+              ref={toggleRef}
+              isExpanded={optionExpanded}
+              onClick={onOptionToggle}
+              icon={
+                <Icon>
+                  <CogIcon />
+                </Icon>
+              }
+            >
               Options
             </MenuToggle>
           )}
@@ -355,7 +365,11 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
                 ref={toggleRef}
                 isExpanded={optionExpandedMobile}
                 onClick={onOptionToggleMobile}
-                icon={<CogIcon />}
+                icon={
+                  <Icon>
+                    <CogIcon />
+                  </Icon>
+                }
                 aria-label="Options"
               />
             )}
@@ -431,7 +445,11 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
                 ref={toggleRef}
                 isExpanded={externalExpandedMobile}
                 onClick={onExternalToggleMobile}
-                icon={<ExternalLinkAltIcon />}
+                icon={
+                  <Icon>
+                    <ExternalLinkAltIcon />
+                  </Icon>
+                }
                 aria-label="External logs"
               />
             )}
@@ -452,7 +470,11 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
                 ref={toggleRef}
                 isExpanded={downloadExpandedMobile}
                 onClick={onDownloadToggleMobile}
-                icon={<DownloadIcon />}
+                icon={
+                  <Icon>
+                    <DownloadIcon />
+                  </Icon>
+                }
                 aria-label="Download"
               />
             )}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
index 9cf4c53ccd8..2c88fddfc2d 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
@@ -14,6 +14,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
+  Icon,
   MenuToggle
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -149,7 +150,11 @@ class CardDemo extends Component {
               ref={toggleRef}
               isExpanded={this.state.isOpen}
               onClick={this.onToggle}
-              icon={<EllipsisVIcon />}
+              icon={
+                <Icon>
+                  <EllipsisVIcon />
+                </Icon>
+              }
             />
           )}
         >
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
index 888efe428a1..87a1d4e427c 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
@@ -11,6 +11,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
+  Icon,
   MenuToggle
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -82,7 +83,11 @@ class DataListDemo extends React.Component<DataListProps, DataListState> {
                     ref={toggleRef}
                     isExpanded={this.state.isOpen}
                     onClick={this.onToggle}
-                    icon={<EllipsisVIcon />}
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon />
+                      </Icon>
+                    }
                   />
                 )}
               >
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
index fab80b990eb..ab45ab389e8 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
@@ -18,6 +18,7 @@ import {
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -190,9 +191,12 @@ export const DualListSelectorWithActionsDemo: React.FunctionComponent = () => {
                 variant="plain"
                 id="complex-available-toggle"
                 aria-label="Complex actions example available kebab toggle"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
+                icon={
+                  <Icon>
+                    <EllipsisVIcon aria-hidden="true" />
+                  </Icon>
+                }
+              />
             )}
             isOpen={isAvailableKebabOpen}
             onOpenChange={(isOpen: boolean) => setIsAvailableKebabOpen(isOpen)}
@@ -226,9 +230,12 @@ export const DualListSelectorWithActionsDemo: React.FunctionComponent = () => {
                 variant="plain"
                 id="complex-chosen-toggle"
                 aria-label="Complex actions example chosen kebab toggle"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
+                icon={
+                  <Icon>
+                    <EllipsisVIcon aria-hidden="true" />
+                  </Icon>
+                }
+              />
             )}
             isOpen={isChosenKebabOpen}
             onOpenChange={(isOpen: boolean) => setIsChosenKebabOpen(isOpen)}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo.tsx
index 4447bc1d896..26660304ccc 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownList, MenuToggle } from '@patternfly/react-core';
+import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownList, Icon, MenuToggle } from '@patternfly/react-core';
 import {
   DualListSelector as DLSDeprecated,
   DualListSelectorProps as DLSPropsDeprecated
@@ -139,7 +139,11 @@ class DualListSelectorDeprecatedWithActionsDemo extends React.Component<DLSProps
             ref={toggleRef}
             isExpanded={this.state.isAvailableKebabOpen}
             onClick={() => this.onToggle('available')}
-            icon={<EllipsisVIcon />}
+            icon={
+              <Icon>
+                <EllipsisVIcon />
+              </Icon>
+            }
           />
         )}
       >
@@ -166,7 +170,11 @@ class DualListSelectorDeprecatedWithActionsDemo extends React.Component<DLSProps
             ref={toggleRef}
             isExpanded={this.state.isChosenKebabOpen}
             onClick={() => this.onToggle('chosen')}
-            icon={<EllipsisVIcon />}
+            icon={
+              <Icon>
+                <EllipsisVIcon />
+              </Icon>
+            }
           />
         )}
       >
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
index 1e216d22c33..8f178a15c1c 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
@@ -16,6 +16,7 @@ import {
   DropdownList,
   MenuToggle,
   Divider,
+  Icon,
   MenuToggleElement,
   MastheadProps
 } from '@patternfly/react-core';
@@ -181,9 +182,12 @@ export class MastheadDemo extends Component<MastheadProps> {
                         onClick={this.onKebabToggle}
                         id="toggle-id-kebab"
                         variant="plain"
-                      >
-                        <EllipsisVIcon />
-                      </MenuToggle>
+                        icon={
+                          <Icon>
+                            <EllipsisVIcon />
+                          </Icon>
+                        }
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx
index 9f650e73f3f..47d8f8382f5 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx
@@ -11,6 +11,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
+  Icon,
   MenuToggle,
   MenuToggleElement,
   Divider
@@ -74,9 +75,12 @@ export class BasicNotificationDrawerDemo extends React.Component<
                 onClick={() => this.onToggle(0)}
                 id="toggle-id-0"
                 variant="plain"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
+                icon={
+                  <Icon>
+                    <EllipsisVIcon aria-hidden="true" />
+                  </Icon>
+                }
+              />
             )}
           >
             <DropdownList>{dropdownItems}</DropdownList>
@@ -105,9 +109,12 @@ export class BasicNotificationDrawerDemo extends React.Component<
                       onClick={() => this.onToggle(1)}
                       id="toggle-id-1"
                       variant="plain"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownList>{dropdownItems}</DropdownList>
@@ -135,9 +142,12 @@ export class BasicNotificationDrawerDemo extends React.Component<
                       onClick={() => this.onToggle(2)}
                       id="toggle-id-2"
                       variant="plain"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownList>{dropdownItems}</DropdownList>
@@ -167,9 +177,12 @@ export class BasicNotificationDrawerDemo extends React.Component<
                       onClick={() => this.onToggle(3)}
                       id="toggle-id-3"
                       variant="plain"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownList>{dropdownItems}</DropdownList>
@@ -201,9 +214,12 @@ export class BasicNotificationDrawerDemo extends React.Component<
                       onClick={() => this.onToggle(4)}
                       id="toggle-id-4"
                       variant="plain"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownList>{dropdownItems}</DropdownList>
@@ -228,9 +244,12 @@ export class BasicNotificationDrawerDemo extends React.Component<
                       onClick={() => this.onToggle(5)}
                       id="toggle-id-5"
                       variant="plain"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownList>{dropdownItems}</DropdownList>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
index 5128858558f..1e944e6423e 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
@@ -4,6 +4,7 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateVariant,
+  Icon,
   NotificationDrawer,
   NotificationDrawerProps,
   NotificationDrawerBody,
@@ -106,9 +107,12 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                 variant="plain"
                 onClick={() => this.onToggle('toggle-id-0')}
                 isExpanded={isOpenMap['toggle-id-0'] || false}
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
+                icon={
+                  <Icon>
+                    <EllipsisVIcon aria-hidden="true" />
+                  </Icon>
+                }
+              />
             )}
           >
             <DropdownList>{dropdownItems}</DropdownList>
@@ -144,9 +148,12 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-5')}
                           isExpanded={isOpenMap['toggle-id-5'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{dropdownItems}</DropdownList>
@@ -175,9 +182,12 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-6')}
                           isExpanded={isOpenMap['toggle-id-6'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{dropdownItems}</DropdownList>
@@ -207,9 +217,12 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-7')}
                           isExpanded={isOpenMap['toggle-id-7'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{dropdownItems}</DropdownList>
@@ -238,9 +251,12 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-8')}
                           isExpanded={isOpenMap['toggle-id-8'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{dropdownItems}</DropdownList>
@@ -281,9 +297,12 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-9')}
                           isExpanded={isOpenMap['toggle-id-9'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{dropdownItems}</DropdownList>
@@ -312,9 +331,12 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-10')}
                           isExpanded={isOpenMap['toggle-id-10'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{dropdownItems}</DropdownList>
@@ -344,9 +366,12 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-11')}
                           isExpanded={isOpenMap['toggle-id-11'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{dropdownItems}</DropdownList>
@@ -375,9 +400,12 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-12')}
                           isExpanded={isOpenMap['toggle-id-12'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon aria-hidden="true" />
+                            </Icon>
+                          }
+                        />
                       )}
                     >
                       <DropdownList>{dropdownItems}</DropdownList>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
index a2bb0fc9b3d..26778aad372 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
@@ -9,7 +9,8 @@ import {
   MenuToggle,
   Button,
   Dropdown,
-  DropdownList
+  DropdownList,
+  Icon
 } from '@patternfly/react-core';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
@@ -88,9 +89,12 @@ export class OverflowMenuDemo extends React.Component {
                 variant="plain"
                 onClick={this.onSimpleToggle}
                 isExpanded={isSimpleOpen}
-              >
-                <EllipsisVIcon />
-              </MenuToggle>
+                icon={
+                  <Icon>
+                    <EllipsisVIcon />
+                  </Icon>
+                }
+              />
             )}
             isOpen={isSimpleOpen}
           >
@@ -175,9 +179,12 @@ export class OverflowMenuDemo extends React.Component {
                 variant="plain"
                 onClick={this.onAdditionalOptionsToggle}
                 isExpanded={isAdditionalOptionsOpen}
-              >
-                <EllipsisVIcon />
-              </MenuToggle>
+                icon={
+                  <Icon>
+                    <EllipsisVIcon />
+                  </Icon>
+                }
+              />
             )}
             isOpen={isAdditionalOptionsOpen}
           >
@@ -242,9 +249,12 @@ export class OverflowMenuDemo extends React.Component {
                 variant="plain"
                 onClick={this.onPersistToggle}
                 isExpanded={isPersistOpen}
-              >
-                <EllipsisVIcon />
-              </MenuToggle>
+                icon={
+                  <Icon>
+                    <EllipsisVIcon />
+                  </Icon>
+                }
+              />
             )}
             isOpen={isPersistOpen}
           >
@@ -317,9 +327,12 @@ export class OverflowMenuDemo extends React.Component {
                   variant="plain"
                   onClick={this.onContainerBreakpointToggle}
                   isExpanded={isContainerBreakpointOpen}
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={
+                    <Icon>
+                      <EllipsisVIcon />
+                    </Icon>
+                  }
+                />
               )}
               isOpen={isContainerBreakpointOpen}
             >
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
index 49232673441..d308f73790c 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
@@ -11,6 +11,7 @@ import {
   ToolbarToggleGroup,
   ToolbarGroup,
   ToolbarProps,
+  Icon,
   InputGroup,
   InputGroupItem,
   TextInput,
@@ -273,7 +274,11 @@ class ToolbarDemo extends React.Component<ToolbarProps, ToolbarState> {
                 ref={toggleRef}
                 onClick={this.onKebabToggle}
                 isExpanded={kebabIsOpen}
-                icon={<EllipsisVIcon />}
+                icon={
+                  <Icon>
+                    <EllipsisVIcon />
+                  </Icon>
+                }
               />
             )}
           >
diff --git a/packages/react-table/src/components/Table/ActionsColumn.tsx b/packages/react-table/src/components/Table/ActionsColumn.tsx
index 0fb5e79c556..6cf626ebe67 100644
--- a/packages/react-table/src/components/Table/ActionsColumn.tsx
+++ b/packages/react-table/src/components/Table/ActionsColumn.tsx
@@ -3,6 +3,7 @@ import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/dis
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
 import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
+import { Icon } from '@patternfly/react-core/dist/esm/components/Icon';
 import { IAction, IExtraData, IRowData } from './TableTypes';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
@@ -106,7 +107,11 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
               isExpanded={isOpen}
               isDisabled={isDisabled}
               variant="plain"
-              icon={<EllipsisVIcon />}
+              icon={
+                <Icon>
+                  <EllipsisVIcon />
+                </Icon>
+              }
             />
           )
         }
diff --git a/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx b/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx
index b685ea195e7..5d3b58ce306 100644
--- a/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx
+++ b/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx
@@ -9,7 +9,8 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Dropdown,
-  DropdownList
+  DropdownList,
+  Icon
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -105,7 +106,11 @@ export const TableActions: React.FunctionComponent = () => {
                             setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen })))
                           }
                           isExpanded={repo.isMenuOpen}
-                          icon={<EllipsisVIcon />}
+                          icon={
+                            <Icon>
+                              <EllipsisVIcon />
+                            </Icon>
+                          }
                         />
                       )}
                       isOpen={repo.isMenuOpen}
diff --git a/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx b/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
index 952d3f84fc2..e3e1962b70b 100644
--- a/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
+++ b/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
@@ -9,7 +9,8 @@ import {
   SelectList,
   SelectOption,
   MenuToggle,
-  MenuToggleElement
+  MenuToggleElement,
+  Icon
 } from '@patternfly/react-core';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 
@@ -117,7 +118,11 @@ export const TableSortableCustom: React.FunctionComponent = () => {
                   isExpanded={isSortDropdownOpen}
                   variant="plain"
                   aria-label="Sort columns"
-                  icon={<SortAmountDownIcon />}
+                  icon={
+                    <Icon>
+                      <SortAmountDownIcon />
+                    </Icon>
+                  }
                 />
               )}
             >
diff --git a/packages/react-table/src/demos/DashboardHeader.tsx b/packages/react-table/src/demos/DashboardHeader.tsx
index 7a8df4b29b8..a2b544918fc 100644
--- a/packages/react-table/src/demos/DashboardHeader.tsx
+++ b/packages/react-table/src/demos/DashboardHeader.tsx
@@ -9,6 +9,7 @@ import {
   DropdownGroup,
   DropdownItem,
   DropdownList,
+  Icon,
   Masthead,
   MastheadMain,
   MastheadToggle,
@@ -137,9 +138,12 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label="Settings and help"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -158,9 +162,12 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label="Toolbar menu"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={
+                        <Icon>
+                          <EllipsisVIcon aria-hidden="true" />
+                        </Icon>
+                      }
+                    />
                   )}
                 >
                   <DropdownGroup key="group 2" aria-label="User actions">
diff --git a/packages/react-table/src/demos/examples/TableColumnManagement.tsx b/packages/react-table/src/demos/examples/TableColumnManagement.tsx
index 6f198635ded..fc6afea8c4b 100644
--- a/packages/react-table/src/demos/examples/TableColumnManagement.tsx
+++ b/packages/react-table/src/demos/examples/TableColumnManagement.tsx
@@ -10,6 +10,7 @@ import {
   DataListItemRow,
   DataListCell,
   DataListItemCells,
+  Icon,
   Label,
   Toolbar,
   ToolbarContent,
@@ -402,14 +403,26 @@ export const TableColumnManagement: React.FunctionComponent = () => {
           <ToolbarItem variant="overflow-menu">
             <OverflowMenu breakpoint="md">
               <OverflowMenuItem>
-                <MenuToggle>
-                  <FilterIcon /> Name
+                <MenuToggle
+                  icon={
+                    <Icon>
+                      <FilterIcon />
+                    </Icon>
+                  }
+                >
+                  Name
                 </MenuToggle>
               </OverflowMenuItem>
               <OverflowMenuItem>
-                <MenuToggle variant="plain" aria-label="Sort columns">
-                  <SortAmountDownIcon aria-hidden="true" />
-                </MenuToggle>
+                <MenuToggle
+                  variant="plain"
+                  aria-label="Sort columns"
+                  icon={
+                    <Icon>
+                      <SortAmountDownIcon aria-hidden="true" />
+                    </Icon>
+                  }
+                />
               </OverflowMenuItem>
               <OverflowMenuGroup groupType="button" isPersistent>
                 <OverflowMenuItem>
diff --git a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
index 9b0e3cbc492..e2e5e55f358 100644
--- a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
+++ b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
@@ -10,6 +10,7 @@ import {
   DataListItemRow,
   DataListCell,
   DataListItemCells,
+  Icon,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -591,10 +592,26 @@ export const TableColumnManagementWithDraggable: React.FunctionComponent = () =>
         <ToolbarItem variant="overflow-menu">
           <OverflowMenu breakpoint="md">
             <OverflowMenuItem isPersistent>
-              <MenuToggle icon={<FilterIcon />}>Name</MenuToggle>
+              <MenuToggle
+                icon={
+                  <Icon>
+                    <FilterIcon />
+                  </Icon>
+                }
+              >
+                Name
+              </MenuToggle>
             </OverflowMenuItem>
             <OverflowMenuItem>
-              <MenuToggle variant="plain" aria-label="Sort columns" icon={<SortAmountDownIcon aria-hidden="true" />} />
+              <MenuToggle
+                variant="plain"
+                aria-label="Sort columns"
+                icon={
+                  <Icon>
+                    <SortAmountDownIcon aria-hidden="true" />
+                  </Icon>
+                }
+              />
             </OverflowMenuItem>
             <OverflowMenuGroup groupType="button" isPersistent>
               <OverflowMenuItem>
diff --git a/packages/react-table/src/demos/examples/TableCompact.tsx b/packages/react-table/src/demos/examples/TableCompact.tsx
index ca1bc5bff38..c9b2e832bb6 100644
--- a/packages/react-table/src/demos/examples/TableCompact.tsx
+++ b/packages/react-table/src/demos/examples/TableCompact.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Button,
   Card,
+  Icon,
   MenuToggle,
   MenuToggleElement,
   Pagination,
@@ -73,7 +74,11 @@ export const TableCompact: React.FunctionComponent = () => {
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                icon={<FilterIcon />}
+                icon={
+                  <Icon>
+                    <FilterIcon />
+                  </Icon>
+                }
                 ref={toggleRef}
                 onClick={() => setIsSelectOpen(!isSelectOpen)}
                 isExpanded={isSelectOpen}
diff --git a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
index 0b7c7f41b7d..eb44b4b53ef 100644
--- a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
+++ b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
@@ -5,6 +5,7 @@ import {
   Card,
   Flex,
   FlexItem,
+  Icon,
   MenuToggle,
   MenuToggleElement,
   Toolbar,
@@ -91,8 +92,17 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
             id="select-example"
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle ref={toggleRef} onClick={() => setIsSelectOpen(!isSelectOpen)} isExpanded={isSelectOpen}>
-                <FilterIcon /> Status
+              <MenuToggle
+                ref={toggleRef}
+                onClick={() => setIsSelectOpen(!isSelectOpen)}
+                isExpanded={isSelectOpen}
+                icon={
+                  <Icon>
+                    <FilterIcon />
+                  </Icon>
+                }
+              >
+                Status
               </MenuToggle>
             )}
             isOpen={isSelectOpen}
diff --git a/packages/react-table/src/demos/examples/TableFilterable.tsx b/packages/react-table/src/demos/examples/TableFilterable.tsx
index d6ed8df2cfb..9ff81760ce3 100644
--- a/packages/react-table/src/demos/examples/TableFilterable.tsx
+++ b/packages/react-table/src/demos/examples/TableFilterable.tsx
@@ -7,6 +7,7 @@ import {
   EmptyStateActions,
   EmptyStateBody,
   EmptyStateFooter,
+  Icon,
   Label,
   MenuToggle,
   MenuToggleElement,
@@ -125,7 +126,11 @@ export const TableFilterable: React.FunctionComponent = () => {
               ref={toggleRef}
               onClick={onCategoryToggle}
               isExpanded={isCategoryDropdownOpen}
-              icon={<FilterIcon />}
+              icon={
+                <Icon>
+                  <FilterIcon />
+                </Icon>
+              }
               style={
                 {
                   width: '100%',
diff --git a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
index 2cd73c05a47..cb929e6b594 100644
--- a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
+++ b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
@@ -8,6 +8,7 @@ import {
   DropdownList,
   Flex,
   FlexItem,
+  Icon,
   MenuToggle,
   MenuToggleElement,
   PageSection,
@@ -153,7 +154,11 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
                 onClick={() => setIsSortDropdownOpen(!isSortDropdownOpen)}
                 isExpanded={isSortDropdownOpen}
                 variant="plain"
-                icon={<SortAmountDownIcon />}
+                icon={
+                  <Icon>
+                    <SortAmountDownIcon />
+                  </Icon>
+                }
               />
             )}
           >
@@ -201,7 +206,11 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
                     variant="plain"
                     onClick={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)}
                     isExpanded={false}
-                    icon={<EllipsisVIcon />}
+                    icon={
+                      <Icon>
+                        <EllipsisVIcon />
+                      </Icon>
+                    }
                   />
                 )}
                 isOpen={isKebabDropdownOpen}
diff --git a/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx b/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
index a9a06881139..22d52f6816c 100644
--- a/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
+++ b/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {
   Button,
   Card,
+  Icon,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -102,7 +103,11 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => {
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                icon={<FilterIcon />}
+                icon={
+                  <Icon>
+                    <FilterIcon />
+                  </Icon>
+                }
                 ref={toggleRef}
                 onClick={() => setIsSelectOpen(!isSelectOpen)}
                 isExpanded={isSelectOpen}
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
index bb61e6eb8b9..73d481b9805 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { sortable, info } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
-import { Toolbar, ToolbarContent, ToolbarItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import { Toolbar, ToolbarContent, ToolbarItem, MenuToggle, MenuToggleElement, Icon } from '@patternfly/react-core';
 import {
   Select as NewSelect,
   SelectGroup as NewSelectGroup,
@@ -137,7 +137,11 @@ export const LegacyTableSortableCustom: React.FunctionComponent = () => {
                   isExpanded={isSortDropdownOpen}
                   variant="plain"
                   aria-label="Sort columns"
-                  icon={<SortAmountDownIcon />}
+                  icon={
+                    <Icon>
+                      <SortAmountDownIcon />
+                    </Icon>
+                  }
                 />
               )}
             >

From 8f4c59a9067a1c1d3444f14c10b95ed9b7a08725 Mon Sep 17 00:00:00 2001
From: Evan <evan.wilkinson@gmail.com>
Date: Sun, 15 Sep 2024 16:13:56 -0400
Subject: [PATCH 2/3] chore(table): updated tests

---
 .../__snapshots__/Table.test.tsx.snap         | 608 +++++++++++-------
 1 file changed, 380 insertions(+), 228 deletions(-)

diff --git a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
index a45b9c351b7..f4d794105ae 100644
--- a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
+++ b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
@@ -171,19 +171,27 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -252,19 +260,27 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -333,19 +349,27 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -414,19 +438,27 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -495,19 +527,27 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -576,19 +616,27 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -657,19 +705,27 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -738,19 +794,27 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -819,19 +883,27 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -5868,19 +5940,27 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -5949,19 +6029,27 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -6030,19 +6118,27 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -6111,19 +6207,27 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -6192,19 +6296,27 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -6273,19 +6385,27 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -6354,19 +6474,27 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -6435,19 +6563,27 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -6516,19 +6652,27 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>
@@ -6598,19 +6742,27 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 192 512"
-                width="1em"
+              <span
+                class="pf-v6-c-icon"
               >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+                <span
+                  class="pf-v6-c-icon__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 192 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
           </button>
         </td>

From 47fd725ddffe4ef3d3da121af0bf4f1ff8f8969c Mon Sep 17 00:00:00 2001
From: Evan <evan.wilkinson@gmail.com>
Date: Fri, 27 Sep 2024 16:45:12 -0400
Subject: [PATCH 3/3] chore(examples): don't wrap icons

---
 .../examples/ActionListSingleGroup.tsx        |   7 +-
 .../Card/examples/CardExpandable.tsx          |   7 +-
 .../Card/examples/CardExpandableWithIcon.tsx  |   7 +-
 .../Card/examples/CardHeaderInCardHead.tsx    |   7 +-
 .../examples/CardOnlyActionsInCardHead.tsx    |   7 +-
 .../Card/examples/CardWithImageAndActions.tsx |   7 +-
 .../DataList/examples/DataListActions.tsx     |   7 +-
 .../DataList/examples/DataListCheckboxes.tsx  |  19 +-
 .../examples/DataListClickableRows.tsx        |  13 +-
 .../DataList/examples/DataListExpandable.tsx  |  19 +-
 .../examples/DataListMixedExpandable.tsx      |  19 +-
 .../examples/DataListWidthModifiers.tsx       |  13 +-
 .../examples/DropdownWithKebabToggle.tsx      |  16 +-
 .../DualListSelectorComplexOptionsActions.tsx |  13 +-
 .../Hint/examples/HintBasicWithTitle.tsx      |   7 +-
 .../Hint/examples/HintBasicWithoutTitle.tsx   |   7 +-
 .../examples/LabelGroupEditableAddModal.tsx   |   8 +-
 .../MenuToggle/examples/MenuToggle.md         |  36 +-
 .../examples/NotificationDrawerBasic.tsx      |  43 +-
 .../examples/NotificationDrawerGroups.tsx     |  55 +-
 .../OverflowMenuBreakpointOnContainer.tsx     |   9 +-
 .../examples/OverflowMenuGroupTypes.tsx       |   9 +-
 .../examples/OverflowMenuMultiGroup.tsx       |   9 +-
 .../examples/OverflowMenuPersistent.tsx       |   9 +-
 .../examples/OverflowMenuSimple.tsx           |   9 +-
 .../Toolbar/examples/ToolbarStacked.tsx       |   7 +-
 .../Toolbar/examples/ToolbarWithFilters.tsx   |   7 +-
 .../examples/TreeViewWithActionItems.tsx      |   7 +-
 .../src/demos/CardView/examples/CardView.tsx  |  13 +-
 .../examples/ApplicationLauncherDemo.tsx      |   9 +-
 .../react-core/src/demos/DashboardHeader.tsx  |  19 +-
 .../demos/DataList/examples/DataListBasic.tsx |  11 +-
 .../DataListExpandableControlInToolbar.tsx    |  20 +-
 .../examples/FilterAttributeSearch.tsx        |   9 +-
 .../Filters/examples/FilterCheckboxSelect.tsx |   7 +-
 .../demos/Filters/examples/FilterFaceted.tsx  |   9 +-
 .../examples/FilterMixedSelectGroup.tsx       |  15 +-
 .../examples/FilterSameSelectGroup.tsx        |  15 +-
 .../Filters/examples/FilterSingleSelect.tsx   |   7 +-
 .../examples/NotificationDrawerBasic.tsx      |  37 +-
 .../examples/NotificationDrawerGrouped.tsx    |  61 +-
 .../src/demos/RTL/examples/PaginatedTable.jsx |  12 +-
 .../src/demos/RTL/examples/PaginatedTable.tsx |  12 +-
 .../AlertGroupToastWithNotificationDrawer.tsx |  13 +-
 .../examples/Card/CardHorizontalGrid.tsx      |   7 +-
 .../DateTimePicker/DateTimePicker.tsx         |   7 +-
 .../Masthead/MastheadWithHorizontalNav.tsx    |  13 +-
 ...stheadWithUtilitiesAndUserDropdownMenu.tsx |  19 +-
 .../src/demos/examples/Nav/NavFlyout.tsx      |  13 +-
 .../src/demos/examples/Nav/NavHorizontal.tsx  |  13 +-
 .../examples/Nav/NavHorizontalWithSubnav.tsx  |  13 +-
 .../src/demos/examples/Nav/NavManual.tsx      |  13 +-
 .../examples/Page/PageContextSelector.tsx     |  13 +-
 .../Page/PageStickySectionBreadcrumb.tsx      |  13 +-
 .../examples/Page/PageStickySectionGroup.tsx  |  13 +-
 .../Page/PageStickySectionGroupAlternate.tsx  |  13 +-
 .../PrimaryDetail/PrimaryDetailCardView.tsx   |  13 +-
 .../src/demos/examples/Tabs/TabsAndTable.tsx  |  23 +-
 .../Toolbar/ConsoleLogViewerToolbar.tsx       |  30 +-
 .../components/demos/CardDemo/CardDemo.tsx    |   7 +-
 .../demos/DataListDemo/DataListDemo.tsx       |   7 +-
 .../DualListSelectorWithActionsDemo.tsx       |  13 +-
 ...lListSelectorDeprecatedWithActionsDemo.tsx |  14 +-
 .../demos/MastheadDemo/MastheadDemo.tsx       |   7 +-
 .../NotificationDrawerBasicDemo.tsx           |  37 +-
 .../NotificationDrawerGroupsDemo.tsx          |  55 +-
 .../OverflowMenuDemo/OverflowMenuDemo.tsx     |  27 +-
 .../demos/ToolbarDemo/ToolbarDemo.tsx         |   7 +-
 .../src/components/Table/ActionsColumn.tsx    |   7 +-
 .../Table/examples/TableActionsOverflow.tsx   |   9 +-
 .../Table/examples/TableSortableCustom.tsx    |   9 +-
 .../react-table/src/demos/DashboardHeader.tsx |  13 +-
 .../demos/examples/TableColumnManagement.tsx  |  17 +-
 .../TableColumnManagementWithDraggable.tsx    |  21 +-
 .../src/demos/examples/TableCompact.tsx       |   7 +-
 .../demos/examples/TableCompoundExpansion.tsx |   7 +-
 .../src/demos/examples/TableFilterable.tsx    |   7 +-
 .../examples/TableSortableResponsive.tsx      |  13 +-
 .../examples/TableStaticBottomPagination.tsx  |   7 +-
 .../__snapshots__/Table.test.tsx.snap         | 608 +++++++-----------
 .../examples/LegacyTableSortableCustom.tsx    |   8 +-
 81 files changed, 422 insertions(+), 1353 deletions(-)

diff --git a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
index 576c16fc5d2..8b9e42d6edc 100644
--- a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
+++ b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
@@ -7,7 +7,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   MenuToggleElement,
   Divider
@@ -85,11 +84,7 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
                   variant="plain"
                   isExpanded={isOpen}
                   aria-label="Action list single group kebab"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={isOpen}
diff --git a/packages/react-core/src/components/Card/examples/CardExpandable.tsx b/packages/react-core/src/components/Card/examples/CardExpandable.tsx
index 732471f6571..3231c0ffa2e 100644
--- a/packages/react-core/src/components/Card/examples/CardExpandable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardExpandable.tsx
@@ -11,7 +11,6 @@ import {
   DropdownList,
   DropdownItem,
   Divider,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -72,11 +71,7 @@ export const CardExpandable: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable example kebab toggle"
-            icon={
-              <Icon>
-                <EllipsisVIcon aria-hidden="true" />
-              </Icon>
-            }
+            icon={<EllipsisVIcon aria-hidden="true" />}
           />
         )}
         isOpen={isOpen}
diff --git a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
index 44801dc886f..22347f78d68 100644
--- a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
+++ b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
@@ -10,7 +10,6 @@ import {
   DropdownList,
   DropdownItem,
   Divider,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -68,11 +67,7 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable with icon example kebab toggle"
-            icon={
-              <Icon>
-                <EllipsisVIcon aria-hidden="true" />
-              </Icon>
-            }
+            icon={<EllipsisVIcon aria-hidden="true" />}
           />
         )}
         isOpen={isOpen}
diff --git a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
index 2db2c6889d6..ea8105f1d3a 100644
--- a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
+++ b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
@@ -9,7 +9,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   MenuToggleElement,
   Divider
@@ -59,11 +58,7 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card title inline with images and actions example kebab toggle"
-            icon={
-              <Icon>
-                <EllipsisVIcon aria-hidden="true" />
-              </Icon>
-            }
+            icon={<EllipsisVIcon aria-hidden="true" />}
           />
         )}
         isOpen={isOpen}
diff --git a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
index 8ebcfdfa91d..3ba044fc230 100644
--- a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
+++ b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
@@ -7,7 +7,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   MenuToggleElement,
   Divider
@@ -57,11 +56,7 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header without title example kebab toggle"
-            icon={
-              <Icon>
-                <EllipsisVIcon aria-hidden="true" />
-              </Icon>
-            }
+            icon={<EllipsisVIcon aria-hidden="true" />}
           />
         )}
         isOpen={isOpen}
diff --git a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
index 8bd10fe05d5..e127b34c670 100644
--- a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
+++ b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
@@ -10,7 +10,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   MenuToggleElement,
   Divider
@@ -65,11 +64,7 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header images and actions example kebab toggle"
-            icon={
-              <Icon>
-                <EllipsisVIcon aria-hidden="true" />
-              </Icon>
-            }
+            icon={<EllipsisVIcon aria-hidden="true" />}
           />
         )}
         isOpen={isOpen}
diff --git a/packages/react-core/src/components/DataList/examples/DataListActions.tsx b/packages/react-core/src/components/DataList/examples/DataListActions.tsx
index 8d95bcbf07e..47fd60367f0 100644
--- a/packages/react-core/src/components/DataList/examples/DataListActions.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListActions.tsx
@@ -10,7 +10,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -88,11 +87,7 @@ export const DataListActions: React.FunctionComponent = () => {
                     onClick={onToggle}
                     variant="plain"
                     aria-label="Data list with actions example kebab toggle"
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
                 isOpen={isOpen}
diff --git a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
index 2ae26ebca50..1bbea5c3fbd 100644
--- a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
@@ -11,7 +11,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -86,11 +85,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle1}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 1"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
               isOpen={isOpen1}
@@ -145,11 +140,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle2}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 2"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
               isOpen={isOpen2}
@@ -213,11 +204,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle3}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 3"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
               isOpen={isOpen3}
diff --git a/packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx b/packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx
index 48898052cb9..b6418441ebc 100644
--- a/packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx
@@ -9,7 +9,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -78,11 +77,7 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 1"
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -132,11 +127,7 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 2"
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
                 isOpen={isOpen2}
diff --git a/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
index 751bc8ee2f6..be044753db1 100644
--- a/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
@@ -11,7 +11,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -98,11 +97,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 1"
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -177,11 +172,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 2"
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
                 isOpen={isOpen2}
@@ -256,11 +247,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 3"
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
                 isOpen={isOpen3}
diff --git a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
index d8d677d58f9..5d44753508d 100644
--- a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
@@ -11,7 +11,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -100,11 +99,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 1"
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -181,11 +176,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 2"
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
                 isOpen={isOpen2}
@@ -250,11 +241,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 3"
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
                 isOpen={isOpen3}
diff --git a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
index 2e3b9fb93af..51bba2098d7 100644
--- a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
@@ -13,7 +13,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -105,11 +104,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle1}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 1"
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                   isOpen={isOpen1}
@@ -183,11 +178,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle2}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 2"
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                   isOpen={isOpen2}
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
index 162413442c6..1ab5f49442b 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
@@ -1,13 +1,5 @@
 import React from 'react';
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  Divider,
-  Icon,
-  MenuToggle,
-  MenuToggleElement
-} from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DropdownWithKebab: React.FunctionComponent = () => {
@@ -35,11 +27,7 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggleClick}
           isExpanded={isOpen}
-          icon={
-            <Icon>
-              <EllipsisVIcon />
-            </Icon>
-          }
+          icon={<EllipsisVIcon />}
         />
       )}
       shouldFocusToggleOnSelect
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
index cc977e0aadf..5b3fa6d747d 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
@@ -18,7 +18,6 @@ import {
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -167,11 +166,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-available-toggle"
                 aria-label="Complex actions example available kebab toggle"
-                icon={
-                  <Icon>
-                    <EllipsisVIcon aria-hidden="true" />
-                  </Icon>
-                }
+                icon={<EllipsisVIcon aria-hidden="true" />}
               />
             )}
             isOpen={isAvailableKebabOpen}
@@ -206,11 +201,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-chosen-toggle"
                 aria-label="Complex actions example chosen kebab toggle"
-                icon={
-                  <Icon>
-                    <EllipsisVIcon aria-hidden="true" />
-                  </Icon>
-                }
+                icon={<EllipsisVIcon aria-hidden="true" />}
               />
             )}
             isOpen={isChosenKebabOpen}
diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
index 29069ab1db7..94f7a9d6f68 100644
--- a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
+++ b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
@@ -9,7 +9,6 @@ import {
   DropdownList,
   DropdownItem,
   Divider,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -38,11 +37,7 @@ export const HintBasicWithTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-          icon={
-            <Icon>
-              <EllipsisVIcon />
-            </Icon>
-          }
+          icon={<EllipsisVIcon />}
         />
       )}
     >
diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
index 69682ba271a..9c2f5cf82fd 100644
--- a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
+++ b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
@@ -8,7 +8,6 @@ import {
   DropdownList,
   DropdownItem,
   Divider,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -37,11 +36,7 @@ export const HintBasicWithoutTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-          icon={
-            <Icon>
-              <EllipsisVIcon />
-            </Icon>
-          }
+          icon={<EllipsisVIcon />}
         />
       )}
     >
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx
index 82aac571303..3907eabb7c7 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx
@@ -5,7 +5,6 @@ import {
   Button,
   Form,
   FormGroup,
-  Icon,
   TextInput,
   Menu,
   MenuContent,
@@ -201,12 +200,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   };
 
   const iconToggle = (
-    <MenuToggle
-      ref={iconToggleRef}
-      onClick={onIconToggleClick}
-      isExpanded={isIconOpen}
-      icon={icon ? <Icon>{icon}</Icon> : null}
-    >
+    <MenuToggle ref={iconToggleRef} onClick={onIconToggleClick} isExpanded={isIconOpen} icon={icon}>
       {icon ? '' : 'Select'}
     </MenuToggle>
   );
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
index 48b93861eb5..b96270cffcb 100644
--- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
@@ -81,36 +81,24 @@ For most basic icons, it is recommended to wrap it inside our [icon component](/
 
 ```ts
 import React from 'react';
-import { MenuToggle, Icon } from '@patternfly/react-core';
+import { MenuToggle } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 <React.Fragment>
   <MenuToggle
-    icon={
-      <Icon>
-        <CogIcon />
-      </Icon>
-    }
+    icon={<CogIcon />}
     variant="primary"
   >
     Icon
   </MenuToggle>{' '}
   <MenuToggle
-    icon={
-      <Icon>
-        <CogIcon />
-      </Icon>
-    }
+    icon={<CogIcon />}
     variant="secondary"
   >
     Icon
   </MenuToggle>{' '}
   <MenuToggle
-    icon={
-      <Icon>
-        <CogIcon />
-      </Icon>
-    }
+    icon={<CogIcon />}
     variant="secondary"
     isDisabled
   >
@@ -127,13 +115,13 @@ This can be used alongside a text label that provides more context for the image
 
 ```ts
 import React from 'react';
-import { MenuToggle, Avatar, Icon } from '@patternfly/react-core';
+import { MenuToggle, Avatar } from '@patternfly/react-core';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 
 <React.Fragment>
-  <MenuToggle icon={<Icon><Avatar src={imgAvatar} alt="avatar" /></Icon>}>Ned Username</MenuToggle>{' '}
-  <MenuToggle icon={<Icon><Avatar src={imgAvatar} alt="avatar" /></Icon>} isExpanded>Ned Username</MenuToggle>{' '}
-  <MenuToggle icon={<Icon><Avatar src={imgAvatar} alt="avatar" /></Icon>} isDisabled>Ned Username</MenuToggle>
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
 </React.Fragment>
 ```
 
@@ -166,15 +154,15 @@ If the toggle does not have any visible text content, use the `aria-label` prope
 
 ```ts
 import React from 'react';
-import { MenuToggle, Icon } from '@patternfly/react-core';
+import { MenuToggle } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 <React.Fragment>
-  <MenuToggle icon={<Icon><EllipsisVIcon /></Icon>} variant="plain" aria-label="plain kebab"/>
+  <MenuToggle icon={<EllipsisVIcon />} variant="plain" aria-label="plain kebab"/>
   {' '}
-  <MenuToggle icon={<Icon><EllipsisVIcon /></Icon>} variant="plain" isExpanded aria-label="plain expanded kebab"/>
+  <MenuToggle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain expanded kebab"/>
   {' '}
-  <MenuToggle icon={<Icon><EllipsisVIcon /></Icon>} variant="plain" isDisabled aria-label="disabled plain kebab"/>
+  <MenuToggle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain kebab"/>
 </React.Fragment>
 ```
 
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index 224a61ffdf3..2a680522119 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -10,7 +10,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -65,11 +64,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               onClick={onToggle(0)}
               variant="plain"
               aria-label={`Basic example header kebab toggle`}
-              icon={
-                <Icon>
-                  <EllipsisVIcon aria-hidden="true" />
-                </Icon>
-              }
+              icon={<EllipsisVIcon aria-hidden="true" />}
             />
           )}
         >
@@ -96,11 +91,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(1)}
                     variant="plain"
                     aria-label={`Basic example notification 1 kebab toggle`}
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
               >
@@ -129,11 +120,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(2)}
                     variant="plain"
                     aria-label={`Basic example notification 2 kebab toggle`}
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
               >
@@ -164,11 +151,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(3)}
                     variant="plain"
                     aria-label={`Basic example notification 3 kebab toggle`}
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
               >
@@ -198,11 +181,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(4)}
                     variant="plain"
                     aria-label={`Basic example notification 4 kebab toggle`}
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
               >
@@ -231,11 +210,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(5)}
                     variant="plain"
                     aria-label={`Basic example notification 5 kebab toggle`}
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
               >
@@ -260,11 +235,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(6)}
                     variant="plain"
                     aria-label={`Basic example notification 6 kebab toggle`}
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
               >
diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
index e2eca10ebc5..403d4328791 100644
--- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
+++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
@@ -18,7 +18,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -90,11 +89,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
               onClick={() => onToggle('groups-kebab-toggle-1')}
               variant="plain"
               aria-label={`Groups example header kebab toggle`}
-              icon={
-                <Icon>
-                  <EllipsisVIcon aria-hidden="true" />
-                </Icon>
-              }
+              icon={<EllipsisVIcon aria-hidden="true" />}
             />
           )}
         >
@@ -129,11 +124,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-2')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 1 kebab toggle`}
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon aria-hidden="true" />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon aria-hidden="true" />}
                       />
                     )}
                   >
@@ -163,11 +154,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-3')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 2 kebab toggle`}
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon aria-hidden="true" />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon aria-hidden="true" />}
                       />
                     )}
                   >
@@ -198,11 +185,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-4')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 3 kebab toggle`}
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon aria-hidden="true" />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon aria-hidden="true" />}
                       />
                     )}
                   >
@@ -232,11 +215,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-5')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 4 kebab toggle`}
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon aria-hidden="true" />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon aria-hidden="true" />}
                       />
                     )}
                   >
@@ -275,11 +254,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-6')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 1 kebab toggle`}
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon aria-hidden="true" />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon aria-hidden="true" />}
                       />
                     )}
                   >
@@ -309,11 +284,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-7')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 2 kebab toggle`}
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon aria-hidden="true" />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon aria-hidden="true" />}
                       />
                     )}
                   >
@@ -344,11 +315,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-8')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 3 kebab toggle`}
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon aria-hidden="true" />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon aria-hidden="true" />}
                       />
                     )}
                   >
@@ -378,11 +345,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-9')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 4 kebab toggle`}
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon aria-hidden="true" />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon aria-hidden="true" />}
                       />
                     )}
                   >
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
index 24fe126d088..a366aed251b 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
@@ -10,8 +10,7 @@ import {
   Slider,
   SliderOnChangeEvent,
   Dropdown,
-  DropdownList,
-  Icon
+  DropdownList
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -96,11 +95,7 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
                   variant="plain"
                   onClick={onToggle}
                   isExpanded={isOpen}
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={isOpen}
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx
index 4d717a7480d..5ca834db7db 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx
@@ -10,8 +10,7 @@ import {
   Button,
   ButtonVariant,
   Dropdown,
-  DropdownList,
-  Icon
+  DropdownList
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
@@ -100,11 +99,7 @@ export const OverflowMenuGroupTypes: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-              icon={
-                <Icon>
-                  <EllipsisVIcon />
-                </Icon>
-              }
+              icon={<EllipsisVIcon />}
             />
           )}
           isOpen={isOpen}
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx
index 408d3e3262f..67e546d63a0 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx
@@ -10,8 +10,7 @@ import {
   Button,
   ButtonVariant,
   Dropdown,
-  DropdownList,
-  Icon
+  DropdownList
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
@@ -89,11 +88,7 @@ export const OverflowMenuMultiGroup: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-              icon={
-                <Icon>
-                  <EllipsisVIcon />
-                </Icon>
-              }
+              icon={<EllipsisVIcon />}
             />
           )}
           isOpen={isOpen}
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx
index 1dac3497b1e..c2d033aab98 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx
@@ -10,8 +10,7 @@ import {
   Button,
   ButtonVariant,
   Dropdown,
-  DropdownList,
-  Icon
+  DropdownList
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -63,11 +62,7 @@ export const OverflowMenuPersistent: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-              icon={
-                <Icon>
-                  <EllipsisVIcon />
-                </Icon>
-              }
+              icon={<EllipsisVIcon />}
             />
           )}
           isOpen={isOpen}
diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx
index 109fd35cc55..3510baa7a07 100644
--- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx
+++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx
@@ -8,8 +8,7 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Dropdown,
-  DropdownList,
-  Icon
+  DropdownList
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -63,11 +62,7 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-              icon={
-                <Icon>
-                  <EllipsisVIcon />
-                </Icon>
-              }
+              icon={<EllipsisVIcon />}
             />
           )}
           isOpen={isOpen}
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
index ee12a08fb25..d75309a0bdd 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
@@ -10,7 +10,6 @@ import {
   DropdownItem,
   DropdownList,
   Divider,
-  Icon,
   MenuToggle,
   MenuToggleCheckbox,
   MenuToggleElement,
@@ -230,11 +229,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={onKebabToggle}
                       isExpanded={kebabIsOpen}
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                   isOpen={kebabIsOpen}
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
index df8bf7fc13d..172e4dfc5c0 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
@@ -4,7 +4,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   Toolbar,
   ToolbarItem,
   ToolbarContent,
@@ -232,11 +231,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
               onClick={onKebabToggle}
               variant="plain"
               aria-label="Toolbar with filters example kebab toggle"
-              icon={
-                <Icon>
-                  <EllipsisVIcon aria-hidden="true" />
-                </Icon>
-              }
+              icon={<EllipsisVIcon aria-hidden="true" />}
             />
           )}
         >
diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewWithActionItems.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewWithActionItems.tsx
index 30a15047122..3af7cd34f18 100644
--- a/packages/react-core/src/components/TreeView/examples/TreeViewWithActionItems.tsx
+++ b/packages/react-core/src/components/TreeView/examples/TreeViewWithActionItems.tsx
@@ -5,7 +5,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   TreeViewDataItem
 } from '@patternfly/react-core';
@@ -48,11 +47,7 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
               onClick={onToggle}
               variant="plain"
               aria-label="Tree view with actions example kebab toggle"
-              icon={
-                <Icon>
-                  <EllipsisVIcon />
-                </Icon>
-              }
+              icon={<EllipsisVIcon />}
             />
           )}
         >
diff --git a/packages/react-core/src/demos/CardView/examples/CardView.tsx b/packages/react-core/src/demos/CardView/examples/CardView.tsx
index 1289099aa0e..7fb5788868b 100644
--- a/packages/react-core/src/demos/CardView/examples/CardView.tsx
+++ b/packages/react-core/src/demos/CardView/examples/CardView.tsx
@@ -17,7 +17,6 @@ import {
   EmptyStateVariant,
   EmptyStateActions,
   Gallery,
-  Icon,
   MenuToggle,
   MenuToggleCheckbox,
   OverflowMenu,
@@ -430,11 +429,7 @@ export const CardViewBasic: React.FunctionComponent = () => {
                   variant="plain"
                   onClick={onToolbarKebabDropdownToggle}
                   isExpanded={isLowerToolbarKebabDropdownOpen}
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={isLowerToolbarKebabDropdownOpen}
@@ -524,11 +519,7 @@ export const CardViewBasic: React.FunctionComponent = () => {
                                 onCardKebabDropdownToggle(e, key.toString());
                               }}
                               isExpanded={!!state[key]}
-                              icon={
-                                <Icon>
-                                  <EllipsisVIcon />
-                                </Icon>
-                              }
+                              icon={<EllipsisVIcon />}
                             />
                           )}
                           popperProps={{ position: 'right' }}
diff --git a/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx
index 440e6599f70..af44cfc9e8a 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx
@@ -9,8 +9,7 @@ import {
   Dropdown,
   DropdownGroup,
   DropdownList,
-  DropdownItem,
-  Icon
+  DropdownItem
 } from '@patternfly/react-core';
 import ThIcon from '@patternfly/react-icons/dist/js/icons/th-icon';
 import pfIcon from '@patternfly/react-core/src/demos/Card/pf-logo-small.svg';
@@ -216,11 +215,7 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
           onClick={onToggleClick}
           isExpanded={isOpen}
           style={{ width: 'auto' }}
-          icon={
-            <Icon>
-              <ThIcon />
-            </Icon>
-          }
+          icon={<ThIcon />}
         />
       )}
       ref={menuRef}
diff --git a/packages/react-core/src/demos/DashboardHeader.tsx b/packages/react-core/src/demos/DashboardHeader.tsx
index 433c91175ed..3b14230d136 100644
--- a/packages/react-core/src/demos/DashboardHeader.tsx
+++ b/packages/react-core/src/demos/DashboardHeader.tsx
@@ -9,7 +9,6 @@ import {
   DropdownGroup,
   DropdownItem,
   DropdownList,
-  Icon,
   Masthead,
   MastheadMain,
   MastheadToggle,
@@ -138,11 +137,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label="Settings and help"
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
@@ -162,11 +157,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label="Toolbar menu"
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
@@ -189,11 +180,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                     ref={toggleRef}
                     isExpanded={isDropdownOpen}
                     onClick={onDropdownToggle}
-                    icon={
-                      <Icon>
-                        <Avatar src={imgAvatar} alt="" size="sm" />
-                      </Icon>
-                    }
+                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
                   >
                     Ned Username
                   </MenuToggle>
diff --git a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
index 43fda5df145..7408f39c910 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
@@ -9,7 +9,6 @@ import {
   DataListItemCells,
   Flex,
   FlexItem,
-  Icon,
   MenuToggle,
   MenuToggleCheckbox,
   OverflowMenu,
@@ -59,15 +58,7 @@ export const DataListBasic: React.FunctionComponent = () => {
             <Button variant="primary">Create instance</Button>
           </OverflowMenuItem>
           <OverflowMenuControl hasAdditionalOptions>
-            <MenuToggle
-              aria-label="Toolbar kebab overflow menu"
-              variant="plain"
-              icon={
-                <Icon>
-                  <EllipsisVIcon />
-                </Icon>
-              }
-            />
+            <MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain" icon={<EllipsisVIcon />} />
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarItem>
diff --git a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
index 20d155d75d9..c32a42afa3c 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
@@ -13,6 +13,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
+  Icon,
   MenuToggle,
   MenuToggleElement,
   Toolbar,
@@ -22,7 +23,6 @@ import {
   ToolbarContent,
   SearchInput,
   Tooltip,
-  Icon,
   PageSection
 } from '@patternfly/react-core';
 
@@ -187,11 +187,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen1}
                         variant="plain"
                         aria-label="Primary content kebab toggle"
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon aria-hidden="true" />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon aria-hidden="true" />}
                       />
                     )}
                   >
@@ -272,11 +268,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen2}
                         variant="plain"
                         aria-label="Secondary content kebab toggle"
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon aria-hidden="true" />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon aria-hidden="true" />}
                       />
                     )}
                   >
@@ -357,11 +349,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen3}
                         variant="plain"
                         aria-label="Tertiary content kebab toggle"
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon aria-hidden="true" />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon aria-hidden="true" />}
                       />
                     )}
                   >
diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
index db9e4e33851..fdfcf898db3 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
@@ -21,8 +21,7 @@ import {
   ToolbarGroup,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateActions,
-  Icon
+  EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -526,11 +525,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
       ref={attributeToggleRef}
       onClick={onAttributeToggleClick}
       isExpanded={isAttributeMenuOpen}
-      icon={
-        <Icon>
-          <FilterIcon />
-        </Icon>
-      }
+      icon={<FilterIcon />}
     >
       {activeAttributeMenu}
     </MenuToggle>
diff --git a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
index bec6860d336..02d271100e9 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Icon,
   Menu,
   MenuContent,
   MenuList,
@@ -292,11 +291,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}
-      icon={
-        <Icon>
-          <FilterIcon />
-        </Icon>
-      }
+      icon={<FilterIcon />}
       {...(selections.length > 0 && { badge: <Badge isRead>{selections.length}</Badge> })}
       style={
         {
diff --git a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
index 706e05e3ca0..cbd0ac327fc 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
@@ -20,8 +20,7 @@ import {
   ToolbarFilter,
   ToolbarToggleGroup,
   MenuGroup,
-  EmptyStateActions,
-  Icon
+  EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -323,11 +322,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
       {...(areSelectionsPresent && {
         badge: <Badge isRead>{locationSelections.length + statusSelections.length}</Badge>
       })}
-      icon={
-        <Icon>
-          <FilterIcon />
-        </Icon>
-      }
+      icon={<FilterIcon />}
       style={
         {
           width: '200px'
diff --git a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
index 6201121951f..c2f03c640df 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
@@ -19,8 +19,7 @@ import {
   Badge,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateActions,
-  Icon
+  EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -293,11 +292,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       ref={statusToggleRef}
       onClick={onStatusToggleClick}
       isExpanded={isStatusMenuOpen}
-      icon={
-        <Icon>
-          <FilterIcon />
-        </Icon>
-      }
+      icon={<FilterIcon />}
       style={
         {
           width: '200px'
@@ -396,11 +391,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       onClick={onLocationMenuToggleClick}
       isExpanded={isLocationMenuOpen}
       {...(locationSelections.length > 0 && { badge: <Badge isRead>{locationSelections.length}</Badge> })}
-      icon={
-        <Icon>
-          <FilterIcon />
-        </Icon>
-      }
+      icon={<FilterIcon />}
       style={
         {
           width: '200px'
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
index 0c8d988ea76..7d63bc50335 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
@@ -17,8 +17,7 @@ import {
   Button,
   Bullseye,
   ToolbarToggleGroup,
-  EmptyStateActions,
-  Icon
+  EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -294,11 +293,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
       ref={statusToggleRef}
       onClick={onStatusToggleClick}
       isExpanded={isStatusMenuOpen}
-      icon={
-        <Icon>
-          <FilterIcon />
-        </Icon>
-      }
+      icon={<FilterIcon />}
       style={
         {
           width: '200px'
@@ -392,11 +387,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
       ref={locationToggleRef}
       onClick={onLocationMenuToggleClick}
       isExpanded={isLocationMenuOpen}
-      icon={
-        <Icon>
-          <FilterIcon />
-        </Icon>
-      }
+      icon={<FilterIcon />}
       style={
         {
           width: '200px'
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
index 9ad84c89b27..f17ec50f154 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Icon,
   Menu,
   MenuContent,
   MenuList,
@@ -296,11 +295,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}
-      icon={
-        <Icon>
-          <FilterIcon />
-        </Icon>
-      }
+      icon={<FilterIcon />}
       style={
         {
           width: '200px'
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index aa3a8cb0de4..3a867c8ce3e 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -16,7 +16,6 @@ import {
   EmptyStateBody,
   EmptyStateFooter,
   EmptyStateVariant,
-  Icon,
   MenuToggle,
   Nav,
   NavItem,
@@ -222,11 +221,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onKebabDropdownToggle}
                     variant="plain"
                     aria-label="Settings and help"
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
               >
@@ -345,11 +340,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => onToggle('toggle-id-0')}
               isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-              icon={
-                <Icon>
-                  <EllipsisVIcon aria-hidden="true" />
-                </Icon>
-              }
+              icon={<EllipsisVIcon aria-hidden="true" />}
             />
           )}
         >
@@ -383,11 +374,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-1')}
                       isExpanded={isActionsMenuOpen['toggle-id-1'] || false}
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
@@ -422,11 +409,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-2')}
                       isExpanded={isActionsMenuOpen['toggle-id-2'] || false}
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
@@ -462,11 +445,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-3')}
                       isExpanded={isActionsMenuOpen['toggle-id-3'] || false}
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
@@ -501,11 +480,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-4')}
                       isExpanded={isActionsMenuOpen['toggle-id-4'] || false}
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
index 4c0e43cf82d..d532a19a055 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
@@ -16,7 +16,6 @@ import {
   EmptyStateBody,
   EmptyStateFooter,
   EmptyStateVariant,
-  Icon,
   MenuToggle,
   Nav,
   NavItem,
@@ -272,11 +271,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                     onClick={onKebabDropdownToggle}
                     variant="plain"
                     aria-label="Settings and help"
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon aria-hidden="true" />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon aria-hidden="true" />}
                   />
                 )}
               >
@@ -396,11 +391,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => onToggle('toggle-id-0')}
               isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-              icon={
-                <Icon>
-                  <EllipsisVIcon aria-hidden="true" />
-                </Icon>
-              }
+              icon={<EllipsisVIcon aria-hidden="true" />}
             />
           )}
         >
@@ -441,11 +432,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-5')}
                           isExpanded={isActionsMenuOpen['toggle-id-5'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -480,11 +467,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-6')}
                           isExpanded={isActionsMenuOpen['toggle-id-6'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -520,11 +503,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-7')}
                           isExpanded={isActionsMenuOpen['toggle-id-7'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -559,11 +538,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-8')}
                           isExpanded={isActionsMenuOpen['toggle-id-8'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -607,11 +582,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-9')}
                           isExpanded={isActionsMenuOpen['toggle-id-9'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -646,11 +617,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-10')}
                           isExpanded={isActionsMenuOpen['toggle-id-10'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -686,11 +653,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-11')}
                           isExpanded={isActionsMenuOpen['toggle-id-11'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -725,11 +688,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-12')}
                           isExpanded={isActionsMenuOpen['toggle-id-12'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
index a60157b47d8..7016057c5e1 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
@@ -374,11 +374,7 @@ export const PaginatedTableAction = () => {
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label={translation.kebabDropdown.settingsAndHelp}
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
@@ -398,11 +394,7 @@ export const PaginatedTableAction = () => {
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label={translation.kebabAndUserDropdown.toolbarMenuAriaLabel}
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
index 1903bcd29f1..9340bfb36b7 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
@@ -398,11 +398,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label={translation.kebabDropdown.settingsAndHelp}
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
@@ -422,11 +418,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label={translation.kebabAndUserDropdown.toolbarMenuAriaLabel}
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
index b9f5cf4784e..423b6b68889 100644
--- a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
+++ b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
@@ -24,7 +24,6 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -249,11 +248,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
               variant="plain"
               onClick={() => onDropdownToggle('dropdown-toggle-id-0')}
               aria-label="Notification drawer actions"
-              icon={
-                <Icon>
-                  <EllipsisVIcon aria-hidden="true" />
-                </Icon>
-              }
+              icon={<EllipsisVIcon aria-hidden="true" />}
             />
           )}
         >
@@ -284,11 +279,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
                         variant="plain"
                         onClick={() => onDropdownToggle(key)}
                         aria-label={`Notification ${index + 1} actions`}
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon aria-hidden="true" />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon aria-hidden="true" />}
                       />
                     )}
                   >
diff --git a/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx b/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
index da45f10064c..8dc36263e3b 100644
--- a/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
@@ -10,7 +10,6 @@ import {
   Label,
   Grid,
   Flex,
-  Icon,
   List,
   ListItem,
   Button,
@@ -64,11 +63,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
           onClick={onActionToggle}
           variant="plain"
           aria-label="Horizontal card grid demo kebab toggle"
-          icon={
-            <Icon>
-              <EllipsisVIcon aria-hidden="true" />
-            </Icon>
-          }
+          icon={<EllipsisVIcon aria-hidden="true" />}
         />
       )}
     >
diff --git a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
index 6cf98bf303b..3725c11c924 100644
--- a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
+++ b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
@@ -9,7 +9,6 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -66,11 +65,7 @@ export const DateTimePicker: React.FunctionComponent = () => {
           onClick={onToggleTime}
           isExpanded={isTimeOpen}
           aria-label="Time picker"
-          icon={
-            <Icon>
-              <OutlinedClockIcon aria-hidden="true" />
-            </Icon>
-          }
+          icon={<OutlinedClockIcon aria-hidden="true" />}
         />
       )}
     >
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
index 07631f3746b..f1e15d82c78 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
@@ -15,7 +15,6 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
-  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -212,11 +211,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
@@ -236,11 +231,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index af2384e226c..25ce4ec2e49 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -16,7 +16,6 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
-  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -157,11 +156,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       onClick={onToggleClick}
       isExpanded={isOpen}
       style={{ width: 'auto' }}
-      icon={
-        <Icon>
-          <ThIcon />
-        </Icon>
-      }
+      icon={<ThIcon />}
     />
   );
 
@@ -416,11 +411,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
@@ -440,11 +431,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
index 7d98799fedb..36fa4b0268d 100644
--- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -9,7 +9,6 @@ import {
   DropdownGroup,
   DropdownItem,
   DropdownList,
-  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -158,11 +157,7 @@ export const NavFlyout: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
@@ -182,11 +177,7 @@ export const NavFlyout: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
index b0a249b90dc..0ecf9507295 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
@@ -14,7 +14,6 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
-  Icon,
   Masthead,
   MastheadMain,
   MastheadBrand,
@@ -136,11 +135,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
@@ -160,11 +155,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
index cd4ebff0f0b..1cd49e20205 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
@@ -14,7 +14,6 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
-  Icon,
   MenuToggle,
   Masthead,
   MastheadMain,
@@ -185,11 +184,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
@@ -209,11 +204,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
index ebe9782d4d6..cd660483a43 100644
--- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
@@ -14,7 +14,6 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
-  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -152,11 +151,7 @@ export const NavManual: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
@@ -176,11 +171,7 @@ export const NavManual: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
diff --git a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
index c252e3ce17f..7c254e84617 100644
--- a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
@@ -15,7 +15,6 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
-  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -165,11 +164,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
@@ -189,11 +184,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index 2541cca9ce4..ebb5d70e709 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -16,7 +16,6 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
-  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -148,11 +147,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
@@ -172,11 +167,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
index b93f9f7e79a..29c8f156f5f 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -16,7 +16,6 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
-  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -148,11 +147,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
@@ -172,11 +167,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index 7fb01ce6821..9811e200518 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -16,7 +16,6 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
-  Icon,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -140,11 +139,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
@@ -164,11 +159,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon aria-hidden="true" />}
                 />
               )}
             >
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
index 95879d556de..ded63fc33f6 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
@@ -22,7 +22,6 @@ import {
   Flex,
   FlexItem,
   Gallery,
-  Icon,
   MenuToggle,
   MenuToggleCheckbox,
   PageSection,
@@ -470,11 +469,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToolbarKebabDropdownToggle}
               aria-label="Toolbar actions"
-              icon={
-                <Icon>
-                  <EllipsisVIcon aria-hidden="true" />
-                </Icon>
-              }
+              icon={<EllipsisVIcon aria-hidden="true" />}
             />
           )}
         >
@@ -532,11 +527,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
                           onCardKebabDropdownToggle(e, key.toString());
                         }}
                         isExpanded={!!state[key]}
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
index bb0981aa63b..01d4627a115 100644
--- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
@@ -15,7 +15,6 @@ import {
   DropdownList,
   Flex,
   FlexItem,
-  Icon,
   Label,
   LabelGroup,
   MenuToggle,
@@ -172,11 +171,7 @@ export const TablesAndTabs = () => {
       aria-haspopup="menu"
       isExpanded={props.isOpen}
       ref={props.toggleRef}
-      icon={
-        <Icon>
-          <EllipsisVIcon />
-        </Icon>
-      }
+      icon={<EllipsisVIcon />}
     />
   );
 
@@ -189,15 +184,7 @@ export const TablesAndTabs = () => {
           </ToolbarItem>
         </ToolbarToggleGroup>
         <ToolbarItem>
-          <MenuToggle
-            variant="plain"
-            aria-label="Sort columns"
-            icon={
-              <Icon>
-                <SortAmountDownIcon aria-hidden="true" />
-              </Icon>
-            }
-          />
+          <MenuToggle variant="plain" aria-label="Sort columns" icon={<SortAmountDownIcon aria-hidden="true" />} />
         </ToolbarItem>
         <OverflowMenu breakpoint="md">
           <OverflowMenuContent>
@@ -220,11 +207,7 @@ export const TablesAndTabs = () => {
                   variant="plain"
                   onClick={() => {}}
                   isExpanded={false}
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={false}
diff --git a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
index 680f7d0f00b..3007c02050a 100644
--- a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
+++ b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Badge,
   Button,
-  Icon,
   MenuToggle,
   SearchInput,
   Select,
@@ -302,16 +301,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
           onOpenChangeKeys={['Escape']}
           onSelect={onOptionSelect}
           toggle={(toggleRef) => (
-            <MenuToggle
-              ref={toggleRef}
-              isExpanded={optionExpanded}
-              onClick={onOptionToggle}
-              icon={
-                <Icon>
-                  <CogIcon />
-                </Icon>
-              }
-            >
+            <MenuToggle ref={toggleRef} isExpanded={optionExpanded} onClick={onOptionToggle} icon={<CogIcon />}>
               Options
             </MenuToggle>
           )}
@@ -365,11 +355,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
                 ref={toggleRef}
                 isExpanded={optionExpandedMobile}
                 onClick={onOptionToggleMobile}
-                icon={
-                  <Icon>
-                    <CogIcon />
-                  </Icon>
-                }
+                icon={<CogIcon />}
                 aria-label="Options"
               />
             )}
@@ -445,11 +431,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
                 ref={toggleRef}
                 isExpanded={externalExpandedMobile}
                 onClick={onExternalToggleMobile}
-                icon={
-                  <Icon>
-                    <ExternalLinkAltIcon />
-                  </Icon>
-                }
+                icon={<ExternalLinkAltIcon />}
                 aria-label="External logs"
               />
             )}
@@ -470,11 +452,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
                 ref={toggleRef}
                 isExpanded={downloadExpandedMobile}
                 onClick={onDownloadToggleMobile}
-                icon={
-                  <Icon>
-                    <DownloadIcon />
-                  </Icon>
-                }
+                icon={<DownloadIcon />}
                 aria-label="Download"
               />
             )}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
index 2c88fddfc2d..9cf4c53ccd8 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
@@ -14,7 +14,6 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
-  Icon,
   MenuToggle
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -150,11 +149,7 @@ class CardDemo extends Component {
               ref={toggleRef}
               isExpanded={this.state.isOpen}
               onClick={this.onToggle}
-              icon={
-                <Icon>
-                  <EllipsisVIcon />
-                </Icon>
-              }
+              icon={<EllipsisVIcon />}
             />
           )}
         >
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
index 87a1d4e427c..888efe428a1 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
@@ -11,7 +11,6 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
-  Icon,
   MenuToggle
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -83,11 +82,7 @@ class DataListDemo extends React.Component<DataListProps, DataListState> {
                     ref={toggleRef}
                     isExpanded={this.state.isOpen}
                     onClick={this.onToggle}
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
index ab45ab389e8..d5594f7b098 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
@@ -18,7 +18,6 @@ import {
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
-  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -191,11 +190,7 @@ export const DualListSelectorWithActionsDemo: React.FunctionComponent = () => {
                 variant="plain"
                 id="complex-available-toggle"
                 aria-label="Complex actions example available kebab toggle"
-                icon={
-                  <Icon>
-                    <EllipsisVIcon aria-hidden="true" />
-                  </Icon>
-                }
+                icon={<EllipsisVIcon aria-hidden="true" />}
               />
             )}
             isOpen={isAvailableKebabOpen}
@@ -230,11 +225,7 @@ export const DualListSelectorWithActionsDemo: React.FunctionComponent = () => {
                 variant="plain"
                 id="complex-chosen-toggle"
                 aria-label="Complex actions example chosen kebab toggle"
-                icon={
-                  <Icon>
-                    <EllipsisVIcon aria-hidden="true" />
-                  </Icon>
-                }
+                icon={<EllipsisVIcon aria-hidden="true" />}
               />
             )}
             isOpen={isChosenKebabOpen}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo.tsx
index 26660304ccc..4447bc1d896 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownList, Icon, MenuToggle } from '@patternfly/react-core';
+import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownList, MenuToggle } from '@patternfly/react-core';
 import {
   DualListSelector as DLSDeprecated,
   DualListSelectorProps as DLSPropsDeprecated
@@ -139,11 +139,7 @@ class DualListSelectorDeprecatedWithActionsDemo extends React.Component<DLSProps
             ref={toggleRef}
             isExpanded={this.state.isAvailableKebabOpen}
             onClick={() => this.onToggle('available')}
-            icon={
-              <Icon>
-                <EllipsisVIcon />
-              </Icon>
-            }
+            icon={<EllipsisVIcon />}
           />
         )}
       >
@@ -170,11 +166,7 @@ class DualListSelectorDeprecatedWithActionsDemo extends React.Component<DLSProps
             ref={toggleRef}
             isExpanded={this.state.isChosenKebabOpen}
             onClick={() => this.onToggle('chosen')}
-            icon={
-              <Icon>
-                <EllipsisVIcon />
-              </Icon>
-            }
+            icon={<EllipsisVIcon />}
           />
         )}
       >
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
index 8f178a15c1c..700ebc2d8a6 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
@@ -16,7 +16,6 @@ import {
   DropdownList,
   MenuToggle,
   Divider,
-  Icon,
   MenuToggleElement,
   MastheadProps
 } from '@patternfly/react-core';
@@ -182,11 +181,7 @@ export class MastheadDemo extends Component<MastheadProps> {
                         onClick={this.onKebabToggle}
                         id="toggle-id-kebab"
                         variant="plain"
-                        icon={
-                          <Icon>
-                            <EllipsisVIcon />
-                          </Icon>
-                        }
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx
index 47d8f8382f5..fca02b851ee 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx
@@ -11,7 +11,6 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
-  Icon,
   MenuToggle,
   MenuToggleElement,
   Divider
@@ -75,11 +74,7 @@ export class BasicNotificationDrawerDemo extends React.Component<
                 onClick={() => this.onToggle(0)}
                 id="toggle-id-0"
                 variant="plain"
-                icon={
-                  <Icon>
-                    <EllipsisVIcon aria-hidden="true" />
-                  </Icon>
-                }
+                icon={<EllipsisVIcon aria-hidden="true" />}
               />
             )}
           >
@@ -109,11 +104,7 @@ export class BasicNotificationDrawerDemo extends React.Component<
                       onClick={() => this.onToggle(1)}
                       id="toggle-id-1"
                       variant="plain"
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
@@ -142,11 +133,7 @@ export class BasicNotificationDrawerDemo extends React.Component<
                       onClick={() => this.onToggle(2)}
                       id="toggle-id-2"
                       variant="plain"
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
@@ -177,11 +164,7 @@ export class BasicNotificationDrawerDemo extends React.Component<
                       onClick={() => this.onToggle(3)}
                       id="toggle-id-3"
                       variant="plain"
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
@@ -214,11 +197,7 @@ export class BasicNotificationDrawerDemo extends React.Component<
                       onClick={() => this.onToggle(4)}
                       id="toggle-id-4"
                       variant="plain"
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
@@ -244,11 +223,7 @@ export class BasicNotificationDrawerDemo extends React.Component<
                       onClick={() => this.onToggle(5)}
                       id="toggle-id-5"
                       variant="plain"
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
index 1e944e6423e..f94e6a25635 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
@@ -4,7 +4,6 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateVariant,
-  Icon,
   NotificationDrawer,
   NotificationDrawerProps,
   NotificationDrawerBody,
@@ -107,11 +106,7 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                 variant="plain"
                 onClick={() => this.onToggle('toggle-id-0')}
                 isExpanded={isOpenMap['toggle-id-0'] || false}
-                icon={
-                  <Icon>
-                    <EllipsisVIcon aria-hidden="true" />
-                  </Icon>
-                }
+                icon={<EllipsisVIcon aria-hidden="true" />}
               />
             )}
           >
@@ -148,11 +143,7 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-5')}
                           isExpanded={isOpenMap['toggle-id-5'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -182,11 +173,7 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-6')}
                           isExpanded={isOpenMap['toggle-id-6'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -217,11 +204,7 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-7')}
                           isExpanded={isOpenMap['toggle-id-7'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -251,11 +234,7 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-8')}
                           isExpanded={isOpenMap['toggle-id-8'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -297,11 +276,7 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-9')}
                           isExpanded={isOpenMap['toggle-id-9'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -331,11 +306,7 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-10')}
                           isExpanded={isOpenMap['toggle-id-10'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -366,11 +337,7 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-11')}
                           isExpanded={isOpenMap['toggle-id-11'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
@@ -400,11 +367,7 @@ class GroupsNotificationDrawerDemo extends React.Component<NotificationDrawerPro
                           variant="plain"
                           onClick={() => this.onToggle('toggle-id-12')}
                           isExpanded={isOpenMap['toggle-id-12'] || false}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon aria-hidden="true" />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon aria-hidden="true" />}
                         />
                       )}
                     >
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
index 26778aad372..fb1fb03eb55 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
@@ -9,8 +9,7 @@ import {
   MenuToggle,
   Button,
   Dropdown,
-  DropdownList,
-  Icon
+  DropdownList
 } from '@patternfly/react-core';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
@@ -89,11 +88,7 @@ export class OverflowMenuDemo extends React.Component {
                 variant="plain"
                 onClick={this.onSimpleToggle}
                 isExpanded={isSimpleOpen}
-                icon={
-                  <Icon>
-                    <EllipsisVIcon />
-                  </Icon>
-                }
+                icon={<EllipsisVIcon />}
               />
             )}
             isOpen={isSimpleOpen}
@@ -179,11 +174,7 @@ export class OverflowMenuDemo extends React.Component {
                 variant="plain"
                 onClick={this.onAdditionalOptionsToggle}
                 isExpanded={isAdditionalOptionsOpen}
-                icon={
-                  <Icon>
-                    <EllipsisVIcon />
-                  </Icon>
-                }
+                icon={<EllipsisVIcon />}
               />
             )}
             isOpen={isAdditionalOptionsOpen}
@@ -249,11 +240,7 @@ export class OverflowMenuDemo extends React.Component {
                 variant="plain"
                 onClick={this.onPersistToggle}
                 isExpanded={isPersistOpen}
-                icon={
-                  <Icon>
-                    <EllipsisVIcon />
-                  </Icon>
-                }
+                icon={<EllipsisVIcon />}
               />
             )}
             isOpen={isPersistOpen}
@@ -327,11 +314,7 @@ export class OverflowMenuDemo extends React.Component {
                   variant="plain"
                   onClick={this.onContainerBreakpointToggle}
                   isExpanded={isContainerBreakpointOpen}
-                  icon={
-                    <Icon>
-                      <EllipsisVIcon />
-                    </Icon>
-                  }
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={isContainerBreakpointOpen}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
index d308f73790c..49232673441 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
@@ -11,7 +11,6 @@ import {
   ToolbarToggleGroup,
   ToolbarGroup,
   ToolbarProps,
-  Icon,
   InputGroup,
   InputGroupItem,
   TextInput,
@@ -274,11 +273,7 @@ class ToolbarDemo extends React.Component<ToolbarProps, ToolbarState> {
                 ref={toggleRef}
                 onClick={this.onKebabToggle}
                 isExpanded={kebabIsOpen}
-                icon={
-                  <Icon>
-                    <EllipsisVIcon />
-                  </Icon>
-                }
+                icon={<EllipsisVIcon />}
               />
             )}
           >
diff --git a/packages/react-table/src/components/Table/ActionsColumn.tsx b/packages/react-table/src/components/Table/ActionsColumn.tsx
index 6cf626ebe67..0fb5e79c556 100644
--- a/packages/react-table/src/components/Table/ActionsColumn.tsx
+++ b/packages/react-table/src/components/Table/ActionsColumn.tsx
@@ -3,7 +3,6 @@ import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/dis
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
 import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
-import { Icon } from '@patternfly/react-core/dist/esm/components/Icon';
 import { IAction, IExtraData, IRowData } from './TableTypes';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
@@ -107,11 +106,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
               isExpanded={isOpen}
               isDisabled={isDisabled}
               variant="plain"
-              icon={
-                <Icon>
-                  <EllipsisVIcon />
-                </Icon>
-              }
+              icon={<EllipsisVIcon />}
             />
           )
         }
diff --git a/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx b/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx
index 5d3b58ce306..b685ea195e7 100644
--- a/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx
+++ b/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx
@@ -9,8 +9,7 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Dropdown,
-  DropdownList,
-  Icon
+  DropdownList
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -106,11 +105,7 @@ export const TableActions: React.FunctionComponent = () => {
                             setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen })))
                           }
                           isExpanded={repo.isMenuOpen}
-                          icon={
-                            <Icon>
-                              <EllipsisVIcon />
-                            </Icon>
-                          }
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                       isOpen={repo.isMenuOpen}
diff --git a/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx b/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
index e3e1962b70b..952d3f84fc2 100644
--- a/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
+++ b/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
@@ -9,8 +9,7 @@ import {
   SelectList,
   SelectOption,
   MenuToggle,
-  MenuToggleElement,
-  Icon
+  MenuToggleElement
 } from '@patternfly/react-core';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 
@@ -118,11 +117,7 @@ export const TableSortableCustom: React.FunctionComponent = () => {
                   isExpanded={isSortDropdownOpen}
                   variant="plain"
                   aria-label="Sort columns"
-                  icon={
-                    <Icon>
-                      <SortAmountDownIcon />
-                    </Icon>
-                  }
+                  icon={<SortAmountDownIcon />}
                 />
               )}
             >
diff --git a/packages/react-table/src/demos/DashboardHeader.tsx b/packages/react-table/src/demos/DashboardHeader.tsx
index a2b544918fc..8433f22651e 100644
--- a/packages/react-table/src/demos/DashboardHeader.tsx
+++ b/packages/react-table/src/demos/DashboardHeader.tsx
@@ -9,7 +9,6 @@ import {
   DropdownGroup,
   DropdownItem,
   DropdownList,
-  Icon,
   Masthead,
   MastheadMain,
   MastheadToggle,
@@ -138,11 +137,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label="Settings and help"
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
@@ -162,11 +157,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label="Toolbar menu"
-                      icon={
-                        <Icon>
-                          <EllipsisVIcon aria-hidden="true" />
-                        </Icon>
-                      }
+                      icon={<EllipsisVIcon aria-hidden="true" />}
                     />
                   )}
                 >
diff --git a/packages/react-table/src/demos/examples/TableColumnManagement.tsx b/packages/react-table/src/demos/examples/TableColumnManagement.tsx
index fc6afea8c4b..69d194a2837 100644
--- a/packages/react-table/src/demos/examples/TableColumnManagement.tsx
+++ b/packages/react-table/src/demos/examples/TableColumnManagement.tsx
@@ -10,7 +10,6 @@ import {
   DataListItemRow,
   DataListCell,
   DataListItemCells,
-  Icon,
   Label,
   Toolbar,
   ToolbarContent,
@@ -403,25 +402,13 @@ export const TableColumnManagement: React.FunctionComponent = () => {
           <ToolbarItem variant="overflow-menu">
             <OverflowMenu breakpoint="md">
               <OverflowMenuItem>
-                <MenuToggle
-                  icon={
-                    <Icon>
-                      <FilterIcon />
-                    </Icon>
-                  }
-                >
-                  Name
-                </MenuToggle>
+                <MenuToggle icon={<FilterIcon />}>Name</MenuToggle>
               </OverflowMenuItem>
               <OverflowMenuItem>
                 <MenuToggle
                   variant="plain"
                   aria-label="Sort columns"
-                  icon={
-                    <Icon>
-                      <SortAmountDownIcon aria-hidden="true" />
-                    </Icon>
-                  }
+                  icon={<SortAmountDownIcon aria-hidden="true" />}
                 />
               </OverflowMenuItem>
               <OverflowMenuGroup groupType="button" isPersistent>
diff --git a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
index e2e5e55f358..9b0e3cbc492 100644
--- a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
+++ b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
@@ -10,7 +10,6 @@ import {
   DataListItemRow,
   DataListCell,
   DataListItemCells,
-  Icon,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -592,26 +591,10 @@ export const TableColumnManagementWithDraggable: React.FunctionComponent = () =>
         <ToolbarItem variant="overflow-menu">
           <OverflowMenu breakpoint="md">
             <OverflowMenuItem isPersistent>
-              <MenuToggle
-                icon={
-                  <Icon>
-                    <FilterIcon />
-                  </Icon>
-                }
-              >
-                Name
-              </MenuToggle>
+              <MenuToggle icon={<FilterIcon />}>Name</MenuToggle>
             </OverflowMenuItem>
             <OverflowMenuItem>
-              <MenuToggle
-                variant="plain"
-                aria-label="Sort columns"
-                icon={
-                  <Icon>
-                    <SortAmountDownIcon aria-hidden="true" />
-                  </Icon>
-                }
-              />
+              <MenuToggle variant="plain" aria-label="Sort columns" icon={<SortAmountDownIcon aria-hidden="true" />} />
             </OverflowMenuItem>
             <OverflowMenuGroup groupType="button" isPersistent>
               <OverflowMenuItem>
diff --git a/packages/react-table/src/demos/examples/TableCompact.tsx b/packages/react-table/src/demos/examples/TableCompact.tsx
index c9b2e832bb6..ca1bc5bff38 100644
--- a/packages/react-table/src/demos/examples/TableCompact.tsx
+++ b/packages/react-table/src/demos/examples/TableCompact.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Button,
   Card,
-  Icon,
   MenuToggle,
   MenuToggleElement,
   Pagination,
@@ -74,11 +73,7 @@ export const TableCompact: React.FunctionComponent = () => {
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                icon={
-                  <Icon>
-                    <FilterIcon />
-                  </Icon>
-                }
+                icon={<FilterIcon />}
                 ref={toggleRef}
                 onClick={() => setIsSelectOpen(!isSelectOpen)}
                 isExpanded={isSelectOpen}
diff --git a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
index eb44b4b53ef..28297d448b9 100644
--- a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
+++ b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
@@ -5,7 +5,6 @@ import {
   Card,
   Flex,
   FlexItem,
-  Icon,
   MenuToggle,
   MenuToggleElement,
   Toolbar,
@@ -96,11 +95,7 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
                 ref={toggleRef}
                 onClick={() => setIsSelectOpen(!isSelectOpen)}
                 isExpanded={isSelectOpen}
-                icon={
-                  <Icon>
-                    <FilterIcon />
-                  </Icon>
-                }
+                icon={<FilterIcon />}
               >
                 Status
               </MenuToggle>
diff --git a/packages/react-table/src/demos/examples/TableFilterable.tsx b/packages/react-table/src/demos/examples/TableFilterable.tsx
index 9ff81760ce3..d6ed8df2cfb 100644
--- a/packages/react-table/src/demos/examples/TableFilterable.tsx
+++ b/packages/react-table/src/demos/examples/TableFilterable.tsx
@@ -7,7 +7,6 @@ import {
   EmptyStateActions,
   EmptyStateBody,
   EmptyStateFooter,
-  Icon,
   Label,
   MenuToggle,
   MenuToggleElement,
@@ -126,11 +125,7 @@ export const TableFilterable: React.FunctionComponent = () => {
               ref={toggleRef}
               onClick={onCategoryToggle}
               isExpanded={isCategoryDropdownOpen}
-              icon={
-                <Icon>
-                  <FilterIcon />
-                </Icon>
-              }
+              icon={<FilterIcon />}
               style={
                 {
                   width: '100%',
diff --git a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
index cb929e6b594..2cd73c05a47 100644
--- a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
+++ b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
@@ -8,7 +8,6 @@ import {
   DropdownList,
   Flex,
   FlexItem,
-  Icon,
   MenuToggle,
   MenuToggleElement,
   PageSection,
@@ -154,11 +153,7 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
                 onClick={() => setIsSortDropdownOpen(!isSortDropdownOpen)}
                 isExpanded={isSortDropdownOpen}
                 variant="plain"
-                icon={
-                  <Icon>
-                    <SortAmountDownIcon />
-                  </Icon>
-                }
+                icon={<SortAmountDownIcon />}
               />
             )}
           >
@@ -206,11 +201,7 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
                     variant="plain"
                     onClick={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)}
                     isExpanded={false}
-                    icon={
-                      <Icon>
-                        <EllipsisVIcon />
-                      </Icon>
-                    }
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isKebabDropdownOpen}
diff --git a/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx b/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
index 22d52f6816c..a9a06881139 100644
--- a/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
+++ b/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import {
   Button,
   Card,
-  Icon,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -103,11 +102,7 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => {
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                icon={
-                  <Icon>
-                    <FilterIcon />
-                  </Icon>
-                }
+                icon={<FilterIcon />}
                 ref={toggleRef}
                 onClick={() => setIsSelectOpen(!isSelectOpen)}
                 isExpanded={isSelectOpen}
diff --git a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
index f4d794105ae..a45b9c351b7 100644
--- a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
+++ b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
@@ -171,27 +171,19 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -260,27 +252,19 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -349,27 +333,19 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -438,27 +414,19 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -527,27 +495,19 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -616,27 +576,19 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -705,27 +657,19 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -794,27 +738,19 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -883,27 +819,19 @@ exports[`Table Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -5940,27 +5868,19 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -6029,27 +5949,19 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -6118,27 +6030,19 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -6207,27 +6111,19 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -6296,27 +6192,19 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -6385,27 +6273,19 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -6474,27 +6354,19 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -6563,27 +6435,19 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -6652,27 +6516,19 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
@@ -6742,27 +6598,19 @@ exports[`Table Simple Actions table 1`] = `
             <span
               class="pf-v6-c-menu-toggle__icon"
             >
-              <span
-                class="pf-v6-c-icon"
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 192 512"
+                width="1em"
               >
-                <span
-                  class="pf-v6-c-icon__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 192 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                />
+              </svg>
             </span>
           </button>
         </td>
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
index 73d481b9805..bb61e6eb8b9 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { sortable, info } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
-import { Toolbar, ToolbarContent, ToolbarItem, MenuToggle, MenuToggleElement, Icon } from '@patternfly/react-core';
+import { Toolbar, ToolbarContent, ToolbarItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import {
   Select as NewSelect,
   SelectGroup as NewSelectGroup,
@@ -137,11 +137,7 @@ export const LegacyTableSortableCustom: React.FunctionComponent = () => {
                   isExpanded={isSortDropdownOpen}
                   variant="plain"
                   aria-label="Sort columns"
-                  icon={
-                    <Icon>
-                      <SortAmountDownIcon />
-                    </Icon>
-                  }
+                  icon={<SortAmountDownIcon />}
                 />
               )}
             >