diff --git a/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue b/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
index b758ca20..b7182192 100644
--- a/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
+++ b/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
@@ -84,10 +84,11 @@
     },
 
 
-    created()
+    mounted()
     {
       this.id = 'datepicker-' + Strings.guid();
       this.updateOptions();
+      this.updateOutput();
     },
 
 
diff --git a/zero.Web.UI/App/components/pickers/iconPicker/iconpicker.vue b/zero.Web.UI/App/components/pickers/iconPicker/iconpicker.vue
index 1f6cfe7c..53b6c2ea 100644
--- a/zero.Web.UI/App/components/pickers/iconPicker/iconpicker.vue
+++ b/zero.Web.UI/App/components/pickers/iconPicker/iconpicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui-iconpicker" :class="{'is-disabled': disabled }">
+  <div v-if="output" class="ui-iconpicker" :class="{'is-disabled': disabled }">
     <input ref="input" type="hidden" :value="value" />
     <ui-select-button :icon="previewIcon" label="@ui.icon" :description="buttonDescription" @click="pick" :disabled="disabled" />
   </div>
@@ -29,6 +29,10 @@
         type: Boolean,
         default: false
       },
+      output: {
+        type: Boolean,
+        default: true
+      },
       options: {
         type: Object,
         default: () =>
diff --git a/zero.Web.UI/App/navigation.vue b/zero.Web.UI/App/navigation.vue
index de5c72be..d0993020 100644
--- a/zero.Web.UI/App/navigation.vue
+++ b/zero.Web.UI/App/navigation.vue
@@ -30,6 +30,11 @@
           </div>
         </transition>
       </template>
+      <!-- // TODO this is only for development -->
+      <button type="button" class="app-nav-item" @click="$refs.iconpicker.pick()">
+        <i class="app-nav-item-icon fth-droplet"></i> Icons
+      </button>
+      <icon-picker ref="iconpicker" :output="false" />
     </nav>
 
     <footer class="app-nav-account" v-if="user">     
@@ -56,6 +61,7 @@
   import { map as _map, find as _find } from 'underscore';
   import AuthApi from 'zero/services/auth.js'
   import MediaApi from 'zero/resources/media.js'
+  import IconPicker from 'zero/components/pickers/iconPicker/iconpicker';
 
   export default {
     name: 'app-navigation',
@@ -69,6 +75,9 @@
     }),
 
 
+    components: { IconPicker },
+
+
     computed: {
       currentApplication()
       {
@@ -161,7 +170,6 @@
           }
         });
       }
-
     }
   }
 
diff --git a/zero.Web.UI/Sass/Canvas/_navigation.scss b/zero.Web.UI/Sass/Canvas/_navigation.scss
index 1966b2ff..0f47b5a9 100644
--- a/zero.Web.UI/Sass/Canvas/_navigation.scss
+++ b/zero.Web.UI/Sass/Canvas/_navigation.scss
@@ -50,7 +50,7 @@
   }
 }
 
-a.app-nav-item
+a.app-nav-item, button.app-nav-item
 {
   display: grid;
   grid-template-columns: 30px 1fr auto;