Icon are not visible

Technical Support
,
1

Product: Web viewer

Product Version: 10:12.0

Please give a brief summary of your issue: In set header item I am trying to set custom button in header. For img icon I have used constants instead of giving svg .

here is my code =>
UI.setHeaderItems(header => {
header.push({
type: ‘actionButton’,
title: ‘Save’,
img: this.saveIcon,
onClick: async () => {
const doc = documentViewer.getDocument();
const xfdfString = await annotationManager.exportAnnotations();
// includeAnnotations If false, all annotations will be removed from PDF document.
const data = await doc.getFileData({
xfdfString: xfdfString,
includeAnnotations: false,
});
Apryse.SaveDocumentAnnotations();
},
});
});

public const string SaveIcon = @"<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 24 24""><path d=""M0 0h24v24H0z"" fill=""none""/><path d=""M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z""/></svg>";

(Think of this as an email subject)

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:

1 Like
2

Hello Rishu,

Thank you for contacting WebViewer Forums.

The “img” property of the UI header can only take in a path to the SVG file or base64 data. I would recommend reviewing this documentation here on setting the icon in the header: Custom PDF Viewer Toolbar / Header using JavaScript | Apryse documentation

Regards,
Luke

1 Like