Adding Custom Icons to the Digital Hive Icon Library

Adding Custom Icons to the Digital Hive Icon Library

Question

Although the default Digital Hive icon library contains over 2,000 icons, our company has specific icons that we need to incorporate into our Hive design. Is it possible to extend the default icon library, beyond the default libraries, to include our custom icons?




Answer

In addition to the Core and Carbon icon sets that are included in the default Digital Hive icon library, it is possible to add custom icons. Custom icons have to be added individually, but the library can be extended.

Extending the icon library needs to be configured through files located on the Digital Hive server, so the proper administrative access to the server would be required.
  1. Download the Digital Hive module required to extend the icon library: https://releases.digitalhive.com/updates/myCustomSvgIcons.zip
  2. On the Digital Hive server, navigate to the <install_directory>\DigitalHive\app\node1\tomcat\webapps\theia\modules directory
  3. Copy the myCustomSvgIcons.zip file to the modules directory
  4. Extract the myCustomSvgIcons.zip file to the modules directory
  5. Copy your custom icons, in svg format, to the <install_directory>\DigitalHive\app\node1\tomcat\webapps\theia\modules\myCustomSvgIcons\icons directory
  6. Navigate to the <install_directory>\DigitalHive\app\node1\tomcat\webapps\theia\modules\myCustomSvgIcons directory
  7. Open the index.js file in a text editor
  8. This file has multiple sections to modify:
    1. Give the icon library a unique name. The default setting is const internalName = 'myIcons'  so replace the myIcons with a custom name (if desired, this is only a unique internal name)
    2. Add a friendly label as this is the label that will show up in the UI for your users. The default setting is const label = 'My Icons' so replace My Icons with the desired label
    3. Create the metadata listing for each individual svg file. As part of the example, 6 custom icons are included. These entries could be modified for your icons, or they can be duplicated and edited. For each svg file a section like this needs to be present, which defines how the values appear in the UI.  
    4. The value of lightning_cloud is an internal name but this has to be unique.
    5. the value for svgURL must point to the location on the Digital Hive server where the svg file resides. If step 5 was followed, only the blue_cloud.svg part of the value needs to be replaced with the file name for your icon
    6. The value for label is what the icon will be called in the UI
    7. The tags that are defined indicate what keywords will cause this icon to appear as part of the icon search
  9. Save the changes to the index.js file
  10. Navigate to the <install_directory>\DigitalHive\app\node1\tomcat\webapps\theia directory
  11. Open the config.json file in a text editor
  12. Modify the "modules" line so that it looks like this "modules": ["myCustomSvgIcons"], ensuring that the trailing comma is present
  13. Save the config.json file
No restart of the server would be required for the setting to take affect, but users will have to refresh their browsers to see the changes.

    • Related Articles

    • Adding Custom Metadata Fields to Enhance Digital Hive Content

      Question Looking at the properties for a report, there is metadata visible from the content systems like Tableau, PowerBI, and IBM Cognos Analytics, but is it possible to create custom metadata values on a report or dashboard. The objective is to ...

    • Custom Sort Order for Digital Hive Folders

      Overview As of the 2024.3 Digital Hive release, it is now possible to create a custom sort order for contents within a Digital Hive folder. There are certain scenarios where alphabetical or time based sorting is not sufficient and a custom sort order ...

    • Adding Custom Fonts to Digital Hive

      Question The corporate branding guidelines for our company mandates a specific font be used for all material. Examining the available fonts within Digital Hive, the required font is not listed. Is there a way to add the custom font so that it's ...

    • Adding URL (link) Objects to Digital Hive Content

      Question There is a lot of content that would be desirable for end users, but the content is only available through a URL link. There was an attempt to embed the individual URLs through a Web Page tile, but the settings on the URLs will not permit ...

    • What's New in the 2024.3 Digital Hive Release

      This articles details the new product features, enhancements, and resolved issues, that were included as part of the Digital Hive 2024.3 release. New Features & Enhancements Upgraded versions of PostgreSQL and ElasticSearch This release of Digital ...