Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

This configuration option enables custom icons to be displayed in the Icon Selector Dialog in the Designer and to be using in the icon 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 ones icons shipped with Profound UI. If you want to include the default shipped icons, you will need to include them to in your defined list.
An
Below is an example is below:

Code Block
languagejavascript
pui["customIconList"] = {
    "icons": [{
        "type": "materialIconsmaterial",  // 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. 
        {
            "regular": "pui-material-icons"         //The Thekey classListmay propertybe isthe anempty objectstring. thatUsed willfor takea thecondensed keyform forof the class and use a string for the value list, where each icon uses the same CSS Class Name.
         },
        "icons": [{
             "icon": "3d_rotation",  // The icons property is an array that will hold all the icons for this set. Each indexentry willcan 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 "".
   "classList     { 
            "icon": "regular3d_rotation",  // The icon property isicon: the value for the icon. This name determines which icon is displayed. The classList property can be
            "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"]
        },...]

	}
}

...


Info

...

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

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.