Improved zoom styling and fixed zoom in/out button styling.

src/components/Toolbar.jsx

@@ -182,7 +182,7 @@ export default class Toolbar extends React.Component {
             target="_blank"
             className="maputnik-toolbar-logo"
           >
-            <img src={logoImage} alt="Maputnik" />
+            <span dangerouslySetInnerHTML={{__html: logoImage}} />
             <h1>
               <span className="maputnik-toolbar-name">{pkgJson.name}</span>
               <span className="maputnik-toolbar-version">v{pkgJson.version}</span>

src/components/map/OpenLayersMap.jsx

@@ -11,6 +11,7 @@ import {Map, View, Proj, Overlay} from 'ol';
 
 import {toLonLat} from 'ol/proj';
 import {toStringHDMS} from 'ol/coordinate';
+import {mdiMagnify} from '@mdi/js';
 
 
 function renderCoords (coords) {
@@ -158,7 +159,17 @@ export default class OpenLayersMap extends React.Component {
         />
       </div>
       <div className="maputnik-ol-zoom">
-        Zoom level: {this.state.zoom}
+        <svg
+          style={{
+            width: "14px",
+            height: "14px",
+            verticalAlign: "middle",
+          }}
+          viewBox="0 0 24 24"
+        >
+          <title>Zoom level</title>
+          <path fill="currentColor" d={mdiMagnify} />
+        </svg> {this.state.zoom}
       </div>
       {this.props.debugToolbox &&
         <div className="maputnik-ol-debug">