Use preset icon for favorite buttons

css/80_app.css

@@ -472,8 +472,18 @@ button[disabled].action:hover {
     padding: 0 10px;
     min-width: 30px;
     white-space: nowrap;
+    display: flex;
 }
-.tool-group button .icon {
+.tool-group button.add-favorite {
+    padding-left: 0px;
+}
+.tool-group button.add-favorite .label {
+    padding-left: 0;
+}
+.narrow .tool-group button.add-favorite {
+    padding-right: 0;
+}
+.tool-group button > .icon {
     flex: 0 0 20px;
 }
 .tool-group button .label {
@@ -970,6 +980,10 @@ a.hide-toggle {
     height: 60px;
     text-align: center;
 }
+#bar .preset-icon-container {
+    width: 40px;
+    height: 40px;
+}
 
 .preset-icon-line {
     margin: auto;
@@ -1018,6 +1032,7 @@ a.hide-toggle {
 .preset-icon-frame {
     width: 100%;
     height:100%;
+    position: absolute;
 }
 .preset-icon-frame .icon{
     position: absolute;

modules/ui/modes.js

@@ -13,6 +13,7 @@ import {
 import { svgIcon } from '../svg';
 import { t } from '../util/locale';
 import { tooltip } from '../util/tooltip';
+import { uiPresetIcon } from './preset_icon';
 import { uiTooltipHtml } from './tooltipHtml';
 
 export function uiModes(context) {
@@ -110,7 +111,8 @@ export function uiModes(context) {
                     description: [t('operations.add.title'), t('presets.presets.' + preset.id + '.name'), t('geometry.' + d.geom)].join(' '),
                     key: '',
                     icon: icon,
-                    preset: preset
+                    preset: preset,
+                    geometry: d.geom
                 };
                 switch (d.geom) {
                     case 'point':
@@ -158,8 +160,16 @@ export function uiModes(context) {
 
             buttonsEnter
                 .each(function(d) {
-                    d3_select(this)
-                        .call(svgIcon(d.icon || '#iD-icon-' + d.button));
+                    if (d.preset) {
+                        d3_select(this)
+                            .call(uiPresetIcon()
+                                .geometry(d.geometry)
+                                .preset(d.preset)
+                            )
+                    } else {
+                        d3_select(this)
+                            .call(svgIcon(d.icon || '#iD-icon-' + d.button));
+                    }
                 });
 
             buttonsEnter

modules/ui/preset_favorite.js

@@ -14,10 +14,9 @@ export function uiPresetFavorite(preset, geom, context) {
 
 
     presetFavorite.button = function(selection) {
-        var data = (preset.icon) ? [0] : [];
 
         _button = selection.selectAll('.preset-favorite-button')
-            .data(data);
+            .data([0]);
 
         _button.exit().remove();