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.