CODEWITHSUNDEEP
autodesk-forgeautodesk-viewer
MA.Hammoud
MA.Hammoud

Reputation: 55

Custom button Icon Autodesk Forge Viewer

button

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

Upvotes: 1

Views: 892

Answers (1)

Adam Nagy
Adam Nagy

Reputation: 2150

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: enter image description here

Icon file: enter image description here

Upvotes: 0

Related Questions