Load svg assets to use them in ui.icon

[ThomasParistech]

In the ui.icon doc, we see how to import icons from Themify or Eva.

However I have my custom icon saved as svg and would like to load it like you did for the NiceGUI's website but for further reuse as an icon.

For instance, I'd like to use ui.button(icon="my-custom-loaded-svg")

Any idea ?

Many thanks

nicegui/website/svg.py

Lines 6 to 17 in e6fa211

	HAPPY_FACE_SVG = (PATH / 'happy_face.svg').read_text()
	NICEGUI_WORD_SVG = (PATH / 'nicegui_word.svg').read_text()
	GITHUB_SVG = (PATH / 'github.svg').read_text()
	DISCORD_SVG = (PATH / 'discord.svg').read_text()
	REDDIT_SVG = (PATH / 'reddit.svg').read_text()
	def face(half: bool = False) -> ui.html:
	code = HAPPY_FACE_SVG
	if half:
	code = code.replace('viewBox="0 0 62.44 71.74"', 'viewBox="31.22 0 31.22 71.74"')
	return ui.html(code)

[ThomasParistech]

The code below is a workaround for some cases.

with ui.button(icon=None):
    ui.html(data_svg)

[falkoschindler]

Hi @ThomasParistech,

You can already use SVG files (or other image files) as icons using the "img:" prefix. You only need to serve them first as static files:

app.add_static_files('/static', 'website/static')

ui.button('GitHub', icon='img:/static/github.svg')

[ThomasParistech]

Many thanks !!
It could be worth mentioning it in the doc

[ThomasParistech]

@falkoschindler
How can I then modify the color of the icon ?

The code below gives me the linked screenshot:

ui.icon("img:/static/star.svg", color="red")
ui.icon("info", color="red")

[falkoschindler]

I don't think this is easily possible without modifying the SVG file itself.
There is some CSS trickery you can do to change the color of images though. With the help of AI I came up with this code to turn a black SVG into red:

app.add_static_files('/static', 'website/static')
ui.add_css('.my-icon img { filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(6932%) hue-rotate(0deg) brightness(97%) contrast(113%); }')
ui.icon('img:/static/github.svg').classes('my-icon')