ToggleIcon#

Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).

import panel as pn
pn.extension()

The ToggleIcon widget allows toggling a single condition between True/False states. This widget is interchangeable with the Checkbox and Toggle widget.


Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity. Alternatively, learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.




Parameters:#


For details on other options for customizing the component see the layout and styling how-to guides.




Core#


    

  • active_icon (str): The name of the icon to display when toggled from tabler-icons.io/
    • 

  • icon (str): The name of the icon to display from tabler-icons.io/ or an SVG.
    • 

  • value (boolean): Whether the icon is toggled on or off
    • 







Display#


    

  • description (str | Bokeh Tooltip | pn.widgets.TooltipIcon): A description which is shown when the widget is hovered.
    • 

  • disabled (boolean): Whether the widget is editable
    • 

  • name (str): The title of the widget
    • 

  • size (str): Optional explicit size as a CSS font-size value, e.g. ‘1em’ or ‘20px’.
    • 





toggle = pn.widgets.ToggleIcon(size="4em", description="favorite")
toggle








You can also replace the description with name to have it shown on the side.


toggle = pn.widgets.ToggleIcon(icon="heart", size="4em", name="favorite")
toggle








Toggle.value is either True or False depending on whether the icon is toggled:


toggle.value





False


The value can be modified by clicking the icon, or setting it explicitly.


toggle.value = True





By default, when value is True, the active_icon (heart-filled) is the filled version of the icon (heart).


If you’d like this to be changed, manually set the active_icon.


pn.widgets.ToggleIcon(icon="thumb-down", active_icon="thumb-up")








The icon will automatically adapt to the specified width/height but you may also provide an explicit size:


pn.widgets.ToggleIcon(icon="thumb-down", active_icon="thumb-up", size='3em')








You can also use SVGs for icons.


SVG = """
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ad-off" 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="M9 5h10a2 2 0 0 1 2 2v10m-2 2h-14a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2" /><path d="M7 15v-4a2 2 0 0 1 2 -2m2 2v4" /><path d="M7 13h4" /><path d="M17 9v4" /><path d="M16.115 12.131c.33 .149 .595 .412 .747 .74" /><path d="M3 3l18 18" /></svg>
"""
ACTIVE_SVG = """
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ad-filled" 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="M19 4h-14a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3zm-10 4a3 3 0 0 1 2.995 2.824l.005 .176v4a1 1 0 0 1 -1.993 .117l-.007 -.117v-1h-2v1a1 1 0 0 1 -1.993 .117l-.007 -.117v-4a3 3 0 0 1 3 -3zm0 2a1 1 0 0 0 -.993 .883l-.007 .117v1h2v-1a1 1 0 0 0 -1 -1zm8 -2a1 1 0 0 1 .993 .883l.007 .117v6a1 1 0 0 1 -.883 .993l-.117 .007h-1.5a2.5 2.5 0 1 1 .326 -4.979l.174 .029v-2.05a1 1 0 0 1 .883 -.993l.117 -.007zm-1.41 5.008l-.09 -.008a.5 .5 0 0 0 -.09 .992l.09 .008h.5v-.5l-.008 -.09a.5 .5 0 0 0 -.318 -.379l-.084 -.023z" stroke-width="0" fill="currentColor" /></svg>
"""

pn.widgets.ToggleIcon(icon=SVG, active_icon=ACTIVE_SVG, size='3em')














Controls#


The ToggleIcon widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:


pn.Row(toggle.controls(jslink=True), toggle)










Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).