xdg_icons returns black icons rather than properly colored

[PureTryOut]

My system theme is set to KDE's breeze-icons, the dark version. When I try to use for example open-menu-symbolic (or any other) I get a black version of the icon, even though opening the file locally it's white instead. The icon resolves to /usr/share/icons/breeze-dark/actions/24/go-home.svg, maybe it being a SVG has something to do with it? I see no way to override the color I want but honestly I'd just like the color of the theme itself.

[PureTryOut]

Note that the same thing happens with the example application that comes with the package.

The image on the left is the edit-copy icon opened directly from the system icon theme in a different application showing the icon is in fact supposed to be white, and not black which the example application is showing.

I've uploaded the icon here, even in GitHub it shows correctly.

CC @jpnurmi I guess, it seems you're the author of this package?

[jpnurmi]

@PureTryOut Try loading /usr/share/icons/breeze-dark/actions/24/go-home.svg directly with SvgPicture.file to see how it behaves?

Perhaps flutter_svg cannot handle the current color scheme defined in the SVG?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <defs id="defs3051">
    <style type="text/css" id="current-color-scheme">.ColorScheme-Text { color: #fcfcfc; } </style>
  </defs>
  <g transform="translate(1,1)">
    <path style="fill:currentColor;fill-opacity:1;stroke:none" d="m11 3l-.707031.707031-7.292969 7.292969.707031.707031.292969-.292969v7.585938h1 5 3 5v-1-6.585938l.292969.292969.707031-.707031-3-3v-3h-3l-1.292969-1.292969-.707031-.707031m0 1.414063l6 5.999999v7.585938h-4v-5h-3-1v5h-4v-7.585938l6-5.999999" class="ColorScheme-Text"/>
  </g>
</svg>

One could probably specify SvgTheme.currentColor but not sure how to make it use the correct color i.e. #fcfcfc as it might not be able to parse or understand the style definition.

SvgPicture.file(
  File('/usr/share/icons/breeze-dark/actions/24/go-home.svg'),
  theme: SvgTheme(currentColor: Colors.red), // IconTheme.of(context).color?
)

[PureTryOut]

Using SvgPicture.file directly and overwriting the theme with SvgTheme works indeed. Just as my approach in #473, which is the easiest workaround for now.
I'm guessing this is a limitation of flutter_svg then?

[PureTryOut]

Looked into this a bit, yes it's a limitation of flutter_svg.

I noticed while loading an icon flutter: unhandled element <style/>; Picture key: Svg loader gets printed to the console. That is printed here which gets called when it encounters a SVG element it doesn't know. The ones it knows are specified at https://github.com/flutter/packages/blob/main/packages/vector_graphics_compiler/lib/src/svg/parser.dart#L43. As you can see, it doesn't list style. That made me find this issue in the original package, which seemed very familiar to me. And lo and behold, I did find that issue earlier.

I don't see myself implementing anything of this any time soon, so I'll have to do with a workaround like #473 for the time being.

Otherwise it seems https://pub.dev/packages/jovial_svg is an alternative that does support the <style> tag. Maybe it's worth considering switching to it?