Panel's expandIcon and collapseIcon Properties Accept Only Strings, Not Elements

[joedotchin]

There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeReact PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports)
Please fork the codesandbox below and create a case demonstrating your bug report. Issues without a codesandbox have much less possibility to be reviewed.

https://codesandbox.io/s/thirsty-golick-s1ohk?file=/src/demo/PanelDemo.js

Current behavior
Panel component will allow a string like 'pi pi-chevron-up' but not an element like , as your other components allow.

Expected behavior
Panel component should accept an element like for its collapseIcon and expandIcon properties.

Please tell us about your environment:

• React version:
  17.0.1

• PrimeReact version:
  7.0.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[melloware]

Yikes! I see you are using FontAwesome React which is way overbloated.

Instead of

const toggleIcon = options.collapsed ? (
      <FontAwesomeIcon icon={faChevronDown} />
    ) : (
      <FontAwesomeIcon icon={faChevronUp} />
    );

Just

const toggleIcon = options.collapsed ? 'fas fa-chevron-up' : 'fas fa-chevron-down`;

Just add fontawesome to your package.json like this...
@fortawesome/fontawesome-free": "5.15.4"

And in your app class just import it...

import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.min.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import './App.scss';


const App = () => {

Then anywhere you see pi pi-search you can use FontAwesome fas fa-search...

[melloware]

@joedotchin any update on this? Those <FontAwesomeIcon icon={faChevronDown} /> render full tags like <i class="fas fa-search></i> which is not really what you want right?