Support using an SVG for ToggleIcon

[ahuang11]

Support SVGs for ToggleIcon.

import panel as pn
pn.extension()


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>
"""
toggle = pn.widgets.ToggleIcon(icon=svg, active_icon="heart-filled", size="3em")
toggle.servable()

Screen.Recording.2023-12-26.at.1.38.16.PM.mov

[codecov]

Codecov Report

Attention: 3 lines in your changes are missing coverage. Please review.

Comparison is base (6a4d7f3) 84.67% compared to head (bb92254) 84.68%.

Files	Patch %	Lines
panel/tests/ui/widgets/test_icon.py	93.61%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6127      +/-   ##
==========================================
+ Coverage   84.67%   84.68%   +0.01%     
==========================================
  Files         296      296              
  Lines       44096    44151      +55     
==========================================
+ Hits        37338    37389      +51     
- Misses       6758     6762       +4     

Flag	Coverage Δ
ui-tests	40.74% <89.09%> (+0.06%)	⬆️
unitexamples-tests	72.60% <14.54%> (-0.08%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[philippjfr]

Are URLs also supported?

[ahuang11]

No, I don't think so since I don't think Bokeh button icons support URLs either. Should this support URLs (if so, I think it can be in another PR)?

[philippjfr]

If bokeh really doesn't then don't worry about it but I'd be surprised if that was the case.

[philippjfr]

Also would prefer it to be in this PR if bokeh already allows it.

[ahuang11]

I don't think it works, but maybe I'm using it wrong?

import panel as pn
pn.extension()

cash_icon = "https://upload.wikimedia.org/wikipedia/commons/6/69/How_to_use_icon.svg"

pn.widgets.Button(icon=cash_icon, button_type='success', name='Checkout', icon_size='2em')

No mention of URLs in https://docs.bokeh.org/en/3.0.2/_modules/bokeh/models/ui/icons.html#TablerIcon and this doesn't work

from bokeh.models import Button
from bokeh.plotting import show
from bokeh.io import curdoc
from bokeh.models import CustomJS

from bokeh.models.ui.icons import SVGIcon, Icon
button = Button(label="Click me", icon=SVGIcon("https://upload.wikimedia.org/wikipedia/commons/6/69/How_to_use_icon.svg"))
show(button)

[philippjfr]

Indeed, docstring says:

SVG icons with inline definitions