Add Icon to sidebar

src/components/ControlMap.js

@@ -3,6 +3,7 @@ import React from "react";
 import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet";
 import Leaflet from "leaflet";
 import _ from "lodash";
+import parseIconName from "utils/parseIconName";
 
 export type Point = [number, number];
 
@@ -44,10 +45,9 @@ export default class ControlMap extends React.Component<ControlMapProps> {
     return _.map(this.props.controls, this.renderMarker.bind(this));
   }
 
-  createLeafletIcon(iconRaw: string) {
-    const icon = iconRaw.split(" ").map(name => "mdi-".concat(name)).join(" ");
+  createLeafletIcon(icon: string) {
     return Leaflet.divIcon({
-      className: `mdi mdi-36px ${icon}`,
+      className: parseIconName(`${icon} 36px`),
       iconSize: Leaflet.point(36, 36),
       iconAnchor: Leaflet.point(18, 18)
     });

src/components/SideBar.js

@@ -8,6 +8,7 @@ import IconButton from "material-ui/IconButton";
 import AppBar from "material-ui/AppBar";
 import Toolbar from "material-ui/Toolbar";
 import List from "material-ui/List";
+import { renderIcon } from "utils/parseIconName";
 
 export type SideBarProps = {
   control: ?Control,
@@ -27,6 +28,9 @@ class SideBar extends React.Component<SideBarProps & Classes, SideBarState> {
     return {
       drawerPaper: {
         width: 320
+      },
+      flex: {
+        flex: 1
       }
     };
   }
@@ -45,12 +49,14 @@ class SideBar extends React.Component<SideBarProps & Classes, SideBarState> {
       >
         <AppBar position="static">
           <Toolbar>
-            <IconButton onClick={this.close.bind(this)}>
-              <i className="mdi mdi-format-horizontal-align-right mdi-36px"></i>
-            </IconButton>
-            <Typography type="title">
+            {this.props.control == null
+              || renderIcon(this.props.control.icon, "mdi-36px")}
+            <Typography type="title" className={this.props.classes.flex}>
               {this.props.control == null || this.props.control.name}
             </Typography>
+            <IconButton onClick={this.close.bind(this)}>
+              <i className="mdi mdi-close mdi-36px"></i>
+            </IconButton>
           </Toolbar>
         </AppBar>
         <List id="drawer_uiComponents">