1 files changed, 11 insertions, 15 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index 54227425d2a..19d8e1f49cf 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -1,7 +1,7 @@
 <script>
-  import getActionIcon from '../../../vue_shared/ci_action_icons';
   import tooltip from '../../../vue_shared/directives/tooltip';
-
+  import icon from '../../../vue_shared/components/icon.vue';
+  import { dasherize } from '../../../lib/utils/text_utility';
   /**
    * Renders either a cancel, retry or play icon pointing to the given path.
    * TODO: Remove UJS from here and use an async request instead.
@@ -29,17 +29,18 @@
       },
     },
 
+    components: {
+      icon,
+    },
+
     directives: {
       tooltip,
     },
 
     computed: {
-      actionIconSvg() {
-        return getActionIcon(this.actionIcon);
-      },
-
       cssClass() {
-        return `js-${gl.text.dasherize(this.actionIcon)}`;
+        const actionIconDash = dasherize(this.actionIcon);
+        return `${actionIconDash} js-icon-${actionIconDash}`;
       },
     },
   };
@@ -50,14 +51,9 @@
     :data-method="actionMethod"
     :title="tooltipText"
     :href="link"
-    class="ci-action-icon-container"
+    class="ci-action-icon-container ci-action-icon-wrapper"
+    :class="cssClass"
     data-container="body">
-
-    <i
-      class="ci-action-icon-wrapper"
-      :class="cssClass"
-      v-html="actionIconSvg"
-      aria-hidden="true"
-      />
+    <icon :name="actionIcon"/>
   </a>
 </template>