I am adding a custom button to the viewer toolbar. How can i add an icon without create a stylesheet with a css class in it?
Or use a class from https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css
1 Answer
You can set the style for the button directly when you create it and add the image e.g. as a background:
function addButton(viewer) {
let group = viewer.toolbar.getControl('transformExtensionsToolbar');
if (!group) {
group = new Autodesk.Viewing.UI.ControlGroup('transformExtensionsToolbar');
viewer.toolbar.addControl(group);
}
// Add a new button to the toolbar group
button = new Autodesk.Viewing.UI.Button('transformExtensionButton');
// instead of using bootstrap classes e.g.
// button.icon.classList.add("fas", "fa-arrows-alt");
// you can do this
let iconPath = "icon.png"
button.icon.style = `background-image: url(${iconPath}); background-size: 24px 24px;`
button.setToolTip('Transform Object');
group.addControl(button);
}
And you get this:
Icon file: 
