add property "icon" to Message.vue to display a custom icon

src/components/message/Message.vue

@@ -36,7 +36,11 @@ export default {
         life: {
             type: Number,
             default: 3000
-        }
+        },
+        icon: {
+            type: String,
+            default: null
+        },
     },
     timeout: null,
     data() {
@@ -62,7 +66,7 @@ export default {
             return 'p-message p-component p-message-' + this.severity;
         },
         iconClass() {
-            return ['p-message-icon pi', {
+            return ['p-message-icon pi', this.icon ? this.icon : {
                 'pi-info-circle': this.severity === 'info',
                 'pi-check': this.severity === 'success',
                 'pi-exclamation-triangle': this.severity === 'warn',

src/views/message/MessageDemo.vue

@@ -16,6 +16,9 @@
                 <Message severity="warn">Warning Message Content</Message>
                 <Message severity="error">Error Message Content</Message>
 
+                <h5>Custom Icon</h5>
+                <Message severity="info" icon="pi-send">Info Message Content</Message>
+
                 <h5>Dynamic</h5>
                 <Button label="Show" @click="addMessages()" />
                 <transition-group name="p-message" tag="div">

src/views/message/MessageDoc.vue

@@ -113,6 +113,12 @@ import InlineMessage from 'primevue/inlinemessage';
                         <td>number</td>
                         <td>3000</td>
                         <td>Delay in milliseconds to close the message automatically.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Display a custom icon for the message.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -516,4 +522,4 @@ button.p-button {
         }
     }
 }
-</script>
+</script>