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.

Previewing and selecting predefined icons with the icon class picker

Suggest edit
Updated on April 5, 2022

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: Adding the icon font set
  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