From 44aa59f7aa3e0c406cacabb1d0eb0fe0604673c2 Mon Sep 17 00:00:00 2001
From: EnricoGianoglio <egianoglio@microsoft.com>
Date: Tue, 31 Mar 2026 16:48:06 +0200
Subject: [PATCH] update AccordionHeader to use bundled ChevronRightIcon

---
 .../src/components/AccordionHeader/useAccordionHeader.tsx   | 6 ++++--
 .../AccordionHeader/useAccordionHeaderStyles.styles.ts      | 3 +++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeader.tsx b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeader.tsx
index 1c23ea2a5e6794..698bd002521a4a 100644
--- a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeader.tsx
+++ b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeader.tsx
@@ -10,11 +10,13 @@ import type {
   AccordionHeaderState,
 } from './AccordionHeader.types';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
-import { ChevronRightRegular } from '@fluentui/react-icons';
+import { bundleIcon, ChevronRightFilled, ChevronRightRegular } from '@fluentui/react-icons';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
 import { motionTokens } from '@fluentui/react-motion';
 
+const ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);
+
 /**
  * Returns the props and state required to render the component
  *
@@ -41,7 +43,7 @@ export const useAccordionHeader_unstable = (
 
   if (state.expandIcon) {
     state.expandIcon.children ??= (
-      <ChevronRightRegular
+      <ChevronRightIcon
         style={{
           transform: `rotate(${expandIconRotation}deg)`,
           transition: `transform ${motionTokens.durationNormal}ms ease-out`,
diff --git a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts
index 15f799c533cb1e..3213b520a1abad 100644
--- a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts
+++ b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeaderStyles.styles.ts
@@ -5,6 +5,7 @@ import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 
 export const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots> = {
   root: 'fui-AccordionHeader',
@@ -83,6 +84,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     lineHeight: tokens.lineHeightBase500,
     fontSize: tokens.fontSizeBase500,
+    [`:hover .${iconFilledClassName}`]: { display: 'inline' },
+    [`:hover .${iconRegularClassName}`]: { display: 'none' },
   },
   expandIconStart: {
     paddingRight: tokens.spacingHorizontalS,