Support for keep-open-on-item-click and icon URLs on dropdown elements

platypush/backend/http/webapp/src/components/elements/Dropdown.vue

@@ -37,6 +37,11 @@ export default {
     title: {
       type: String,
     },
+
+    keepOpenOnItemClick: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {

platypush/backend/http/webapp/src/components/elements/DropdownItem.vue

@@ -1,20 +1,27 @@
 <template>
   <div class="row item" :class="itemClass" @click="clicked">
-    <div class="col-1 icon" v-if="iconClass">
-      <i :class="iconClass" />
+    <div class="col-1 icon" v-if="iconClass?.length || iconUrl?.length">
+      <Icon :class="iconClass" :url="iconUrl" />
     </div>
     <div class="text" :class="{'col-11': iconClass != null}" v-text="text" />
   </div>
 </template>
 
 <script>
+import Icon from "@/components/elements/Icon";
+
 export default {
   name: "DropdownItem",
+  components: {Icon},
   props: {
     iconClass: {
       type: String,
     },
 
+    iconUrl: {
+      type: String,
+    },
+
     text: {
       type: String,
     },
@@ -31,7 +38,11 @@ export default {
 
   methods: {
     clicked(event) {
+      if (this.disabled)
+        return false
+
       this.$parent.$emit('click', event)
+      if (!this.$parent.keepOpenOnItemClick)
         this.$parent.visible = false
     }
   }
@@ -55,7 +66,18 @@ export default {
   }
 
   .icon {
-    margin: 0 .5em;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  ::v-deep(.icon-container) {
+    width: 2em;
+    display: inline-flex;
+    align-items: center;
+
+    .icon {
+      margin: 0 1.5em 0 .5em;
+    }
   }
 }
 </style>