In this section, we are going to add custom icons to a menu
component. The menuitem
tag supports the icon
attribute to attach a custom icon.
The following code snippets show how custom icons are added to the menu
component:
<h3>Menu</h3> <p:menu style="margin-left:500px"> <p:submenu label="File"> <p:menuitem value="New" url="#" icon="ui-icon-new" /> <p:menuitem value="Delete" url="#" icon="ui-icon-delete" /> <p:menuitem value="Refresh" url="#" icon="ui-icon-refresh" /> <p:menuitem value="Print" url="#" icon="ui-icon-print" /> </p:submenu> <p:submenu label="Navigations"> <p:menuitem value="Home" url="http://www.primefaces.org" icon="ui-icon-home" /> <p:menuitem value="Admin" url="#" icon="ui-icon-admin" /> <p:menuitem value="Contact Us" url="#" icon="ui-icon-contactus" /> </p:submenu> </p:menu>