Use Toggle with Smileys

I love the integration of smileys as icons in ChatMessages. I try to add a sidebar that toggles certain clients. It would be great, if I could use the smileys I use in the ChatMessages also in the Toogle Elements.

1 Like

Hi @krlng

I don’t fully understand what you are trying to achieve. Could you provide a minimum, reproducible example that is as close to what you want to achieve as possible? Then adding that last bit should be easy (if its possible :slight_smile: ).

A chat message like this nicely shows an emoji:

ChatMessage("Coder",show_timestamp=False, show_copy_icon=False,reaction_icons={}, show_user=False, user="Beat Boxer", avatar="πŸ‘¨πŸ½β€πŸ’»")

I can also create buttons with SVG icons (example taken from the docs):

cash_icon = """
<svg xmlns="" class="icon icon-tabler icon-tabler-cash" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M7 9m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
  <path d="M14 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
  <path d="M17 9v-2a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2" />
pn.widgets.Button(icon=cash_icon, button_type='success', name='Checkout', icon_size='2em')

I can use SVGs in chat messages:

ChatMessage("Coder",show_timestamp=False, show_copy_icon=False,reaction_icons={}, show_user=False, user="Beat Boxer", avatar=pn.pane.SVG(cash_icon))

What I would like to do and what is not working is the opposite way: Using emojis in Buttons:

pn.widgets.Button(icon="πŸ‘¨πŸ½β€πŸ’»", button_type='success', name='Checkout', icon_size='2em')

I also found out, that the ChatMessage implementation seems to work with simply more options. For example I can download an arbitrary SVG from the internet and plug it into a ChatMessage. If I add those arbitrary SVGs to the button, most of the time it isn’t showing them.

Right, ChatMessage has a lot of custom implementations. If you have SVGs, you could use that in Buttons/Toggle.

Other than that, I think it’d be nice if you submit a feature request for Bokeh to allow emojis as button icons.

You can use emojis in Buttons. Just use them as any other text.

And also in Toggle buttons


That definetly is the easiest way. That was probably to obvious :see_no_evil: Thanks