Configuring custom icons

You can add custom icons for resources that are displayed in the IBM Cloud Pak for AIOps console using the Custom Icons page.

Before you begin

To access the Custom Icons page, you must have the required permissions.

About this task

Tip: Instead of using the following procedure, you can first select a specific resource type from the Resource Types page, and then define a custom icon for that specific resource type only. This is described in Editing resource type styles. However, if you intend to create a number of icons without assigning them, or simply want to edit or delete icons, use the following procedure.

Icon properties

Each custom icon must have a name that 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 another icon, then delete the old icon.
Icons are defined inside an SVG editor, which runs an XML validation check. Each icon definition must be valid SVG XML with a viewBox, which is important to ensure scaling of the image.

The SVG definition must include inline styling of the image, such as stroke color and fill color. Use of style classes is not advised, as it can cause visualization issues on some browsers. If style classes must be used, naming must be unique for each svg image to prevent class definitions from being overwritten.
Optionally, each icon can be assigned to a category, which allows you to group icons of the same type or function together when displaying them in a list.

Procedure

Log in to the IBM Cloud Pak for AIOps console.
From the main navigation, expand Operate and click Topology viewer.
From the topology navigation toolbar, expand Settings, and click Topology configuration.
On the Custom icons card, click Configure. 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 items displayed in the table, use the Filter table text field. The table is filtered as you enter the search text. You can also click Refresh (top right) to reload the items displayed, which can be useful if other users are customizing them.
Click New to create an icon. Alternatively, select icons in the table to edit or delete them.
On the New custom icon page, enter the details for your custom icon:
- Enter a unique name. Each icon must have a name, which uniquely identifies the icon when assigning it to a type.
  
  Remember: You cannot change the name of an existing icon. If you want an icon to have a different name, create an icon, then delete the old icon.
- Optionally, enter a category name. Each icon can be assigned to a category. You can use categories to group icons of the same type or function together.
- Enter the SVG XML to define the icon. Use the editor to enter valid XML.
  
  Each icon definition must be valid SVG XML with a viewBox, which is important to ensure scaling of the image. The SVG editor rejects any invalid XML entered.
  
  The XML editor includes a Preview area where the results of your edits display. The following conditions apply:
  - Height or width should not be specified.
  - Inline styles, such as stroke color and fill color, should be used and not style classes. Naming must be unique for each SVG image to prevent class definitions from being overwritten.
  - SVG namespace is required: xmlns="http://www.w3.org/2000/svg"
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>
```
Click Save.

What to do next

You can assign your custom icons to particular resource types using the Resource types page. On that page, you can also apply further style edits to the resource types.