How to change the icons of the header toolbar

[pankaj]

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.0.0

Detailed description of issue
How to change the icons of the header toolbar like for button Continuous Page, Zoom In, Zoom Out, etc. ?

Expected behaviour

Does your issue happen with every document, or just one?

Link to document

Code snippet

[system]

Hello, I’m Ron, an automated tech support bot

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:

• Hiding/Showing DOM elements in WebViewer UI - List of elements
• Customize toolbar in viewer - Header items - StatefulButton
• Core engine for WebViewer - Creating your own UI using WebViewer Core

APIs:

• Adding a download button
• UI.Header - get(dataElement)
• Core.Tools.MarqueeZoomTool

Forums:

• Programmatically highlight area on pdf using coordinates or quads
• Load document by Url and save with watermark and html
• React Native support for PDFJS Express

[Logan]

Hey!

You can use the updateTool and/or the updateElement API to update the icon of a tool.

Example:

  instance.UI.updateElement('zoomOutButton', {
    img: 'https://cdn-icons-png.flaticon.com/512/117/117453.png'
  })

The first parameter is the data-element string. More info on that can be found here.

Thanks!
Logan

[pankaj]

Hi,

Was able to change the header icons, but it did not work for the flyout menu items : Continuous Page, Single Page, Fit to Page etc.

Please guide.

[pankaj]

Hi,

Have not received any response, please assist.