Image Button

Community Support
1

Hi,

I want to implement several buttons with custom images as icon, so when user clicks on an image some function runs,

what would be the best solution ?

I found icon attribute in class AbstractButton, but it is not clear how to use it.

Thanks in advance

2 Likes
2

Hi John

I would like to do the same. Did you ever find out how to do it?

Thanks in advance.

Marc

3

Button has a property to set and icon but as of 1.4.0 there is not a built-in icon class that can be used (only a base class that could be extended). Adding an image will require making a custom extension. You can see an example of a custom extension that draws FontAwesome icons here:

bokeh/examples/custom/font-awesome at branch-3.0 · bokeh/bokeh · GitHub

You could adapt that example by having the render function in the JS implementation insert the image you want.

4

I made a quick example with panel but it should not be hard to port on pure bokeh:

image
image1046×450 20 KB

raw code

import panel as pn

css = """
.btn-custom > .bk-btn-group > .bk-btn {
    background-image: url(https://previews.123rf.com/images/hemantraval/hemantraval1206/hemantraval120600022/13975128-glassy-aqua-blue-next-icon-button.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
"""

pn.extension(raw_css=[css])
pn.widgets.Button(name='', css_classes=['btn-custom'], width=50, height=50)
1 Like
5

Great alternate solution!