diff --git a/css/app.css b/css/app.css
index ae9bf59a0..408813aca 100644
--- a/css/app.css
+++ b/css/app.css
@@ -526,7 +526,7 @@ button.save.has-count .count::before {
}
.icon.pre-text {
- margin-right: 3px;
+ margin-right: 5px;
}
.icon.light {
@@ -3481,7 +3481,7 @@ img.tile-removing {
}
[dir='rtl'] .icon.pre-text {
- margin-left: 3px;
+ margin-left: 5px;
margin-right: 0;
}
diff --git a/modules/ui/entity_editor.js b/modules/ui/entity_editor.js
index 86072765a..e5fc7bb90 100644
--- a/modules/ui/entity_editor.js
+++ b/modules/ui/entity_editor.js
@@ -45,8 +45,7 @@ export function uiEntityEditor(context) {
enter
.append('button')
.attr('class', 'fl preset-reset preset-choose')
- .append('span')
- .html((textDirection === 'rtl') ? '►' : '◄');
+ .call(svgIcon((textDirection === 'rtl') ? '#icon-forward' : '#icon-backward'));
enter
.append('button')
diff --git a/modules/ui/preset_list.js b/modules/ui/preset_list.js
index d411b83ec..ee8275b99 100644
--- a/modules/ui/preset_list.js
+++ b/modules/ui/preset_list.js
@@ -43,8 +43,7 @@ export function uiPresetList(context) {
.append('button')
.attr('class', 'preset-choose')
.on('click', function() { dispatch.call('choose', this, currentPreset); })
- .append('span')
- .html((textDirection === 'rtl') ? '◄' : '►');
+ .call(svgIcon((textDirection === 'rtl') ? '#icon-backward' : '#icon-forward'));
} else {
messagewrap
.append('button')
diff --git a/modules/ui/save.js b/modules/ui/save.js
index b4da7c40e..c2071ab83 100644
--- a/modules/ui/save.js
+++ b/modules/ui/save.js
@@ -2,6 +2,7 @@ import * as d3 from 'd3';
import { d3keybinding } from '../lib/d3.keybinding.js';
import { t } from '../util/locale';
import { modeSave } from '../modes/index';
+import { svgIcon } from '../svg/index';
import { uiCmd } from './cmd';
import { uiTooltipHtml } from './tooltipHtml';
import { tooltip } from '../util/tooltip';
@@ -53,6 +54,7 @@ export function uiSave(context) {
.call(tooltipBehavior);
button
+ .call(svgIcon('#icon-save', 'pre-text'))
.append('span')
.attr('class', 'label')
.text(t('save.title'));
@@ -62,7 +64,7 @@ export function uiSave(context) {
.attr('class', 'count')
.text('0');
- var keybinding = d3keybinding('undo-redo')
+ var keybinding = d3keybinding('save')
.on(key, save, true);
d3.select(document)
diff --git a/svg/iD-sprite.json b/svg/iD-sprite.json
index 77bfbe314..05bbd4b46 100644
--- a/svg/iD-sprite.json
+++ b/svg/iD-sprite.json
@@ -8,9 +8,9 @@
"icon-undo": { "viewBox": "120 0 20 20" },
"icon-redo": { "viewBox": "140 0 20 20" },
"icon-apply": { "viewBox": "160 0 20 20" },
- "icon-save": { "viewBox": "180 0 20 20" },
- "icon-close": { "viewBox": "200 0 20 20" },
- "icon-inspect": { "viewBox": "220 0 20 20" },
+ "icon-close": { "viewBox": "180 0 20 20" },
+ "icon-save": { "viewBox": "200 0 20 20" },
+ "icon-load": { "viewBox": "220 0 20 20" },
"icon-plus": { "viewBox": "240 0 20 20" },
"icon-minus": { "viewBox": "260 0 20 20" },
"icon-search": { "viewBox": "280 0 20 20" },
@@ -21,10 +21,15 @@
"icon-out-link": { "viewBox": "380 0 20 20" },
"icon-bug": { "viewBox": "400 0 20 20" },
"icon-translate": { "viewBox": "420 0 20 20" },
+ "icon-inspect": { "viewBox": "440 0 20 20" },
"icon-help": { "viewBox": "460 0 20 20" },
"icon-data": { "viewBox": "480 0 20 20" },
"icon-full-screen": { "viewBox": "500 0 20 20" },
"icon-collapse-screen": { "viewBox": "520 0 20 20" },
+ "icon-backward": { "viewBox": "540 0 20 20" },
+ "icon-forward": { "viewBox": "560 0 20 20" },
+ "icon-up": { "viewBox": "580 0 20 20" },
+ "icon-down": { "viewBox": "600 0 20 20" },
"icon-alert-shape": { "fill": "currentColor" },
"icon-point-shape": { "fill": "currentColor" },
@@ -36,24 +41,31 @@
"icon-undo-shape": { "fill": "currentColor" },
"icon-redo-shape": { "fill": "currentColor" },
"icon-apply-shape": { "fill": "currentColor" },
- "icon-save-shape": { "fill": "currentColor" },
"icon-close-shape": { "fill": "currentColor" },
+ "icon-save-shape1": { "fill": "currentColor" },
+ "icon-save-shape2": { "fill": "currentColor" },
+ "icon-load-shape1": { "fill": "currentColor" },
+ "icon-load-shape2": { "fill": "currentColor" },
"icon-out-link-shape": { "fill": "currentColor" },
- "icon-inspect-shape": { "fill": "currentColor" },
"icon-plus-shape": { "fill": "currentColor" },
"icon-minus-shape": { "fill": "currentColor" },
"icon-search-shape": { "fill": "currentColor" },
"icon-layers-shape": { "fill": "currentColor" },
"icon-avatar-shape": { "fill": "currentColor" },
- "icon-nearby-shape": { "fill": "currentColor" },
+ "icon-nearby-shape1": { "fill": "currentColor" },
"icon-nearby-shape2": { "fill": "currentColor" },
"icon-geolocate-shape": { "fill": "currentColor" },
"icon-bug-shape": { "fill": "currentColor" },
"icon-translate-shape": { "fill": "currentColor" },
+ "icon-inspect-shape": { "fill": "currentColor" },
"icon-help-shape": { "fill": "currentColor" },
"icon-data-shape": { "fill": "currentColor" },
"icon-full-screen-shape": { "fill": "currentColor" },
"icon-collapse-screen-shape": { "fill": "currentColor" },
+ "icon-backward-shape": { "fill": "currentColor" },
+ "icon-forward-shape": { "fill": "currentColor" },
+ "icon-up-shape": { "fill": "currentColor" },
+ "icon-down-shape": { "fill": "currentColor" },
"highway-motorway": { "viewBox": "0 20 60 60" },
"highway-trunk": { "viewBox": "60 20 60 60" },
diff --git a/svg/iD-sprite.src.idraw b/svg/iD-sprite.src.idraw
index 5df5a398c..02461725d 100644
Binary files a/svg/iD-sprite.src.idraw and b/svg/iD-sprite.src.idraw differ
diff --git a/svg/iD-sprite.src.svg b/svg/iD-sprite.src.svg
index 7a3195512..dbed29ff0 100644
--- a/svg/iD-sprite.src.svg
+++ b/svg/iD-sprite.src.svg
@@ -131,7 +131,7 @@
-
+
@@ -1078,11 +1078,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
+
@@ -1090,6 +1102,9 @@
+
+
+
@@ -1097,7 +1112,7 @@
-
+
@@ -1106,7 +1121,7 @@
-
+
@@ -1115,34 +1130,36 @@
-
+
-
+
-
-
-
-
+
-
-
+
+
+
-
+
+
+
+
+
-
+
-
+
-
+