Creating Icons

Follow these steps to create three icons. These demonstrate different ways of using the available icon info objects.

Procedure

1. Create an icon info object that uses a PNG image as an icon. The image path is the URL path that the web browser uses to access the resource:

   // SidebarMenuModifier.ts
   export class SidebarMenuModifier {
   
     /*** Menu Icons ***/
   
     private statueFaceIcon: IconInfoInterface = {
       className: "",
       ligature: "",
       path: "./greek-statue-face.png"
     };
     // ...
   }

2. Create an icon info object that uses the NavVis IVION set of material design icons. The property   class-name  is always   "material-icons". However, ligature  uses one of the available symbol tags (for a list of ligature names, see the Material Design Icons page.)

   // SidebarMenuModifier.ts
   export class SidebarMenuModifier {
     // ...
     private materialIcon: IconInfoInterface = {
       className: "material-icons",
       ligature: "done",
       path: ""
     };
     // ...
   }

3. Create an icon info object that uses a data URI as an icon.

   1. Set the property class-name  to any name you wish (except "material-icons").

   2. Set ligature  to an empty string.

   3. For path, insert the standard data URI information.

   4. To convert image files into base64 text, use the appropriate method for your operating system.

   // SidebarMenuModifier.ts
   export class SidebarMenuModifier {
     // ...
     private dataUriIcon: IconInfoInterface = {
       className: "paperclip",
       ligature: "",
       path: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZ5JREFUeNrUmIGNwyAMANOfgN8gI2QERsgIdIOMkJ8gI9ANOkJGyAiMkG6Qp1IiRZYN/g8YimSpKgZOjrGNb9u2NTWPW+2AEsN4mb2sXpwX60XXANZ5WbxshDy9qJJwawDukHXXrQLOBSxqSsONJx1N6JhScOairjhcaE0Wn7xiDWytS3m7U3yqDllva4E7B3O4TycBd2SRw79s4OBnKity4NpAzKMuQovoqhxwnCzimFbsc1iOk+IoH4O+OH4x4frdl6DJ714e+29FFADv+W8vP+B/7PO9mkQ3DFpOET531rFgDiu5lr9GhP4C3BTZBw6L6LRXfY6Cs5F9LANuKgW3AstgcHMpOBg6MLglFP9yw5nI5ftcuIYRJnLCrbEbO/4zfaWCi1YuLvCGUKXhdCSR65Jw7zFEAiS04CAJh/mfJmq1EcyJwGGAnJK9l4LDEnms1OZUN8ngDh/jPljE4aiciEV16uA+Nxz1YFlO0X1gHNzm7l6NzLcEdXAn0cawF3t6s0Tfb4o8F2MHizQk9W5Nt1tjlmwyflSX/1eAAQCTYjF+fi4HFAAAAABJRU5ErkJggg=="
     };
     // ...
   }