Custom icons reference

This reference topic describes the Agile Service Manager custom icons functionality.

Custom icons

The Custom icons page is displayed when you select Administration > Topology configuration from the DASH menu, and then click Configure on the Custom icons card. The Custom icons page displays the following buttons:

New: Opens the New custom icon page
Refresh: Reloads the icon information from the topology service

The Custom icons page lists the custom icons in table format by name, icon, category, last update, and size, in sortable columns.

Tip: To reduce the number of icons displayed in the table, use the Filter table text field. The icons displayed are filtered as you enter the search text.

Table headers (columns):

Name: A unique icon name.; You cannot change the name of an existing icon. If you want an icon to have a different name, create a new icon, then delete the old one.
Icon: The icon itself; If you hover over a custom icon, it will be enlarged and displayed inside a circle to show what it will look like within a topology view.
Last Updated: Date and timestamp
Size (KB): Size of the icon SVG in KB
Edit: Opens the Edit custom icon page
Delete: Deletes an icon.; If assigned to a resource type, a warning is displayed.
Category: Sorts icons by category

From here you can create new icons, and edit or delete an existing custom icon.

To reload the custom icons list, click Refresh (top right). This can be useful if other users are customizing the icons.
To delete custom icons, select one or more of the icons in the table, then click Delete custom icon(s).
To edit a custom icon, select it in the table, then click Edit custom icon. The Edit custom icon page is displayed, from which you define the existing icon as you would a new one.
To create a new custom icon, click New (top right). The New custom icon page is displayed.

Configure custom icon

On the New custom icon (or Edit custom icon) page, you enter an icon's name, add a category, and define the SVG XML (both required) using the provided SVG XML editor.

Icon properties

Name: Each icon must have a name, which uniquely identifies the icon when assigning it to a type.; You cannot change the name of an existing icon. If you want an icon to have a different name, create a new icon, then delete the old one.

Category: Optionally, each icon can be assigned to a category. You can use categories to group icons of the same type or function together.; If you sort the full list of icons by category, icons with the same category are displayed together.

SVG XML

Use the XML editor to enter or edit the SVG text. Each icon definition must be valid SVG XML with a given viewBox, which is important to ensure scaling of the image. The SVG editor rejects any invalid XML entered.

The SVG definition must include inline styling of the image, such as stroke color and fill color. If style classes are used, naming must be unique for each SVG image to prevent class definitions from being overwritten.

Note:

Height or width should not be specified.
Inline styles should be used and not style classes.
SVG namespace is required:
```
xmlns="http://www.w3.org/2000/svg"
```

The XML editor includes a Preview area where the results of your SVG edits are displayed.

Example: Use the following definition for the 'disk' icon as guidance:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
   <ellipse style="fill-opacity:0;stroke:currentColor;stroke-width:12.12270069;" id="path4139" cx="33.627117" cy="32.949142" rx="16.803904" ry="17.210684"/>
   <circle cx="33.827423" cy="33.055576" r="3.3037829"/>
</svg>