Introduction
Icons may seem to be little details, but they can make a huge difference in the way the users perceive your site in Liferay. Liferay uses Clay icons as default, but again, they suit the majority of the use cases; however, what about replacing them with a little bit more brand-friendly icons or introducing a new appearance to your portal?
Prerequisites
- Liferay DXP 2023.Q4+ / Portal 7.4 GA 100+
- Basic knowledge of Liferay
- Experience in developing and deploying Liferay modules as well as client extensions
What is a Theme Sprite Map Client Extension?
A sprite map is an SVG icon created through distinct use of system ID. Liferay loads this file on a single occasion and makes use of individual icons themselves to reference their IDs. Upon deploying a sprite map client extension, the sprite map replaced is the Clay sprite map that is used on an entire page. That is to say that your custom icons will then show anytime their IDs are used.
Create the Client Extension
The configuration it should have is determined in client-extension.yaml :
liferay-theme-spritemap-1:
name: Liferay Theme Spritemap 1
type: themeSpritemap
url: spritemap.svg
assemble:
- from: assets
into: static
Here :
- type : themeSpritemap Liferay uses this to understand the type of client extension, which is themeSpritemap.
- url : spritemap.svg path of SVG file.
By default, the spritemap.svg in this folder is a copy of the Clay sprite map — so you won’t see changes until you modify it.
Modify the Sprite Map
The default look of the Analytics icon, as an example, would be below the assets/spritemap.svg, and like the following :
<symbol id=”analytics”>
<path d=”…” />
</symbol>
Be sure not to delete the id=” analytics”. This will ensure that the analytics icon will be your new icon, irrespective of the location being used by Liferay.
Apply the New Sprite Map to a Page
- Go to Sidebar > Pages and click on Configure.
- Click on Design Option.
- Inside the Customization> CSS > Theme Sprite Map Client Extension, click on the Add button.
- Choose the option named Liferay Theme Spritemap 1.
- Click on Save and Publish the page.
Conclusion
It is possible to replace Clay default icons in Liferay with your SVGs using a Theme Sprite Map Client Extension. This approach ensures :
Coherent, branded user interface.
Friendly icon management that is performance effective.
The fact that you can only override when it is needed is flexible.
In our case, we have changed the Analytics icon to a personalised fish SVG, though you can follow the steps that affect any icon that you would like to transform.
