diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js index cbea0248c7..848c5c4e88 100644 --- a/components/lib/tabview/TabView.js +++ b/components/lib/tabview/TabView.js @@ -338,9 +338,15 @@ export const TabView = React.forwardRef((inProps, ref) => { ); const titleElement = {header}; const rightIconElement = rightIcon && IconUtils.getJSXIcon(rightIcon, undefined, { props }); - const iconClassName = 'p-tabview-close'; - const icon = closeIcon || onTabHeaderClose(e, index)} />; - const closableIconElement = closable ? IconUtils.getJSXIcon(icon, { className: iconClassName, onClick: (e) => onTabHeaderClose(e, index) }, { props }) : null; + const closeIconProps = mergeProps( + { + className: cx('tab.closeIcon'), + onClick: (e) => onTabHeaderClose(e, index) + }, + getTabPT(tab, 'closeIcon', index) + ); + const icon = closeIcon || ; + const closableIconElement = closable ? IconUtils.getJSXIcon(icon, { ...closeIconProps }, { props }) : null; const headerActionProps = mergeProps( { diff --git a/components/lib/tabview/TabViewBase.js b/components/lib/tabview/TabViewBase.js index e6a4bbc89c..b658ed6306 100644 --- a/components/lib/tabview/TabViewBase.js +++ b/components/lib/tabview/TabViewBase.js @@ -21,6 +21,7 @@ const classes = { header: ({ selected, disabled, headerClassName, _className }) => classNames('p-unselectable-text', { 'p-tabview-selected p-highlight': selected, 'p-disabled': disabled }, headerClassName, _className), headertitle: 'p-tabview-title', headeraction: 'p-tabview-nav-link', + closeIcon: 'p-tabview-close', content: ({ props, selected, getTabProp, tab, isSelected, shouldUseTab, index }) => shouldUseTab(tab, index) && (!props.renderActiveOnly || isSelected(index)) ? classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), 'p-tabview-panel', { 'p-hidden': !selected }) : undefined }