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.