Adding icons to button labels

plotly.js
1

Is there a simple way to add icons to buttons? I created a slider with “previous” and “next” buttons (discussed here), but instead of writing in the buttons, I’d prefer icons as step-backward and step-forward.

I tried putting the unicode directly on the “label” or adding ::before and ::after pseudo elements to the button with the content, but that didn’t work - the first just shows the unicode, and the second doesn’t show anything.

Ideally, I’d not like to have a JS solution, because I have “Plotly.react()” in a few places, which I believe would then have to be followed by the update of the button content.

2

As I mentioned in the other post, you can’t add icons to the buttons of an updatemenu yet, at least not directly. I’ll leave you this option using the modebar since it’s the only thing that Plotly has that has buttons with icons, even so, it was inevitable to have to use JS to be able to move it from one position to another. This is another limitation that Plotly has of not being able to move the position of that bar

On the other hand, you had mentioned that you needed to use Fontawesome icons, but it’s still not possible to add them directly since Fontawesome icons are embedded using an <i> tag, while the buttons and the modebar are <svg><g><rect><text> graphic elements that don’t accept the <i> tag. Your option would be to convert those icons to SVG and get the path. There are many tutorials on the Internet on how to do this.

Now another problem is that if you use the modebar, you can’t create multiple modebars like you can with the updatemenus, you only have one modebar, so if you were using the modebar to have other buttons they will all be in the same bar.

I don’t understand how it is that if they already have the logic to embed icons in the modebar they don’t apply the same code for the updatemenu buttons, hopefully in other versions they will implement it.

Another option would be to create shapes with xref paper and position them above the buttons, but the problem is that shapes do not support complex icons, much less if they include “A” in the path, and you would have to convert the path to paper coordinates and possibly not pass the click event to the button below

The other option that I mentioned in the other post is to access the buttons and embed the icon with JS, the buttons are not <button> tags, they are actually a <g> tag that groups several <rect> and <text> to create the buttons

Personally, I create my own buttons with <button> and I position them where I want with absolute divs

https://codepen.io/saratoga01/pen/KwKXwQY?editors=0010

3

Thank you very much for your detailed reply! Unfortunately, those options are not suitable for me, as I already use the modebar. I ended up implementing a function that is always called after the Plotly.react or Plotly.update, and that function is currently doing:

  // Fixing slider icons
  let nextbtn = $('.updatemenu-button:nth-of-type(2) > text');
  if (nextbtn.length && nextbtn.find('tspan.icon').length === 0) {
    let tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
    $(tspan).addClass("icon").text("\uf051");
    nextbtn.append(tspan)
  }
  let prevbtn = $('.updatemenu-button:nth-of-type(1) > text');
  if (prevbtn.length && prevbtn.find('tspan.icon').length === 0) {
    let tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
    $(tspan).addClass("icon").text("\uf048");
    prevbtn.append(tspan)
  }

and I also added the CSS:

.updatemenu-item-text .icon {
  font-family: "FontAwesome", sans-serif !important;
}

This is not ideal, of course, but the icons look nice:
Screenshot 2025-03-11 at 20.28.03

PS: I have a further issue that the slider is given as percentage (e.g., len: 0.93,) but the buttons have fixed size. So it can happen that they either overlap or are too far away from each other. But that’s a matter for another post. :sweat_smile:

4

Check out this example again, I modified it to use the FontAwesome font as icons, you don’t need to make any changes with JS anymore just include the correct cdn with all the FontAwesome icons

https://codepen.io/saratoga01/pen/GgREBym?editors=0010

Your solution reminded me that fonts can be used as icons.

5

That is perfect!! Exactly what I wanted! Thanks a lot!

1 Like