From efa424bd7a7a13a64189311b6bfc4bd3bd3e27f6 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Mon, 30 Jan 2017 13:04:31 -0500
Subject: [PATCH]  Cleanup icons and fix RTL for preset categories

---
 modules/ui/preset_list.js | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/modules/ui/preset_list.js b/modules/ui/preset_list.js
index ee8275b99..bf2141e5f 100644
--- a/modules/ui/preset_list.js
+++ b/modules/ui/preset_list.js
@@ -159,7 +159,8 @@ export function uiPresetList(context) {
             var wrap = selection.append('div')
                 .attr('class', 'preset-list-button-wrap category col12');
 
-            wrap.append('button')
+            var button = wrap
+                .append('button')
                 .attr('class', 'preset-list-button')
                 .classed('expanded', false)
                 .call(uiPresetIcon()
@@ -167,17 +168,24 @@ export function uiPresetList(context) {
                     .preset(preset))
                 .on('click', function() {
                     var isExpanded = d3.select(this).classed('expanded');
-                    var triangle = isExpanded ? '▶ ' :  '▼ ';
-                    d3.select(this).classed('expanded', !isExpanded);
-                    d3.select(this).selectAll('.label').text(triangle + preset.name());
+                    var iconName = isExpanded ?
+                        (textDirection === 'rtl' ? '#icon-backward' : '#icon-forward') : '#icon-down';
+                    d3.select(this)
+                        .classed('expanded', !isExpanded);
+                    d3.select(this).selectAll('div.label svg.icon use')
+                        .attr('href', iconName);
                     item.choose();
-                })
-                .append('div')
-                .attr('class', 'label')
-                .text(function() {
-                  return '▶ ' + preset.name();
                 });
 
+            var label = button
+                .append('div')
+                .attr('class', 'label');
+
+            label
+                .call(svgIcon((textDirection === 'rtl' ? '#icon-backward' : '#icon-forward'), 'inline'))
+                .append('span')
+                .text(function() { return preset.name(); });
+
             box = selection.append('div')
                 .attr('class', 'subgrid col12')
                 .style('max-height', '0px')
@@ -190,6 +198,7 @@ export function uiPresetList(context) {
                 .attr('class', 'preset-list fillL3 cf fl');
         }
 
+
         item.choose = function() {
             if (!box || !sublist) return;