1 files changed, 21 insertions, 42 deletions
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index 01cbe40f444..f7a61fbfcd4 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -1,12 +1,5 @@
 <script>
 import { mapGetters } from 'vuex';
-import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
-import emojiSmile from 'icons/_emoji_smile.svg';
-import emojiSmiley from 'icons/_emoji_smiley.svg';
-import editSvg from 'icons/_icon_pencil.svg';
-import resolveDiscussionSvg from 'icons/_icon_resolve_discussion.svg';
-import resolvedDiscussionSvg from 'icons/_icon_status_success_solid.svg';
-import ellipsisSvg from 'icons/_ellipsis_v.svg';
 import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
@@ -110,15 +103,6 @@ export default {
       return title;
     },
   },
-  created() {
-    this.emojiSmiling = emojiSmiling;
-    this.emojiSmile = emojiSmile;
-    this.emojiSmiley = emojiSmiley;
-    this.editSvg = editSvg;
-    this.ellipsisSvg = ellipsisSvg;
-    this.resolveDiscussionSvg = resolveDiscussionSvg;
-    this.resolvedDiscussionSvg = resolvedDiscussionSvg;
-  },
   methods: {
     onEdit() {
       this.$emit('handleEdit');
@@ -152,12 +136,7 @@ export default {
         class="line-resolve-btn note-action-button"
         @click="onResolve">
         <template v-if="!isResolving">
-          <div
-            v-if="isResolved"
-            v-html="resolvedDiscussionSvg"></div>
-          <div
-            v-else
-            v-html="resolveDiscussionSvg"></div>
+          <icon name="check-circle" />
         </template>
         <gl-loading-icon
           v-else
@@ -179,18 +158,18 @@ export default {
         title="Add reaction"
       >
         <gl-loading-icon inline/>
-        <span
-          class="link-highlight award-control-icon-neutral"
-          v-html="emojiSmiling">
-        </span>
-        <span
-          class="link-highlight award-control-icon-positive"
-          v-html="emojiSmiley">
-        </span>
-        <span
-          class="link-highlight award-control-icon-super-positive"
-          v-html="emojiSmile">
-        </span>
+        <icon
+          css-classes="link-highlight award-control-icon-neutral"
+          name="emoji_slightly_smiling_face"
+        />
+        <icon
+          css-classes="link-highlight award-control-icon-positive"
+          name="emoji_smiley"
+        />
+        <icon
+          css-classes="link-highlight award-control-icon-super-positive"
+          name="emoji_smiley"
+        />
       </a>
     </div>
     <div
@@ -204,10 +183,10 @@ export default {
         data-container="body"
         data-placement="bottom"
         @click="onEdit">
-        <span
-          class="link-highlight"
-          v-html="editSvg">
-        </span>
+        <icon
+          name="pencil"
+          css-classes="link-highlight"
+        />
       </button>
     </div>
     <div
@@ -240,10 +219,10 @@ export default {
         data-toggle="dropdown"
         data-container="body"
         data-placement="bottom">
-        <span
-          class="icon"
-          v-html="ellipsisSvg">
-        </span>
+        <icon
+          css-classes="icon"
+          name="ellipsis_v"
+        />
       </button>
       <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
         <li v-if="canReportAsAbuse">