When configuring an indicator, header, selectors, or table (using advanced formatting), you can include a scalable vector graphics (SVG) icon. Adding an icon allows you to give the elements a more unique identity, align the dashboard with any specific branding standards, or provide additional context. The SVG icons are an XML-based vector image format and can be created in any text editor or using drawing software. When viewing and configuring a dashboard, custom icons scale with the size of the element. ArcGIS Dashboards includes a library of SVG icons to choose from.
Custom SVG icons
You can also use a custom SVG icon. When selecting an icon, expand the Custom section in the Select an icon pane, and enter the custom SVG code. For example, using the below SVG code, you can create an SVG icon that displays as a counter-clockwise series of three arrows. This could be used to indicate a work in progress.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="icons">
<path d="M13.91 9a6.003 6.003 0 0 1-5.658 4.987l-.347-1.992c.032.001.063.005.095.005a3.996 3.996 0 0 0 3.858-3h-1.749l2.75-3.912L15.61 9zm-8.668 1.877l-.002.002a3.945 3.945 0 0 1-.688-4.884l-1.809-.848a5.923 5.923 0 0 0 1.08 7.148L2.59 13.529l4.71.822-.82-4.711zm1.425-6.576l-.011-.067a3.97 3.97 0 0 1 4.575 1.43l1.194-1.697a5.941 5.941 0 0 0-6.119-1.718L6.018.607 2.64 3.994l4.33 2.03z" />
</svg>
The following image shows how an indicator looks with the custom icon:
Tip:
The following are tips for creating a custom icon:
- For an indicator, if you don't define a stroke or fill in the SVG code, you can configure them when authoring the indicator in the dashboard.
- Images in SVG format can be dynamic and interactive; however, script-based animations are not supported and are removed in the dashboard.
HTML symbols
HTML symbols can enhance the look of a dashboard and provide context. For example, you can configure an indicator to display triangles that make it easier to see whether counts have increased or decreased compared to a previous week's numbers as shown in the following image:
To include an HTML symbol that's not on your keyboard in an element, you can copy the symbol from another place directly into the rich text editor, or into other text fields, such as the top or bottom text in the indicator. Alternatively, you can provide the symbol's decimal (dec) or hexadecimal (hex) reference code. For example, to include the upward-pointing triangle (▲), you can use its dec code of ▲ or its hex code of ▲.