Adwaita Icons Look Ugly or are Missing

[mt190502]

Hello, i installed this applet. It's very beautiful. But there are some problems.

1. Can't resize menu by holding meta + right click
2. Wrong sidebar icons. (only breeze theme works fine) Example:

Adwaita:

Flat Remix (light version is the same) :

Papirus (light version is the same) :

Breeze:

[Zren]

• https://github.com/Zren/plasma-applet-tiledmenu/blob/master/Theming.md#icons
• https://github.com/Zren/plasma-applet-tiledmenu/blob/master/package/contents/ui/SidebarFavouritesView.qml#L84

Adwaita is the default Gnome icon theme. Awaita is a light theme, with dark icons. It's also pre-rendered as .png, but I'm not sure if KIconLoader uses the pngs.

• /usr/share/icons/Adwaita/scalable/status/folder-open-symbolic.svg
• /usr/share/icons/Adwaita/16x16/status/folder-open-symbolic.symbolic.png
• https://github.com/GNOME/adwaita-icon-theme/blob/master/Adwaita/scalable/status/folder-open-symbolic.svg?short_path=49db816

<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
    <g fill="#2e3436">
        <path d="m 3 1 c -1.644531 0 -3 1.355469 -3 3 v 8 c 0 1.644531 1.355469 3 3 3 h 8.882812 c 0.832032 0 1.578126 -0.402344 2.054688 -0.9375 c 0.472656 -0.53125 0.738281 -1.167969 0.910156 -1.800781 l 0.972656 -2.609375 c 0.390626 -1.449219 -0.09375 -2.652344 -0.820312 -3.167969 c -0.484375 -0.34375 -0.714844 -0.292969 -1 -0.324219 v -1.160156 c 0 -0.855469 -0.558594 -1.589844 -1.09375 -1.828125 c -0.53125 -0.238281 -1.011719 -0.167969 -1.011719 -0.167969 l 0.105469 -0.003906 h -3.585938 l -1.707031 -1.707031 c -0.1875 -0.1875 -0.441406 -0.292969 -0.707031 -0.292969 z m 0 2 h 2.585938 l 1.707031 1.707031 c 0.1875 0.1875 0.441406 0.292969 0.707031 0.292969 h 4 c 0.035156 0 0.070312 -0.003906 0.105469 -0.007812 c 0 0 0.019531 0.019531 -0.011719 0.003906 c -0.035156 -0.011719 -0.09375 -0.25 -0.09375 0.003906 v 2 c 0 0.550781 0.449219 1 1 1 c 1 0 1.046875 0.703125 0.886719 1.128906 l -0.972657 2.609375 c -0.117187 0.4375 -0.296874 0.800781 -0.472656 0.996094 c -0.175781 0.199219 -0.285156 0.265625 -0.558594 0.265625 h -8.882812 c -0.570312 0 -1 -0.429688 -1 -1 v -8 c 0 -0.570312 0.46875 -0.792969 1 -1 z m 0 0"/>
        <path d="m 7 6 l 0.042969 0.003906 c -0.914063 -0.042968 -1.75 0.390625 -2.195313 0.96875 c -0.710937 1.222656 -1.15625 2.277344 -1.800781 3.71875 c -0.171875 0.523438 0.117187 1.089844 0.640625 1.261719 c 0.527344 0.171875 1.09375 -0.117187 1.261719 -0.640625 c 0.488281 -1.011719 0.921875 -1.816406 1.339843 -2.808594 c 0.210938 -0.503906 0.703126 -0.492187 0.898438 -0.503906 h 5.8125 c 0.550781 0 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m 0 0"/>
    </g>
</svg>

Awaita also doesn't implement the KDE Color Scheme feature which Breeze uses. KIconLoader can generate a CSS Stylesheet for SVG icons if it finds <style type="text/css" id="current-color-scheme"></style> in the SVG.

