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 | ||
|---|---|---|
| ||
pui["customIconList"] = {
"icons": [{
"type": "materialIcons", // 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": {
"regular": "pui-material-icons" // The classList property is an object that will take the key for the class and use a string for the value.
},
"icons": [{
"icon": "3d_rotation", // The icons property is an array that will hold all the icons for this set. Each index will be an object with an icon and classList property.
"classList": "regular" // The icon property is the value for the icon. The classList property can be a string or an array holding the keys for classes for the icons.
},...]
},
{
"type": "fontAwesomePro",
"title": "Font Awesome Pro",
"classList": {
"brands": "font-awesome-pro-brands-class fa-",
"solid": "font-awesome-pro-solid-class fa-",
"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. |
| Note |
|---|
Note: This option is available in Profound UI Version 6, Fix Pack 1.3 and later. |
Attachments:
Default Icons: Default Icon List
...