Customizing icons in our JavaScript PDF viewer

It’s possible to customize icons for a toolbar item.

Try for Free Launch Demo

The icon should be a URL, a Base64-encoded image, or a string with an SVG. This property can either add an icon to a custom button or override the icons of the default items:

// Adding an icon to a custom toolbar item.
const myZoomInToolbarItems = {
  type: "custom",
  id: "my-group",
  mediaQueries: ["(min-width: 980px)"],
  icon: "<svg><path d="my-path"/></svg>"
};
// Override default icon.
const toolbarItems = NutrientViewer.defaultToolbarItems;
const index = toolbarItems.findIndex((item) => item.type === "zoom-in");
toolbarItems[index].icon = "my-icon-path.svg";
instance.setToolbarItems(toolbarItems);