Allow to use SVG as icons

[sn3w]

Icons like Octicons provide SVG files for setting up icons and I'll love to see Waybar support having SVG set as icons.

[Moelf]

would love to be able to use things like https://heroicons.com/

[gutfacehubook]

Would love to use https://materialdesignicons.com/ in the waybar.

[hanckmann]

Personally I am not interested in additional icon themes, but svg icon support would be a very welcoming addition.

What is required to get svg support in waybar / systray. My issue is mainly the svg icons in the systray which do not show up.

[gutfacehubook]

As workarround i found it is able to load svg as background image:

// waybar config
...
"modules-left": [ "custom/logo", ... ]
...
"custom/logo": {
  "format": "    ",
  "tooltip": false,
  "on-click": "exec lain.sh &"
},
...

/* waybar style.css */
...
#custom-logo {
  background-image: url('/home/lain/.config/waybar/void.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; 
}
...

i know this is not the best way to do, but I wanted to share this temporary method I'm using for now.

[sandmuel]

As workarround i found it is able to load svg as background image:

// waybar config
...
"modules-left": [ "custom/logo", ... ]
...
"custom/logo": {
  "format": "    ",
  "tooltip": false,
  "on-click": "exec lain.sh &"
},
...

/* waybar style.css */
...
#custom-logo {
  background-image: url('/home/lain/.config/waybar/void.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; 
}
...

i know this is not the best way to do, but I wanted to share this temporary method I'm using for now.

Any way to do something like this on a module with multiple states? (such as the battery module)

[5p4r74cu5]

I would really like to be able to use svg icons, as doing something like using bitone/duotone icons is possible with fonts as far as I can tell, and it would make a massive difference in customisability.

[jlo62]

Would love to use https://materialdesignicons.com/ in the waybar.

workaround: Arch AUR has ttf-material-design-icons-git.

[Ifaen]

I assume your workaround of using it as a background image doesn't allow to change it's color right?

[jlo62]

allow to change it's color right?

Just change the color of the svg with, for example, a text editor or inkscape?

[Ifaen]

allow to change it's color right?

Just change the color of the svg with, for example, a text editor or inkscape? Sorry, I should've added that change the color of the svg dinamically, like with pywal or make the fill attribute usable to allow it being dinamic, but I suppose that's no easy task or limitations of gtk

[Lodobo]

@sfuentesojeda The correct way to do this would be to style the svg icon with CSS, just like you would in a browser.