Using Lexicon Icons in Your App

Whether you’re updating your app to Liferay DXP 7.0 or writing a new Liferay DXP 7.0 app, follow the process here to use Lexicon’s icons. You can find the list of available Lexicon icons on the Lexicon site.

Lexicon icons are defined with the icon attribute. For example, you define the icon in the management bar, inside the liferay-frontend:management-bar-sidenav-toggler-button taglib:

<liferay-frontend:management-bar-sidenav-toggler-button
        disabled="<%= false %>"
        href="javascript:;"
        icon="info-circle"
        label="info"
        sidenavId='<%= liferayPortletResponse.getNamespace() + "infoPanelId" %>'
/>

To use Lexicon icons outside the management bar, you have two options:

1. You can use the liferay-ui:icon taglib. For example:

   <liferay-ui:icon
   
       icon="icon-name"
   
       markupView="lexicon"
   
       message="message-goes-here"
   
   />
   

2. You can use the aui:icon taglib. For example:

   <aui:icon
   
        cssClass="icon-monospaced"
   
        image="times"
   
        markupView="lexicon"
   
   />
   

Note the addition of the markupView="lexicon" attribute. This ensures that the HTML is rendered with Lexicon markup.

That’s it! Now you know how to use Lexicon icons in your apps.

Related Topics

Setting Search Container Animations

Creating Layouts inside Custom Portlets