Primefaces: Remove Specify Icon submenu component

Question

How can I remove the Specify Icon in Primefaces? I tried the following code:

<p:menbar>
<p:submenu label="File">
......
</p:submenu>
</p:menubar>

On the right, the label of the submenu's Triangle Icon, it's necessary for me to style the icon.

.ui-icon{display:none;}

Unfortunately, it will affect all icons. I don't know why display: none is only applied to Specify Icon.

Please take some time to learn CSS. It is one of the foundations of web development. And since JSF is in this regard nothing more than an html/css generator, you should learn those basics before doing actual full blown development — Kukeltje, Apr 30 '15 at 07:19

score 1 · Answer 1 · answered Apr 08 '16 at 21:12

1

Try this !!

<p:menubar>
   <p:submenu label="File" styleClass="submenu">
    ......
   </p:submenu> 
</p:menubar>

Use the CSS rule below:

.submenu .ui-menuitem-link > .ui-icon-triangle-1-s{
  display: none !important;
}

answered Apr 08 '16 at 21:12

Thunder Struct

Do you know how to replace the icon by another one? Can't find that in the docs... – Javier Cabero Aug 02 '16 at 10:33
@JavierCabero see [this answer](https://stackoverflow.com/questions/40401103/how-to-change-primefaces-submenu-default-icons) for changing the default icon. – Martin Höller Mar 06 '19 at 08:29

score 0 · Answer 2 · edited Apr 30 '15 at 20:01

0

Use the "styleClass" attribute of p:submenu to apply the CSS rule on p:submenu.

<p:menubar>
    <p:submenu label="File" styleClass="submenu">
    ......
    </p:submenu>
</p:menubar>

Use following CSS rule:

.submenu .ui-icon-triangle-1-s{
    display: none;
}

edited Apr 30 '15 at 20:01

answered Apr 30 '15 at 06:40

Bhavin Panchani

And how would you change the icon to another one? – Javier Cabero Aug 02 '16 at 10:35
1

You can do like this : background-image: url('images/image_name.png'); background-position: 12px 5px; width: 30px; – Bhavin Panchani Aug 03 '16 at 19:40

2 Answers2