Move arrow icon colored area from code to mask svg

This MR contains a bunch of small changes to how the arrow buttons are rendered.

The primary change is that instead of having a part of it that is defined in an svg file and a part that is defined in code, they are now entirely defined in svg files.
This is done by splitting the icon svg into a "mask" svg, the alpha channel of which is used as a mask and filled with the button color.
And an "overlay" one, which is drawn in its original colors on top of the colored area.

I initially intended to do this before the shadows and reflections were removed from the icons, so I intended to have four svg files.
However now that the up and down arrows are identical, I see no good reason for having separate files, instead of just rotating it in code.
Of course if that is the preferred solution, I would be fine with removing the rotation code, and using separate files.
This would allow changing these icons freely without any code changes.

Partial transparency is possible in both files, though I don't see any use for having partial transparency in the mask.

It would also be possible to have mask and overlay in the same file as different layers, but I think that would make it more confusing to use.

The final visual result does change slightly, but I don't think its all that much.
Before:

After:

Both of these images are scaled up without interpolation, so they should accurately reflect the visual changes.

Other smaller changes:

• Slightly change the path around to be at full pixel positions if possible
• Move the black line from code to the overlay file