---
title: "Creating Icons"
slug: "creating-icons"
description: "In the NavVis IVION Sidebar Menu API, create custom icons using images."
tags: ["Data URI", "Icon Creation", "Material Design"]
updated: 2024-01-26T14:01:32Z
published: 2024-01-26T14:01:32Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.navvis.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Creating Icons

Follow these steps to create three icons. These demonstrate different ways of using the available [icon info](https://ivion-api.docs.navvis.com/v11.0.1/reference/interfaces/iconinfointerface.html) 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:

```plaintext
// 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](https://fonts.google.com/icons) Icons page.)

```plaintext
// 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.

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