[Fixed] Angular PrimeNG menubar: Hide default down arrows next to menu titles

Issue

The default PrimeNG menubar includes a little down arrow next to every main menu title. I want to remove the down arrows completely from the top-level menu title. Nested sub-menus may display a right arrow to show there is a sub-menu, and those can stay. Here are some screenshots with default menubar:

https://www.primefaces.org/primeng/showcase/#/menubar

I can change the icons in the menu items easily, but can’t find a handle to change/hide the arrows.

I’m using Angular CLI 9.1.8 and PrimeNG 9.1.0.

EDIT –
StackBlitz does not work with PrimeNG due to error: ngcc failed to run on [email protected].

Solution

to hide it in style.css change its content like

.pi-caret-down::before{
   content: "";
}

check in developer console inspect element font name then make its before css as content: "";