Use custom plugin icon titles where given

src/components/genericComponents/tabIcon.vue

@@ -8,7 +8,7 @@
   >
     <slot></slot>
     <div class="tabtitle">
-      {{ title }}
+      {{ computedTitle }}
     </div>
   </a>
 </template>
@@ -22,6 +22,11 @@ export default {
       type: String,
       required: true
     },
+    title: {
+      type: String,
+      required: false,
+      default: undefined
+    },
     currentTab: {
       type: String,
       required: true
@@ -35,15 +40,19 @@ export default {
   },
 
   computed: {
-    title: function() {
+    computedTitle: function() {
-      // Get the last section of a fully qualified name
+      if (this.title !== undefined) {
-      var topName = this.id.split(".").pop();
+        return this.title;
-      // Make first character uppercase, then add the rest of the string
+      } else {
-      return topName.charAt(0).toUpperCase() + topName.slice(1);
+        // Get the last section of a fully qualified name
+        var topName = this.id.split(".").pop();
+        // Make first character uppercase, then add the rest of the string
+        return topName.charAt(0).toUpperCase() + topName.slice(1);
+      }
     },
 
     tooltipOptions: function() {
-      return `pos: right; title: ${this.title}; delay: 500`;
+      return `pos: right; title: ${this.computedTitle}; delay: 500`;
     },
 
     classObject: function() {

src/components/panelLeft.vue

@@ -48,6 +48,7 @@
         v-for="plugin in pluginsGuiList"
         :id="plugin.id"
         :key="plugin.id"
+        :title="plugin.title"
         :require-connection="plugin.requiresConnection"
         :current-tab="currentTab"
         :click-callback="updatePlugins"