diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
index 228aea426a..33d2767011 100644
--- a/components/lib/panelmenu/PanelMenu.js
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -4,6 +4,8 @@ import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
import { classNames, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
import { PanelMenuBase } from './PanelMenuBase';
import { PanelMenuSub } from './PanelMenuSub';
+import { ChevronRightIcon } from '../icon/chevronright';
+import { ChevronDownIcon } from '../icon/chevrondown';
export const PanelMenu = React.memo(
React.forwardRef((inProps, ref) => {
@@ -106,10 +108,10 @@ export const PanelMenu = React.memo(
const active = isItemActive(item);
const className = classNames('p-panelmenu-panel', item.className);
const headerClassName = classNames('p-component p-panelmenu-header', { 'p-highlight': active, 'p-disabled': item.disabled });
- const submenuIconClassName = classNames('p-panelmenu-icon pi', { 'pi-chevron-right': !active, ' pi-chevron-down': active });
const iconClassName = classNames('p-menuitem-icon', item.icon);
const icon = IconUtils.getJSXIcon(item.icon, { className: 'p-menuitem-icon' }, { props });
- const submenuIcon = item.items && ;
+ const submenuIconClassName = 'p-panelmenu-icon';
+ const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || : props.submenuIcon || )
const label = item.label && {item.label};
const contentWrapperClassName = classNames('p-toggleable-content', { 'p-toggleable-content-collapsed': !active });
const menuContentRef = React.createRef();
@@ -145,7 +147,7 @@ export const PanelMenu = React.memo(
diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js
index 4dd243b313..f2d6eec2cd 100644
--- a/components/lib/panelmenu/PanelMenuBase.js
+++ b/components/lib/panelmenu/PanelMenuBase.js
@@ -6,6 +6,7 @@ export const PanelMenuBase = {
id: null,
model: null,
style: null,
+ submenuIcon: null,
className: null,
multiple: false,
transitionOptions: null,
diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js
index 585ba2c87e..18889ffcb1 100644
--- a/components/lib/panelmenu/PanelMenuSub.js
+++ b/components/lib/panelmenu/PanelMenuSub.js
@@ -2,6 +2,8 @@ import * as React from 'react';
import { CSSTransition } from '../csstransition/CSSTransition';
import { useMountEffect } from '../hooks/Hooks';
import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+import { ChevronRightIcon } from '../icon/chevronright';
+import { ChevronDownIcon } from '../icon/chevrondown';
export const PanelMenuSub = React.memo((props) => {
const [activeItemState, setActiveItemState] = React.useState(null);
@@ -85,7 +87,7 @@ export const PanelMenuSub = React.memo((props) => {
return (
);
@@ -104,10 +106,10 @@ export const PanelMenuSub = React.memo((props) => {
const className = classNames('p-menuitem', item.className);
const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
const iconClassName = classNames('p-menuitem-icon', item.icon);
- const submenuIconClassName = classNames('p-panelmenu-icon pi pi-fw', { 'pi-angle-right': !active, 'pi-angle-down': active });
const icon = IconUtils.getJSXIcon(item.icon, { className: 'p-menuitem-icon' }, { props: props.menuProps });
const label = item.label && {item.label};
- const submenuIcon = item.items && ;
+ const submenuIconClassName = 'p-panelmenu-icon';
+ const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || : props.submenuIcon || )
const submenu = createSubmenu(item, active);
let content = (
onItemClick(event, item, index)} role="menuitem" aria-disabled={item.disabled}>
diff --git a/components/lib/panelmenu/panelmenu.d.ts b/components/lib/panelmenu/panelmenu.d.ts
index 9f4e9210ba..0ad75e47dc 100644
--- a/components/lib/panelmenu/panelmenu.d.ts
+++ b/components/lib/panelmenu/panelmenu.d.ts
@@ -10,6 +10,7 @@
import * as React from 'react';
import { CSSTransitionProps } from '../csstransition';
import { MenuItem } from '../menuitem';
+import { IconType } from '../utils/utils';
/**
* Defines valid properties in PanelMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.
@@ -25,6 +26,10 @@ export interface PanelMenuProps extends Omit | undefined;
/**
* The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
*/