Add icon template to Menu components

[manuelpoelzl]

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

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

I'm currently having quite a bit of trouble using multiple icon libraries with PrimeReact, which leads me to write this feature request.

I think it would be quite good to say goodbye to icons as class names, or at least they would no longer be the preferred variant in React.

In my case, for example, I use the react-icons module, which combines several icon libraries, but unfortunately I can't use them in PrimeReact, because all icons in any menus have to be a string, or specified as a class in an element.

Therefore I think it would be quite good to have a support for icon components, which allows to use different libraries.

Of course there is the possibility to install each icon library separately and then import it into the CSS so that you then have the classes available, but the variant as a component and thus also the support of react-icons would be much nicer in my opinion.

[melloware]

Can you post an example snippet of code using React Icons you would expect to work correctly?

[mertsincan]

Hi @manuelpoelzl,

Most Primereact components have templating structures for icons. Which component are you using?

Exp;

icon="pi pi-home" | icon="..." (string type)
icon={<YourIconComponent />}
icon={(props) => <YourIconComponent />}

[manuelpoelzl]

Sure, let's say I have a menu, and an item there should have an icon. Let's assume a special case, a hot air balloon.

Then it would be great if something like that would be possible:

import {GiAirBalloon} from "react-icons/gi";

 const menuItems: MenuItem[] = [
        {
            icon: <GiAirBalloon/> /*currently needs to be the icon class name as string*/
            label: t("addNew"),
            command(e: MenuItemCommandParams) {

                setIsPanelVisible(true);
            }
        }
    ];

I see that this is already possible in buttons or even in the sidebar toolbar, as demonstrated here:

<Button icon={<GiAirBalloon/>} />

icons={() => (
  <button type={"submit"} form={"createSiteForm"}
     className="p-sidebar-close p-link">
         <FaSave className={"p-sidebar-close-icon"}/>
  </button>
)}

So I think that would be a good feature if that was possible in menu items as well.

[mertsincan]

Thanks a lot for your update!

All components using MenuItem API;

• BreadCrumb
• ContextMenu
• Dock
• MegaMenu
• Menu
• Menubar
• PanelMenu
• SlideMenu
• SpeedDial
• SplitButton
• Steps
• TabMenu
• TieredMenu

[manuelpoelzl]

Thank you very much for considering this!