Improve scaling and vertical alignment of browse icons

Although we're using SVG icons because they are being added using
pseudo elements it's currently impossible to directly set a size for
them to scale to as https://stackoverflow.com/a/8993934 explains.

So instead we use a solution based on the alternate approach there
of setting the image as a background image, which can be scaled to
our preferred size and then aligned.

app/assets/stylesheets/common.scss

@@ -965,23 +965,29 @@ img.trace_image {
   .node::before,
   .way::before,
   .relation::before {
+    content: "";
     display: inline-block;
+    background-size: calc(1em * 1.25) auto;
+    background-position: left center;
+    background-repeat: no-repeat;
+    vertical-align: text-bottom;
     width: 25px;
+    height: calc(1em * 1.25);
     margin-left: -25px;
   }
 
   .node, .way, .relation {
     margin-left: 25px;
   }
 
-  .node::before     { content: image-url('browse/node.svg'); }
-  .way::before      { content: image-url('browse/way.svg'); }
-  .relation::before { content: image-url('browse/relation.svg'); }
+  .node::before     { background-image: image-url('browse/node.svg'); }
+  .way::before      { background-image: image-url('browse/way.svg'); }
+  .relation::before { background-image: image-url('browse/relation.svg'); }
 }
 
 @each $class, $item in $map-sidebar-icons {
   .browse-section #{$class}::before {
-    content: image-url('browse/#{map.get($item, "filename")}');
+    background-image: image-url('browse/#{map.get($item, "filename")}');
   }
 
   @if map.get($item, "invert") {