diff --git a/addon/components/notification-message.js b/addon/components/notification-message.js
index d398c4eb..e00969d0 100644
--- a/addon/components/notification-message.js
+++ b/addon/components/notification-message.js
@@ -1,6 +1,6 @@
 /* eslint-disable ember/no-classic-components, ember/no-computed-properties-in-native-classes */
 import Component from '@ember/component';
-import { htmlSafe } from '@ember/template';
+import { htmlSafe, isHTMLSafe } from '@ember/template';
 import { action, computed, set } from '@ember/object';
 import { inject as service } from '@ember/service';
 
@@ -15,6 +15,17 @@ export default class NotificationMessage extends Component {
 
   paused = false;
 
+  @computed('notification.{htmlContent,message}')
+  get message() {
+    const { htmlContent, message } = this.notification;
+
+    if (isHTMLSafe(message) || !htmlContent) {
+      return message;
+    }
+
+    return htmlSafe(message);
+  }
+
   @computed('notification.dismiss')
   get dismissClass() {
     return !this.notification.dismiss ? 'c-notification--in' : '';
diff --git a/addon/templates/components/notification-message.hbs b/addon/templates/components/notification-message.hbs
index e5f7a36a..c7d4371a 100644
--- a/addon/templates/components/notification-message.hbs
+++ b/addon/templates/components/notification-message.hbs
@@ -23,11 +23,7 @@
     {{/if}}
   </div>
   <div class="c-notification__content" {{on "click" this.handleOnClick}}>
-    {{#if @notification.htmlContent}}
-      {{{@notification.message}}}
-    {{else}}
-      {{@notification.message}}
-    {{/if}}
+    {{this.message}}
     <div
       class="c-notification__close"
       {{on "click" this.removeNotification}}