1 files changed, 9 insertions, 2 deletions
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
index ea507017caa..9cf8638f3cb 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
@@ -1,5 +1,8 @@
 <script>
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
+import {
+  GlDeprecatedSkeletonLoading as GlSkeletonLoading,
+  GlSafeHtmlDirective as SafeHtml,
+} from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 import { forEach, escape } from 'lodash';
@@ -13,6 +16,9 @@ export default {
   components: {
     GlSkeletonLoading,
   },
+  directives: {
+    SafeHtml,
+  },
   props: {
     content: {
       type: String,
@@ -103,6 +109,7 @@ export default {
       }
     },
   },
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji', 'use'] },
 };
 </script>
 
@@ -111,8 +118,8 @@ export default {
     <gl-skeleton-loading v-if="isLoading" />
     <div
       v-else
+      v-safe-html:[$options.safeHtmlConfig]="previewContent"
       class="md gl-ml-auto gl-mr-auto"
-      v-html="previewContent /* eslint-disable-line vue/no-v-html */"
     ></div>
   </div>
 </template>