Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

Changing container expand / collapse icons in skin not working



Changing container expand / collapse icons in skin not working.

Error Messages

Not Applicable 

Steps to Reproduce

Change the Expand / Collapse icon image in a sklin rule.

Root Cause

The expand / collapse icon configuration is not currently completely integrated into the skin rule and using the user defined icons requires some customisation of CSS files.


There are a few things going on here that are impacting this icon setting.  There is a separate CSS file referenced on the skin rule called py-icons (for the UI-Kit version of the skin) as shown below.  If you are not using a UI-Kit based skin then the CSS is called px-pega-default-icons. The steps below are specifically based on the UI-Kit version.  They might not work using a non UI-Kit version please let me know (the changes should be similar).

This py-icons css has some styles in it that are defining the standard, out of the box expand / collapse icons, and also suppressing the user defined icons.
In the py-icons CSS on line 935 is a background-image style that is supressing the display of these icons (it is configured as a back ground image).  To allow the defined icons to display you need to remove this style.  The highlighted width style is used as the width for the user defined icon, but is not currently set in the skin rule.  If you specify an icon then you will need to also tweak this width style.

However, in removing the background-image style you will see that the standard icons remain included, and the user defined ones appear next to them as shown below where I have used some standard case icons.

To stop these from appearing you need to remove the styles on lines 263 and 264 as highlighted below.

In summary, the 3 changes required are:
  1. Remove the default Expand and Collapse icon. 
  2. Remove background-image: none; for Expand and collapse icon. 
  3. Adjust the icon width as per the image chosen for icon.

Published October 23, 2016 - Updated October 8, 2020

Was this useful?

0% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us