Over the last couple of years icons with rounded corners have become a very common use case. It takes less cognitive load to see rounded icons than it does to see sharp-cornered ones.
How can we leverage them in our current Pega applications? How can we get rounded corners for our icons?
" icon-rounded " helper class has been added recently in all types of apps based on Ui Kit, Theme-Cosmos, Theme-Clarity
icon-rounded helper class gives a grey-background with rounded corner which fits perfectly at it’s position.
Configuration:
Step 1: Open the advanced presentation options of the icon/image
Step 2: Add “icon-rounded” helper class in cell read-write & cell read-only classes
Save and Refresh to see your icon with rounded corners.
For any other background colour, users are suggested to add own custom css in stylesheets.
Note:
In Theme-Clarity based apps it’s not suggested to use this helper class along side with icon-large/medium because inherently those helper classes comes with a grey-background, rounded corners and different padding.