Skip to main content

Creating Icons

Follow these steps to create three icons. These demonstrate different ways of using the available icon infoobjects.
  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=="
      };
      // ...
      }