Liferay UI Icons

The Liferay UI taglibs provide several icons you can include in your apps. To add an icon to your app, use the liferay-ui:icon tag and specify the icon with either the icon, iconCssClass, or image attribute. An example of each use case is shown below.

The image attribute specifies Liferay UI icons to use (as defined in the Unstyled theme’s images/common folder). Here’s an example configuration for a JSP:

<div class="col-md-3">
	<liferay-ui:icon image="subscribe" />

	<span class="ml-2">Subscribe</span>
</div>

The Liferay UI taglib also exposes language flag icons. To use a language flag icon, provide the ../language/ relative path before the icon’s name. Below is an example snippet from the Web Content Search portlet that displays the current language’s flag along with a localized message:

<liferay-ui:icon
    image='<%= "../language/" + languageId %>'
    message='<%= LanguageUtil.format(
        request,
        "this-result-comes-from-the-x-version-of-this-content",
        snippetLocale.getDisplayLanguage(locale),
        false
    ) %>'
/>

You can achieve the same result in FreeMarker with the following code that uses the available init.ftl variables and Liferay DXP macros:

<#assign flag_message>
    <@liferay.language_format
        arguments=language
        key="this-result-comes-from-the-x-version-of-this-content"
    />
</#assign>

<@liferay_ui["icon"]
    image="../language/${language_id}"
    message=flag_message
/>

The full list of available icons is shown in the figures below:

The icon attribute specifies Font Awesome icons to use:

<liferay-ui:icon icon="angle-down" />

The iconCssClass attribute specifies a glyphicon to use:

<liferay-ui:icon
    iconCssClass="icon-remove-sign"
    label="<%= true %>"
    message="unsubscribe"
    url="<%= unsubscribeURL %>"
/>

The examples above use some of the icon’s available attributes. See the Icon taglibdocs for the full list.

Related Topics

• Clay Icons
• Liferay UI Icon Lists
• Liferay UI Icon Menus