This configuration option enables custom icons to be displayed in the Icon Selector Dialog in the Visual Designer. This dialog is used for the 'icon' property of the CSS Button, Graphic Button, and Icon widgets. Setting this configuration option will overwrite the default icons shipped with Profound UI. If you want to include the default shipped icons, you will need to include them in your defined list.

Below is an example:

pui["customIconList"] = {
    "icons": [{
        "type": "material",  // The type property is the unique key that this set will have 
        "title": "Material Icons", // The title property is the value that will be displayed in the dropdown list of the Icon Selector Dialog 
        "classList":  // Collection of key-value pairs, where the key matches one or more "classList" keys in entries in "icons". The "value" is output in 
                      // the icon's HTML as the CSS Class Name. 
        {
            "": "pui-material-icons"         //The key may be the empty string. Used for a condensed form of the list, where each icon uses the same CSS Class Name.
        },
        "icons": [
        // The icons property is an array that will hold all the icons for this set. Each entry can be an object with an icon and classList property, or entries
        // can be strings. In the latter case, the "classList" value is considered to be "".
        { 
            "icon": "3d_rotation",  // icon: the value for the icon. This name determines which icon is displayed.
            "classList": "regular"  // classList: a string or an array holding the keys for classes for the icons. 
        },
        "block",                    // For "material" icons, the entries in "icons" should be strings. This is the value for the icon.
        ...
      ]
	},
	{
		"type": "fontAwesomePro",
        "title": "Font Awesome Pro",
        "classList": {
            "brands": "font-awesome-pro-brands-class fa-",  
            "solid": "font-awesome-pro-solid-class fa-", // When the solid key is used, it will apply 'font-awesome-pro-solid-class fa-' + the icon value to the class of the widget. 
														 // So for the case of abacus, it will be 'font-awesome-pro-solid-class fa-abacus'
            "regular": "font-awesome-pro-regular-class fa-",
            "light": "font-awesome-pro-light-class fa-"
        },
        "icons": [{
            "icon": "abacus",
            "classList": ["solid", "regular", "light"]
        },...]

	}
}

An example list that includes the default icon sets shipped with Profound UI is attached at the bottom of this page, along with an example of a list that includes the Font Awesome Pro Icons v5.4.1.

Note: This option is available in Profound UI Version 6, Fix Pack 2.0 and later.

Attachments:

Default Icons: Default Icon List

Default Icons with Font Awesome Pro: Default Icon List with Font Awesome Pro Icons *Note, the classList property may need to be updated to reflect the correct class for the Font Awesome Pro set.

Profound Logic Documentation

Custom Icon List

Attachments: