How to make ui.switch / ui.button use a custom icon with currentColor?

[painter-bk]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

testvueicon.py

from nicegui import ui, app
from TestIcon import TestIcon

@ui.page('/')
def index():
  app.add_static_files('/static', 'static', max_cache_age = 1)

  ui.dark_mode().enable()

  TestIcon() # For registering the component

  ui.switch().props('icon="test-icon"')
  ui.button('Custom vue icon', icon='test-icon')
  ui.button('Custom svg icon', icon='img:/static/test-icon.svg')


ui.run(title='Test Icon Demo', port=8080)

TestIcon.py

from nicegui.element import Element

class TestIcon(Element, component='static/test-icon.vue'):

    def __init__(self) -> None:
        super().__init__()

static/test-icon.vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor">
    <path fill="currentColor" stroke="currentColor" d="M 3.8212364,20.281657 20.178764,3.7183426"
      style="opacity:1;stroke-width:2.91763;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1" />
  </svg>
</template>

<script>
export default {
  name: 'test-icon',
};
</script>

static/test-icon.svg - for comparison only

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path fill="currentColor" stroke="currentColor" d="M 3.8212364,20.281657 20.178764,3.7183426" style="opacity:1;stroke-width:2.91763;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1" />
</svg>

Description

I am trying to use a custom icon in a ui.switch that changes its color by using currentColor. AFAIK this is expected not to work with an svg file as an image, instead it requires a vue component. For this I created the test-icon.vue component, and tried to register it following the custom_vue_component example. The program renders the icon incorrectly (or not at all, or something different). For comparison, the last button shows the correct icon as img/svg.

Neither the program nor the browser shows any errors. The source in the browser for the icon in the first button looks like this:

<i class="q-icon on-left notranslate material-icons" aria-hidden="true" role="img">test-icon</i>

It seems still to refer to some "material-icons".

So, what am I doing wrong? Wrong approach? Wrong registration? File name or Icon naming convention issues? Any help appreciated.

NiceGUI Version

2.24.1

Python Version

Python 3.12.10

Browser

Other

Operating System

Windows

Additional Context

No response

[falkoschindler]

Hi @painter-bk,

Why do you think a custom component would work? I can't find anything about it the Quasar documentation.

[painter-bk]

Hm, this is just what I puzzled together based on some google research and some rather less convincing co-pilot statements, after I found that ui.switch with an img: icon was not working as expected and could not find anything better ... . If this cannot work, is there a way?

[falkoschindler]

Here is a workaround nesting icon and label inside a ui.button:

SVG = '''
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path stroke="currentColor" d="M 3.8212364,20.281657 20.178764,3.7183426" />
    </svg>
'''

with ui.button():
    with ui.row():
        ui.html(SVG, sanitize=False).classes('q-icon')
        ui.label('BUTTON')