From b6189f77c4ccc86e40c4d8b19b5da26a9220ad72 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 14 Apr 2020 08:31:55 +0100
Subject: [PATCH] Added icons to buttons.

---
 src/components/fields/_DataProperty.jsx | 9 +++++++--
 src/components/fields/_ZoomProperty.jsx | 9 +++++++--
 src/components/filter/FilterEditor.jsx  | 8 ++++++--
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/fields/_DataProperty.jsx b/src/components/fields/_DataProperty.jsx
index 37d7701c..f2f4e641 100644
--- a/src/components/fields/_DataProperty.jsx
+++ b/src/components/fields/_DataProperty.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
 
 import Button from '../Button'
 import SpecField from './SpecField'
@@ -299,7 +300,9 @@ export default class DataProperty extends React.Component {
             className="maputnik-add-stop"
             onClick={this.props.onAddStop.bind(this)}
           >
-            Add stop
+            <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
+              <path fill="currentColor" d={mdiTableRowPlusAfter} />
+            </svg> Add stop
           </Button>
         </>
       }
@@ -307,7 +310,9 @@ export default class DataProperty extends React.Component {
         className="maputnik-add-stop"
         onClick={this.props.onExpressionClick.bind(this)}
       >
-        Convert to expression
+        <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
+          <path fill="currentColor" d={mdiFunctionVariant} />
+        </svg> Convert to expression
       </Button>
     </div>
   }
diff --git a/src/components/fields/_ZoomProperty.jsx b/src/components/fields/_ZoomProperty.jsx
index 829d3567..98995f9b 100644
--- a/src/components/fields/_ZoomProperty.jsx
+++ b/src/components/fields/_ZoomProperty.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
 
 import Button from '../Button'
 import SpecField from './SpecField'
@@ -176,13 +177,17 @@ export default class ZoomProperty extends React.Component {
         className="maputnik-add-stop"
         onClick={this.props.onAddStop.bind(this)}
       >
-        Add stop
+        <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
+          <path fill="currentColor" d={mdiTableRowPlusAfter} />
+        </svg> Add stop
       </Button>
       <Button
         className="maputnik-add-stop"
         onClick={this.props.onExpressionClick.bind(this)}
       >
-        Convert to expression
+        <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
+          <path fill="currentColor" d={mdiFunctionVariant} />
+        </svg> Convert to expression
       </Button>
     </div>
   }
diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx
index b9951574..780d55ed 100644
--- a/src/components/filter/FilterEditor.jsx
+++ b/src/components/filter/FilterEditor.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { combiningFilterOps } from '../../libs/filterops.js'
+import {mdiTableRowPlusAfter} from '@mdi/js';
 
 import {latest, validate, migrate} from '@mapbox/mapbox-gl-style-spec'
 import DocLabel from '../fields/DocLabel'
@@ -261,8 +262,11 @@ export default class CombiningFilterEditor extends React.Component {
             <Button
               data-wd-key="layer-filter-button"
               className="maputnik-add-filter"
-              onClick={this.addFilterItem}>
-              Add filter
+              onClick={this.addFilterItem}
+            >
+              <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
+                <path fill="currentColor" d={mdiTableRowPlusAfter} />
+              </svg> Add filter
             </Button>
           </div>
           <div