The Icon
model enables the use of SVG, Bootstrap, Font Awesome, Material, Fluid UI and Other Icon Systems in Panel.
name
(str): The name of the icon.value
(str): The html string defining the icon. For example a <svg>
or <i>
based icon (See examples below).size
(int): The size in em
units, i.e. a multiplier of the current font-size.fill_color
(str): The fill color of the Icon. Any valid css color like '#eb4034', 'rgb(235, 64, 52)' or 'currentColor'. Default is 'currentColor' which is the color of the surrounding text.spin_duration
(int): The spin duration in miliseconds. If greater than 0 the Icon will do a spinning animation. Defaults to 0.In the below we will assume you already have a basic understanding of icons in HTML corresponding to the W3c Icons Tutorial.
A few notes on the imports below
Button
does not support icons so awesome-panel-extensions
provides the AwesomeButton
for this use case.import panel as pn
from awesome_panel_extensions.models.icon import Icon
from awesome_panel_extensions.widgets.button import AwesomeButton
pn.config.js_files["fontawesome"]="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"
pn.extension()
from awesome_panel_extensions.awesome_panel.notebook import Header
Header(notebook="Icon.ipynb", folder="examples/reference/widgets")
# Source: https://fast.design/
github = Icon(
name="Github",
value="""<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-github" viewBox="0 0 19 20"><path d="M6.71154 17.0776C2.09615 18.4906 2.09615 14.7226 0.25 14.2517L6.71154 17.0776ZM13.1731 19.9036V16.2581C13.2077 15.8089 13.1482 15.3574 12.9986 14.9335C12.849 14.5096 12.6127 14.123 12.3054 13.7995C15.2038 13.4698 18.25 12.3489 18.25 7.20563C18.2498 5.89046 17.754 4.62572 16.8654 3.67319C17.2862 2.52257 17.2564 1.25074 16.7823 0.121918C16.7823 0.121918 15.6931 -0.207776 13.1731 1.51605C11.0574 0.930913 8.82722 0.930913 6.71154 1.51605C4.19154 -0.207776 3.10231 0.121918 3.10231 0.121918C2.62819 1.25074 2.59844 2.52257 3.01923 3.67319C2.12396 4.63279 1.62771 5.90895 1.63462 7.23389C1.63462 12.3394 4.68077 13.4604 7.57923 13.8278C7.27554 14.148 7.04132 14.5299 6.89182 14.9486C6.74233 15.3674 6.6809 15.8135 6.71154 16.2581V19.9036"></path></svg>""",
fill_color="#E1477E",
spin_duration=2000,
)
AwesomeButton(
name="Click Me",
icon=github,
)
License: Creative Commons Attribution 4.0 International license
In the Font Awesome Gallery you can download tons of awesome svg icons.
# Source: https://fontawesome.com/icons/hand-holding-water?style=solid
fa_hand_holding_water="""<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M288 256c53 0 96-42.1 96-94 0-40-57.1-120.7-83.2-155.6-6.4-8.5-19.2-8.5-25.6 0C249.1 41.3 192 122 192 162c0 51.9 43 94 96 94zm277.3 72.1c-11.8-10.7-30.2-10-42.6 0L430.3 402c-11.3 9.1-25.4 14-40 14H272c-8.8 0-16-7.2-16-16s7.2-16 16-16h78.3c15.9 0 30.7-10.9 33.3-26.6 3.3-20-12.1-37.4-31.6-37.4H192c-27 0-53.1 9.3-74.1 26.3L71.4 384H16c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16h356.8c14.5 0 28.6-4.9 40-14L564 377c15.2-12.1 16.4-35.3 1.3-48.9z"/></svg>"""
AwesomeButton(
name = "",
icon = Icon(
name="Masking Example",
value = fa_hand_holding_water,
size=4.0
),
)
You can also include the fontawesome js
or css
with pn.config.js_files
or pn.config.css_files
as we did above. You can get get the files by signing up on the Font Awesome site or via cdnjs.com/libraries/font-awesome By using the js
file you can use all the advanced functionality described in the Font Awesome Docs
snowboarding = Icon(
name="Car",
value="""<i class="fas fa-snowboarding fa-10x fa-rotate-90"></i>""",
)
AwesomeButton(
icon=snowboarding,
height=200, width=200
)
value = """
<span class="fa-layers fa-fw fa-4x">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>
"""
envelope_with_counter = Icon(
name="Envelope",
value=value,
)
AwesomeButton(
icon=envelope_with_counter, width=50, css_classes=["bk-btn-light"]
)
In the above example we also showed that the AwesomeButton
can show with no borders if you add the bk-btn-light
css class to the AwesomeButton
.
Below we list icon resources that can be used with the Panel Icon either as SVG or by using their .css
or js
files.
A good, general introduction to icons is the the W3c Icons Tutorial. You might also be interested in How to create social media buttons Tutorial.
A background resource for understanding why inlining SVG icons is a good method see CSS Tricks - pretty-good-svg-icon-system
pn.Param
in a Notebook. They work on a server though.Icon
. See Panel FR - Add IconButton
does not support icons. See Panel FR - Add icon support to Buttonbutton_type
without a border. See Bokeh FR: Add button_type without border and Bokeh PR - Add light button_type.I hope to add a rotation
and a flip
parameter to the Icon
model later. I also hope this functionality would go back into Bokeh and Panel later.