Unable to Render SVG Icons on Linux

[bikathi]

Hi,

I am facing an issue where, while using the svg() function to render an icon, I am totally unable to make it appear on my app. For example, here is a simplified code from my app:

let svg_content: &str = r#"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
      <path d="M5.055 7.06C3.805 6.347 2.25 7.25 2.25 8.69v8.122c0 1.44 1.555 2.343 2.805 1.628L12 14.471v2.34c0 1.44 1.555 2.343 2.805 1.628l7.108-4.061c1.26-.72 1.26-2.536 0-3.256l-7.108-4.061C13.555 6.346 12 7.249 12 8.689v2.34L5.055 7.061Z" />
    </svg>
    "#;

    return h_stack((
        container(svg(svg_content)).style(|s| s.color(css::WHITE)),
        container(svg(svg_content)),
    ));

Both cases, where I try to color or render the icon is just not working. Even using r##'...'##; like in the dropdown widget code seems not to be working. Is there a feature I am supposed to enable or is this a not yet discovered issue?

Environment

OS: Ubuntu 25.04
Desktop: Gnome
Rust Version: rustc 1.92.0-nightly (c8905eaa6 2025-09-28)
Display Server: Wayland
Floem Version: GIT

[charlescgs]

When I copy your code it will not display the icons, but when I will set up the size, it will work as expected. Remember to apply styles to the svg, not the wrapper.

let svg_content: &str = r#"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
      <path d="M5.055 7.06C3.805 6.347 2.25 7.25 2.25 8.69v8.122c0 1.44 1.555 2.343 2.805 1.628L12 14.471v2.34c0 1.44 1.555 2.343 2.805 1.628l7.108-4.061c1.26-.72 1.26-2.536 0-3.256l-7.108-4.061C13.555 6.346 12 7.249 12 8.689v2.34L5.055 7.061Z" />
    </svg>
    "#;

    h_stack((
        container(svg(svg_content).style(|s| s.color(css::RED).size(16., 16.))),
        container(svg(svg_content).style(|s| s.color(css::DARK_GREY).size(24., 24.)),
    ))

[jrmoulton]

One thing that will help you debug issues like this is to use the built in inspector. You can add this to your root view and when you press F11 (or you can set it to whatever key you want) you can visually debug the view tree

view.on_event_stop(EventListener::KeyUp, move |e| {
    if let Event::KeyUp(e) = e {
        if e.key.logical_key == Key::Named(NamedKey::F11) {
            floem::action::inspect();
        }
    }
}