Refactor #5066

components/lib/metergroup/MeterGroup.d.ts

@@ -222,6 +222,19 @@ export interface MeterGroupSlots {
          */
         totalPercent: string;
     }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(scope: {
+        /**
+         * Current value of the component
+         */
+        value: MeterItemOptions;
+        /**
+         * Style class of the icon
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom start template.
      */

components/lib/metergroup/MeterGroup.vue

@@ -3,7 +3,10 @@
         <slot v-if="labelPosition === 'start'" name="label" :value="value" :totalPercent="totalPercentValue()">
             <ol :class="cx('labellist')" v-bind="ptm('labellist')">
                 <li v-for="(val, index) in value" :key="index + '_label'" :class="cx('labellistitem')" v-bind="ptm('labellistitem')">
-                    <span :class="cx('labellisttype')" :style="{ backgroundColor: val.color }" v-bind="ptm('labellisttype')" />
+                    <slot name="icon" :value="val" :class="cx('labelicon')">
+                        <i v-if="val.icon" :class="[val.icon, cx('labelicon')]" v-bind="ptm('labelicon')" />
+                        <span v-else :class="cx('labellisttype')" :style="{ backgroundColor: val.color }" v-bind="ptm('labellisttype')" />
+                    </slot>
                     <span :class="cx('label')" v-bind="ptm('label')">{{ val.label }} ({{ percentValue(val.value) }})</span>
                 </li>
             </ol>

components/lib/metergroup/style/MeterGroupStyle.js

@@ -26,12 +26,16 @@ const css = `
         list-style-type: none;
     }
 
-    .p-metergroup-label-list-horizontal {
+    .p-metergroup-vertical .p-metergroup-label-list {
+        align-items: start;
+    }
+
+    .p-metergroup-horizontal .p-metergroup-label-list-vertical {
         flex-direction: column;
     }
 
-    .p-metergroup-vertical .p-metergroup-label-list-vertical {
-        align-items: start;
+    .p-metergroup-vertical .p-metergroup-label-list-horizontal {
+        flex-direction: column;
     }
 
     .p-metergroup-label-list-item {
@@ -42,6 +46,12 @@ const css = `
     .p-metergroup-label-type {
         display: inline-block;
     }
+
+    .p-metergroup-label-icon {
+        width: 1rem;
+        height: 1rem;
+        margin-right: .5rem;
+    }
 }
 `;
 
@@ -65,6 +75,7 @@ const classes = {
         }
     ],
     labellistitem: 'p-metergroup-label-list-item',
+    labelicon: 'p-metergroup-label-icon',
     labellisttype: 'p-metergroup-label-type',
     label: 'p-metergroup-label'
 };