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.