After applying the new icons to the theme, you are ready to use them on the PrimeFaces components. In this section, we will add custom icons to command buttons. Let's add a link named Custom Icons
to the chaptersTemplate.xhtml
file. The title of this page is also named Custom Icons
.
The following code snippets show how custom icons are added to command buttons using the icon attribute:
<h3 style="margin-top: 0">Buttons</h3> <p:commandButton value="Edit" icon="ui-icon-edit" type="button" /> <p:commandButton value="Bookmark" icon="ui-icon-bookmark" type="button" /> <p:commandButton value="Next" icon="ui-icon-next" type="button" /> <p:commandButton value="Previous" icon="ui-icon-previous" type="button" />
Now, run the application and navigate to the newly created page. You should see the custom icons applied to the command buttons, as shown in the following screenshot:
The commandButton
component also supports...