Adding custom icons to the icon library

In addition to the default Core and Carbon icons from the Analytics Content Hub icon library, you can add custom icons to the library.

About this task

The icon library can be extended with custom icons as you add them individually.

Important: To extend the icon library, you need administrative access to the files in the Analytics Content Hub server.

Procedure

  1. Download the Analytics Content Hub module that is required to extend the icon library.
  2. On the Analytics Content Hub server, go to the <install_directory>\AnalyticsContentHub\app\node1\tomcat\webapps\theia\modules directory.
  3. Copy the myCustomSvgIcons.zip file to the modules directory. Then, extract the file to the same directory.
  4. Copy your custom icons, in .svg format, to the <install_directory>\DigitalHive\app\node1\tomcat\webapps\theia\modules\myCustomSvgIcons\icons directory.
  5. Go to the <install_directory>\DigitalHive\app\node1\tomcat\webapps\theia\modules\myCustomSvgIcons directory and open the index.js file in a text editor.
  6. In the index.js file, modify the following sections:
    1. Optional: Give your icon library a unique name by changing the default value 'myIcons' of the const internalName setting.
    2. Create a unique label for your users to see. Change 'My Icons' in the default setting const label = 'My Icons' to your unique label.
    3. Create a metadata listing for each .svg file. To do this, modify the following section for each icon:
      lightning_cloud: {
       svgUrl: 'icons/blue_cloud.svg',
       label: 'Lightning Cloud',
       tags: ['shock', 'cloud', 'lightning'],
       svgInset: 4
      },
      
      • Each section name, such as lightning_cloud, must be unique.
      • The value for svgURL is the location of the .svg file in the Analytics Content Hub server. If you completed step 5, replace only the blue_cloud.svg part of the value with the file name for your icon.
      • For label, put the name of the icon that is going to appear in the library's interface.
      • Provide keywords in tags to make the icon appear when you search for the icon.

      The section is the metadata for the Lightning Cloud icon in the next example that includes six custom icons:

      Custom icons with the Lightning Cloud icon with shock, cloud, and lightning tags.

    4. Save the index.js file.
  7. Go to the <install_directory>\DigitalHive\app\node1\tomcat\webapps\theia directory and open the config.json file in a text editor.
    1. Modify the "modules" line to "modules": ["myCustomSvgIcons"],. Make sure that the trailing comma is included.
    2. Save the config.json file.

What to do next

You do not need to restart the server to see the changes in the icon library, but you can refresh the browser to add your custom icons.