Angular PrimeNG 菜单栏:隐藏菜单标题旁边的默认向下箭头

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

默认的 PrimeNG 菜单栏在每个主菜单标题旁边都有一个向下的小箭头。我想从 top-level 菜单标题中完全删除向下箭头。嵌套的 sub-menus 可能会显示右箭头以显示有 sub-menu,那些可以保留。以下是一些带有默认菜单栏的屏幕截图:

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

我可以轻松更改菜单项中的图标,但找不到 change/hide 箭头的句柄。

我正在使用 Angular CLI 9.1.8 和 PrimeNG 9.1.0。

将其隐藏在 style.css 中更改其内容,如

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

在开发者控制台检查元素字体名称,然后在 css 之前将其设为 content: "";

使用 display:none 的额外好处是可以调整 menuitem 容器的大小以针对删除的箭头图标进行调整。否则,您将留下空白 space.

.pi-caret-down {
   display:none;
}