icon names refactor

packages/web/src/freetable/FreeTableColumnEditor.js

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
 import { ManagerInnerContainer } from '../datagrid/ManagerStyles';
+import { FontIcon } from '../icons';
 import keycodes from '../utility/keycodes';
 
 const Row = styled.div`
@@ -22,9 +23,9 @@ const Name = styled.div`
 const Buttons = styled.div`
   white-space: nowrap;
 `;
-const Icon = styled.span`
+const Icon = styled(FontIcon)`
   // margin-left: 5px;
-  position: relative; 
+  position: relative;
   top: 5px;
   &:hover {
     background-color: gray;
@@ -100,10 +101,10 @@ function ColumnManagerRow({ column, onEdit, onRemove, onUp, onDown }) {
     <Row onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
       <Name>{column.columnName}</Name>
       <Buttons>
-        <Icon className="mdi mdi-pencil" onClick={onEdit} />
-        <Icon className="mdi mdi-delete" onClick={onRemove} />
-        <Icon className="mdi mdi-arrow-up" onClick={onUp} />
-        <Icon className="mdi mdi-arrow-down" onClick={onDown} />
+        <Icon icon="icon edit" onClick={onEdit} />
+        <Icon icon="icon delete" onClick={onRemove} />
+        <Icon icon="icon arrow-up" onClick={onUp} />
+        <Icon icon="icon arrow-down" onClick={onDown} />
       </Buttons>
     </Row>
   );

packages/web/src/freetable/MacroDetail.js

@@ -63,14 +63,14 @@ function MacroHeader({ selectedMacro, setSelectedMacro, onExecute }) {
   return (
     <Container>
       <Header>
-        <FontIcon icon="mdi mdi-hammer-wrench" />
+        <FontIcon icon="img macro" />
         <HeaderText>{selectedMacro.title}</HeaderText>
       </Header>
       <Buttons>
-        <ToolbarButton icon="mdi mdi-play" onClick={onExecute} patchY={6}>
+        <ToolbarButton icon="icon run" onClick={onExecute} patchY={6}>
           Execute
         </ToolbarButton>
-        <ToolbarButton icon="mdi mdi-close" onClick={() => setSelectedMacro(null)} patchY={6}>
+        <ToolbarButton icon="icon close" onClick={() => setSelectedMacro(null)} patchY={6}>
           Close
         </ToolbarButton>
       </Buttons>

packages/web/src/freetable/useNewFreeTable.js

@@ -8,7 +8,7 @@ export default function useNewFreeTable() {
   return ({ title = undefined, ...props } = {}) =>
     openNewTab(setOpenedTabs, {
       title: title || 'Table',
-      icon: 'mdi mdi-table color-green-icon',
+      icon: 'img free-table',
       tabComponent: 'FreeTableTab',
       props,
     });