Icon Renderers can be used with any data type. They are used to represent values in data as graphical elements.
edgeCore ships with a large set of ready to use icons; however, this can be further expanded by adding Custom Icons.
Here you can look into Icon Picker
The Icon Renderer received a fairly large update in version 3.3:
In edgeSuite version 3.3 and higher, color has been separated out from the Icon Renderer. Color is now a stand-alone property that can have its own set of rules, independent from the rules that determine what icon to use. This allows one value to determine the icon, and a different value to determine the color of the icon. See Color Renderer for more details.
This property determines whether a static icon will be shown for all values, or whether a data set will determine which icon appears based on a value in the record. Derived Icons use a concept of a Rule Set.
The “static” option results in the same icon being used for every record in a dataset.
Selecting an icon is done via the custom input field. Clicking anywhere within the Icon input field will open the “Icon Picker”.
The “Derived” option provides a different set of inputs from a static icon. Instead of selecting an individual icon from the icon picker, users will select a “Rule Set” that contains a collection of icons mapped to specific values in the data.
See the Rule Sets section for more information on creating rule sets.
Icons shipped with edgeSuite are based off of SVG source, but due to performance reasons, edgeSuite does not display SVG icons in the product. Instead, the edgeSuite server generates a raster image from the SVG source based on the sizes defined in Rule Sets and Renderers. This is done so that the raster icon can be “cached” by the browser. This hybrid approach lets edgeSuite scale images up and down without losing image fidelity, but such that the browser is still able to cache the raster image and gain a noticeable performance improvement with dense data visualizations, such as topology.
Because the stock icons are SVG, edgeSuite is able to expose several options in the “Style” property that affect how the SVG image will be rendered.
Highlight is a specialized style that combines a flat colored fill with a “Highlight” layer. It is only available on a small subset of icons, and primarily used to enable a “shine” effect on simple shapes.
The “highlight” layer is a white to transparent gradient that sits on top of the “Fill” layer within the SVG. This means the “highlight” layer will work with any colored fill that is applied.
Highlight layers are available for icons in the following groups: Shapes, Map, and Status.
Size information is stored within a Rule Set. This allows sizes of icons to vary based on values in the data. While this is convenient, it also limits reuse. The “Size” option in the renderer is essentially an override that lets you ignore the sizes from a Rule Set, and specify a new static size to use with a renderer. For example, a ruleset with small icons, that was set up with a Table Visualization in mind, can be made larger for use in a List Visualization.
Offset affects the position of the icon on a selected layer. This control is useful when overlaying different icons. It is often used in conjunction with size variations across different layers to create overlays. An example would be positioning a small status overlay at the top right corner of a resource icon.