Creating Icons

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

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"
  };
  // ...
}

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: ""
  };
  // ...
}
```

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

Set the property class-name to any name you wish (except "material-icons").
Set ligature to an empty string.
For path, insert the standard data URI information.

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=="
  };
  // ...
}