Skip to main content

Previewing and selecting predefined icons with the icon class picker

Suggest edit Updated on November 15, 2021
Applicable to Theme UI-Kit applications

A single skin can have multiple icon fonts, including the standard icon font set provided in py-icons. To preview and select the correct icon for a control, use the icon class picker on the Properties panel for the button, link, or icon. Using predefined icons brings greater consistency to your user interface and helps users to understand the control's purpose.

Before you begin: Add the py-icons text file to your application skin
  1. Open the section that contains the control and then open the control's Properties panel.
  2. In the Image source list on the General tab, select Icon Class.
  3. Click the Open the icon class picker icon beside the Image source fields.
    An overlay displays all available icons.
  4. Optional: To filter icons by class name, use the search field on the overlay.
  5. Click an icon on the overlay to use it for the control.
  6. Optional: To adjust the element's styling without creating a new skin format, apply one or more CSS helper classes on the Presentation tab of the Properties panel.
    For example, you can use a helper class to center an element in a layout. For more information, see Adjusting cell styling with helper classes.
  7. Submit the updated properties and save the section.
Did you find this content helpful? YesNo

Have a question? Get answers now.

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

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

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us