• /usr/share/icons/breeze/places/16/folder-open.svg
• https://github.com/KDE/breeze-icons/blob/master/icons/places/16/folder-open.svg?short_path=2291678

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <defs id="defs3051">
    <style type="text/css" id="current-color-scheme">
      .ColorScheme-Text {
        color:#232629;
      }
      </style>
  </defs>
 <path style="fill:currentColor"
       d="m 2,2 0,12 12,0 0,-10 -5,0 -2,-2 L 7,2 7,2 Z M 7,6 13,6 13,13 3,13 3,8 5,8 Z"
       class="ColorScheme-Text"
       />
</svg>

I thought the Papirus icon theme should implement the Color Scheme feature.

• https://github.com/PapirusDevelopmentTeam/papirus-icon-theme#kde-colorscheme
• Full support kde color scheme for Papirus PapirusDevelopmentTeam/papirus-icon-theme#199

Does look like the raw SVG files on GitHub have the ColorScheme in them anymore.

Nor does the icons installed in the OpenSUSE papirus-icon-theme package seem to have the <style>` after install.

• https://github.com/PapirusDevelopmentTeam/papirus-icon-theme/blob/master/Papirus/symbolic/status/folder-open-symbolic.svg?short_path=d4bd3f8
• https://github.com/PapirusDevelopmentTeam/papirus-icon-theme/blob/master/Papirus-Dark/symbolic/status/folder-open-symbolic.svg?short_path=5421ef9

Perhaps you need to run a command to generate icons with the ColorScheme?

PapirusDevelopmentTeam/papirus-icon-theme#1858

Seems like they expect you to use a Plasma Style that overrides the Icon Theme to fix icons in the panel...?

[Zren]

So in ~/.local/share/plasma/desktoptheme/THEMENAME/ we need to add an icons/ folder if it doesn't exist.

Then according to:

• /usr/share/plasma/desktoptheme/default/icons/
• https://invent.kde.org/frameworks/plasma-framework/-/blob/master/src/declarativeimports/core/iconitem.cpp#L162-193

We need to make a folder.svg instead of folder-open-symbolic.svg. This is because IconItem.cpp trims off everything after the first - when looking up the icon in the Plasma Style. We then need to edit the svg to wrap a group <g id="folder-open-symbolic">...</g> around the paths.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" version="1.1">
	<style type="text/css" id="current-color-scheme">
		.ColorScheme-Text { color: #dfdfdf; }
	</style>
	<g id="folder-open-symbolic">
		<rect style="opacity:0" x="0" y="0" width="16" height="16"></rect>
		<path class="ColorScheme-Text" style="opacity:.35;fill:currentColor" d="M 2,1 C 2,1 1,1 1,2 V 5 C 1,4 2,4 2,4 H 7 L 9,6 H 14 C 14,6 15,6 15,7 V 4 C 15,3 14,3 14,3 H 9 L 7,1 Z"/>
		<path class="ColorScheme-Text" style="fill:currentColor" d="M 2,5 C 2,5 1,5 1,6 V 13 C 1,13 1,14 2,14 H 14 C 14,14 15,14 15,13 V 8 C 15,7 14,7 14,7 H 9 L 7,5 Z"/>
	</g>
	<g id="folder-documents-symbolic">
		<rect style="opacity:0" x="0" y="0" width="16" height="16"></rect>
		<path class="ColorScheme-Text" style="fill:currentColor" d="M 3,1 C 2.446,1 2,1.446 2,2 V 15 C 2,15.554 2.446,16 3,16 H 13 C 13.554,16 14,15.554 14,15 V 5 L 10,1 Z"/>
	</g>
	<g id="folder-download-symbolic">
		<rect style="opacity:0" x="0" y="0" width="16" height="16"></rect>
		<path class="ColorScheme-Text" style="fill:currentColor" d="M 10,0 V 6 H 12.5 L 8,13 3.5,6 H 6 V 0 Z M 2,14 H 14 V 16 H 2 Z"/>
	</g>
	<g id="folder-music-symbolic">
		<rect style="opacity:0" x="0" y="0" width="16" height="16"></rect>
		<path class="ColorScheme-Text" style="fill:currentColor" d="M 5,1 C 5,1 5,1 5,2 V 9.19 C 4.68,9.07 4.36,9 4,9 2.34,9 1,10.34 1,12 1,13.66 2.34,15 4,15 5.66,15 7,13.66 7,12 V 5 H 13 V 9.19 C 12.68,9.07 12.36,9 12,9 10.34,9 9,10.34 9,12 9,13.66 10.34,15 12,15 13.66,15 15,13.66 15,12 V 1 C 15,1 15,1 14,1 Z"/>
	</g>
	<g id="folder-pictures-symbolic">
		<rect style="opacity:0" x="0" y="0" width="16" height="16"></rect>
		<path class="ColorScheme-Text" style="fill:currentColor" d="M 2,2 C 1,2 1,3 1,3 V 13 C 1,14 2,14 2,14 H 14 C 14,14 15,14 15,13 V 3 C 15,2 14,2 14,2 Z M 5.5,6.56 8.81,10.31 10.94,8.25 13,10.31 V 12 H 3 V 9.5 Z"/>
	</g>
	<g id="folder-videos-symbolic">
		<rect style="opacity:0" x="0" y="0" width="16" height="16"></rect>
		<path class="ColorScheme-Text" style="fill:currentColor" d="M 2,3 H 11 C 12,3 12,4 12,4 V 12 C 12,13 11,13 11,13 H 2 C 2,13 1,13 1,12 V 4 C 1,4 1,3 2,3 Z M 16,4 V 12 L 11,8 Z"/>
	</g>
</svg>

It's not perfect though. It seems I need to create an invisible 16x16 rectangle so that the icons aren't stretched? Edit: I've added invisible 16x16 rectangles so that the icons keep their shape. I did not update the screenshot.

Here's what Paypirus looked like before (below) and what it should look like after restarting Plasma (above) with a icons/folder.svg in my current Plasma Style. I'm currently testing the "above" with:

plasmawindowed com.github.zren.tiledmenu

[Zren]

By creating a icons/system.svg, we can fix the power icon. Also, since we don't bother setting the logout, hibernate, etc icons in the system.svg, it no longer uses the desktoptheme/default/icons/system.svg override icons, and instead uses the icons/Papirus/ icons.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" version="1.1">
	<style type="text/css" id="current-color-scheme">
		.ColorScheme-Text { color: #dfdfdf; }
	</style>
	<g id="system-shutdown-symbolic">
		<rect style="opacity:0" x="0" y="0" width="16" height="16"></rect>
		<path class="ColorScheme-Text" style="fill:currentColor" d="M 8,1 C 8.554,1 9,1.446 9,2 V 7 C 9,7.554 8.554,8 8,8 7.446,8 7,7.554 7,7 V 2 C 7,1.446 7.446,1 8,1 Z"/>
		<path class="ColorScheme-Text" style="fill:currentColor" d="M 11,3 C 10.448,3 10,3.4477 10,4 10,4.2839 10.102,4.5767 10.329,4.748 11.358,5.525 11.998,6.7108 12,8 12,10.209 10.209,12 8,12 5.7909,12 4,10.209 4,8 4.0024,6.7105 4.644,5.5253 5.6719,4.7471 5.8981,4.5759 5.9994,4.2833 6,4 6,3.4477 5.5523,3 5,3 4.7151,3 4.4724,3.1511 4.2539,3.334 2.8611,4.4998 2.0063,6.1837 2,8 2,11.314 4.6863,14 8,14 11.314,14 14,11.314 14,8 13.996,6.1678 13.137,4.4602 11.714,3.2998 11.504,3.1282 11.267,3 11,3 Z"/>
	</g>
</svg>

[SmartFinn]

The icons with -symbolic suffix don't support KDE colorscheme in Papirus icon theme. I didn't know that the icons are using in KDE, usually these icons for GTK-based app only. It may change in the future, but it's require to mix CSS classes from KDE colorscheme, and from GTK for the same elements. Even Breeze icons don't support it.