diff --git a/addon/services/notification-messages-service.js b/addon/services/notification-messages-service.js
index 04342f6d..0ab229c5 100644
--- a/addon/services/notification-messages-service.js
+++ b/addon/services/notification-messages-service.js
@@ -25,6 +25,7 @@ const NotificationMessagesService = ArrayProxy.extend({
     const notification = Ember.Object.create({
       message: options.message,
       type: options.type || 'info',
+      component: options.component,
       autoClear: (isEmpty(options.autoClear) ? getWithDefault(globals, 'autoClear', false) : options.autoClear),
       clearDuration: options.clearDuration || getWithDefault(globals, 'clearDuration', 5000),
       onClick: options.onClick,
diff --git a/addon/templates/components/notification-message.hbs b/addon/templates/components/notification-message.hbs
index 766796aa..9f0b5ff7 100644
--- a/addon/templates/components/notification-message.hbs
+++ b/addon/templates/components/notification-message.hbs
@@ -2,7 +2,9 @@
   <i class="{{notificationIcon}}"></i>
 </div>
 <div local-class="c-notification__content">
-  {{#if notification.htmlContent}}
+  {{#if notification.component}}
+    {{component notification.component message=notification.message}}
+  {{else if notification.htmlContent}}
     {{{notification.message}}}
   {{else}}
     {{notification.message}}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index b40b41ab..d8d8f85e 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -68,6 +68,25 @@ this.get('notifications').success('Saved successfully!');
 this.get('notifications').warning('You have unsaved changes');
     {{/themed-syntax}}
 
+    <h3>component</h3>
+    <p>A custom component may be used for rendering the message</p>
+
+    {{#themed-syntax lang="htmlbars" theme="dark" class="h5" withBuffers=false}}
+&lt;h1&gt;&#123;&#123;message.title&#125;&#125;&lt;/h1&gt;
+&lt;span class='count'&gt;&#123;&#123;message.count&#125;&#125;&lt;/span&gt;
+    {{/themed-syntax}}
+
+    {{#themed-syntax lang="js" theme="dark" class="h5" withBuffers=false}}
+let message = {
+  title: 'You have unread messages',
+  count: 3,
+};
+
+this.get('notifications').info(message, {
+  component: 'unread-message'
+});
+    {{/themed-syntax}}
+
     <h3>htmlContent</h3>
     <p>You can enable basic HTML markup for notification messages.</p>
     <p><b>Warning:</b> This introduces a potential security risk since the notification message will no longer be escaped by Ember.</p>