1 files changed, 6 insertions, 3 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
index 01e0b91bd4a..7827c79cd31 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
@@ -1,6 +1,5 @@
 <script>
-/* eslint-disable vue/no-v-html */
-import { GlButton, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
 import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
 import { helpPagePath } from '~/helpers/help_page_helper';
 
@@ -11,6 +10,9 @@ export default {
     GlSprintf,
     GlLink,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   props: {
     mr: {
       type: Object,
@@ -21,6 +23,7 @@ export default {
     return { emptyStateSVG };
   },
   ciHelpPage: helpPagePath('/ci/quick_start/index.html'),
+  safeHtmlConfig: { ADD_TAGS: ['use'] },
 };
 </script>
 
@@ -30,7 +33,7 @@ export default {
       <div
         class="artwork col-md-5 order-md-last col-12 text-center d-flex justify-content-center align-items-center"
       >
-        <span v-html="emptyStateSVG"></span>
+        <span v-safe-html:[$options.safeHtmlConfig]="emptyStateSVG"></span>
       </div>
       <div class="text col-md-7 order-md-first col-12">
         <p class="highlight">