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>
Figure 1: Use the image attribute to use a theme icon.
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:
Figure 2: The Liferay UI taglib offers multiple icons for use in your app.
Figure 3: Liferay UI icons can be configured based on language.
The icon attribute specifies
Font Awesome icons
to use:
<liferay-ui:icon icon="angle-down" />
Figure 4: You can use the icon attribute to include Font Awesome icons in your app.
The iconCssClass attribute specifies a
glyphicon
to use:
<liferay-ui:icon
iconCssClass="icon-remove-sign"
label="<%= true %>"
message="unsubscribe"
url="<%= unsubscribeURL %>"
/>
Figure 5: You can use Font Awesome icons in your app.
The examples above use some of the icon’s available attributes. See the Icon taglibdocs for the full list.