Use material-design-icons instead of material-icons

src/UiItems.js

@@ -56,7 +56,7 @@ export const isToggled = (state: State, props: ControlUI) => {
 export const toggle = (state: State, props: ControlUI) => {
   return (
     <ListItem>
-      {props.icon && <ListItemIcon><Icon>{props.icon}</Icon></ListItemIcon>}
+      {props.icon && <ListItemIcon><i className={`mdi mdi-${props.icon} mdi-24px`}></i></ListItemIcon>}
       <ListItemText primary={props.text} />
       <ListItemSecondaryAction>
         <Switch label={props.text}
@@ -83,7 +83,7 @@ export const dropDown = (state: State, props: ControlUI) => {
   const id = `${props.topic}.${Object.keys(props.options).reduce((v,r) => v + "." + r)}`;
   return (
     <ListItem>
-      {props.icon && <ListItemIcon><Icon>{props.icon}</Icon></ListItemIcon>}
+      {props.icon && <ListItemIcon><i className={`mdi mdi-${props.icon} mdi-24px`}></i></ListItemIcon>}
       <FormControl>
         <InputLabel htmlFor={id}>{props.text}</InputLabel>
         <Select value={state.values[props.topic].actual}
@@ -107,7 +107,7 @@ const onSliderChange = (state: State, props: ControlUI) =>
 
 export const slider = (state: State, props: ControlUI) => (
   <ListItem>
-    {props.icon && <ListItemIcon><Icon>{props.icon}</Icon></ListItemIcon>}
+    {props.icon && <ListItemIcon><i className={`mdi mdi-${props.icon} mdi-24px`}></i></ListItemIcon>}
     <ListItemText primary={props.text} />
     <ListItemSecondaryAction>
       <MuiThemeProvider>

src/appbar.js

@@ -3,7 +3,6 @@ import React from "react";
 import AppBar from "material-ui/AppBar";
 import Toolbar from 'material-ui/Toolbar';
 import { CircularProgress } from "material-ui/Progress";
-import Icon from 'material-ui/Icon';
 import IconButton from "material-ui/IconButton";
 import Menu, { MenuItem } from "material-ui/Menu";
 import Typography from 'material-ui/Typography';
@@ -17,8 +16,8 @@ const TopBarLayerSelector = (props: Object) => (
 const TopBarIndicatorMenu = (props: Object) => (
   <IconButton>
       {props.mqtt.connected ?
-        (<Icon style={{fontSize: 48}}>map</Icon>) :
-        (<Icon style={{fontSize: 48}}>phonelink_off</Icon>)}
+        (<i style={{fontSize: 48}} className="mdi mdi-map"></i>) :
+        (<i style={{fontSize: 48}} className="mdi mdi-lan-disconnect"></i>)}
   </IconButton>
 );
     

src/index.jsx

@@ -22,6 +22,9 @@ import IconButton from 'material-ui/IconButton';
 import Icon from 'material-ui/Icon';
 import AppBar from 'material-ui/AppBar';
 
+import '../node_modules/mdi/css/materialdesignicons.min.css';
+import '../css/styles.css';
+
 injectTapEventPlugin();
 
 document.title = `${Config.space.name} Map`;
@@ -64,7 +67,7 @@ class app extends React.Component<{state: State, classes: Object}> {
               <AppBar position="static">
                 <Toolbar>
                   <IconButton onClick={() => store.dispatch({type: Actions.CHANGE_UI})}>
-                    <Icon>keyboard_tab</Icon>
+                    <i className="mdi mdi-format-horizontal-align-right mdi-36px"></i>
                   </IconButton>
                   <Typography type="title">
                     {state.uiOpened == null ? "" : Config.controls[state.uiOpened].name}

src/map.js

@@ -22,17 +22,17 @@ const color = (iconColor, state: State) => {
     );
 }
 const iconHtml = (el, state: State) =>
-  "<i class=\"material-icons\" style=\""
+  "<i class=\"mdi mdi-" + el.icon + " mdi-36px\" style=\""
     + "color:" + color(el.iconColor, state) + ";\">"
-    + el.icon + "</i>"
+    + "</i>"
 
 const Markers = (props) => R.values(R.mapObjIndexed((el,key) => (
   <Marker position={c(el.position)} key={el.name}
     icon={Leaflet.divIcon(
       {
         html: iconHtml(el, props.state),
-        iconSize: Leaflet.point(32,32),
-        iconAnchor: Leaflet.point(16,16)
+        iconSize: Leaflet.point(36,36),
+        iconAnchor: Leaflet.point(18,18)
       })}
     onClick={(e) => store.dispatch({type: Actions.CHANGE_UI, payload: key, toggle: e.originalEvent.ctrlKey})}>
   </Marker>

src/mqtt.js

@@ -30,6 +30,7 @@ export default function connectMqtt(url: string, store: Store<*,*>) {
     store.dispatch({ type: null });
   });
   client.on("reconnect", () => {
+    client.end();
     store.dispatch({ type: null });
   });
 }