Skip to main content

Table of Contents

Previewing and selecting predefined icons with the icon class picker

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.

  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?

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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