update to allow for multipath, replace download

resources/frontend_client/app/query_builder/download_icon.react.js

-'use strict';
-
-var DownloadIcon = React.createClass({
-	getDefaultProps: function() {
-	    return {
-	    	width: '32',
-			height: '32',
-			className: 'Icon-download',
-			id: 'download',
-			fill: 'currentcolor'
-	    };
-  	},
-
-	render: function() {
-		return (
-			<svg className={this.props.className} id={this.props.id} viewBox="0 0 32 32" fill={this.props.fill} width={this.props.width} height={this.props.height}>
-	            <path d="M17,16.5 L17,8 L15,8 L15,16.5 L11,16.5 L9.93247919,16.5 L10.6158894,17.3200922 L15.6158894,23.3200922 L16,23.781025 L16.3841106,23.3200922 L21.3841106,17.3200922 L22.0675208,16.5 L21,16.5 L17,16.5 L17,16.5 Z"></path>
-	            <path d="M16,31 L16,31 C24.2842712,31 31,24.2842712 31,16 C31,7.71572875 24.2842712,1 16,1 C7.71572875,1 1,7.71572875 1,16 C1,24.2842712 7.71572875,31 16,31 L16,31 Z M16,32 L16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 L16,32 Z"></path>
-			</svg>
-		);
-	}
-});

resources/frontend_client/app/query_builder/header.react.js

 'use strict';
-/*global setTimeout, clearTimeout, Saver, ActionButton, Popover, DownloadIcon, QueryModeToggle, AddToDashboard*/
+/*global setTimeout, clearTimeout, Saver, ActionButton, Popover, Icon, QueryModeToggle, AddToDashboard*/
 
 var cx = React.addons.classSet,
     ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
@@ -171,11 +171,11 @@ var QueryHeader = React.createClass({
         if (this.props.downloadLink) {
             downloadButton = (
                 <a className="mx1" href={this.props.downloadLink} title="Download this data" target="_blank">
-                    <DownloadIcon>
+                    <Icon name='download'>
                         <Popover>
                             <span>Download data</span>
                         </Popover>
-                    </DownloadIcon>
+                    </Icon>
                 </a>
             );
         }

resources/frontend_client/app/query_builder/icon.react.js

@@ -5,6 +5,10 @@ var Icon = React.createClass({
     iconPaths: {
         check: 'M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z ',
         close: 'M4 8 L8 4 L16 12 L24 4 L28 8 L20 16 L28 24 L24 28 L16 20 L8 28 L4 24 L12 16 z ',
+        download: [
+            'M17,16.5 L17,8 L15,8 L15,16.5 L11,16.5 L9.93247919,16.5 L10.6158894,17.3200922 L15.6158894,23.3200922 L16,23.781025 L16.3841106,23.3200922 L21.3841106,17.3200922 L22.0675208,16.5 L21,16.5 L17,16.5 L17,16.5 Z',
+            'M16,31 L16,31 C24.2842712,31 31,24.2842712 31,16 C31,7.71572875 24.2842712,1 16,1 C7.71572875,1 1,7.71572875 1,16 C1,24.2842712 7.71572875,31 16,31 L16,31 Z M16,32 L16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 L16,32 Z'
+        ],
         expand: 'M16 4 L28 4 L28 16 L24 12 L20 16 L16 12 L20 8z M4 16 L8 20 L12 16 L16 20 L12 24 L16 28 L4 28z ',
     },
     getDefaultProps: function () {
@@ -15,9 +19,22 @@ var Icon = React.createClass({
        };
     },
     render: function () {
+        var iconPath = this.iconPaths[this.props.name],
+            path;
+
+        // handle multi path icons which appear as non strings
+        if(typeof(iconPath) != 'string') {
+            // create a path for each path present
+            path = iconPath.map(function (path) {
+               return (<path d={path} /> );
+            });
+        } else {
+            path = (<path d={path} />);
+        }
+
         return (
             <svg viewBox="0 0 32 32" {... this.props} className={'Icon Icon-' + this.props.name}>
-                <path d={this.iconPaths[this.props.name]}/>
+                {path}
             </svg>
         );
     }