Update Action Icons

app/assets/javascripts/pipelines/components/graph/action_component.vue

@@ -1,6 +1,5 @@
 <script>
-  import getActionIcon from '../../../vue_shared/ci_action_icons';
-  import tooltip from '../../../vue_shared/directives/tooltip';
+    import tooltip from '../../../vue_shared/directives/tooltip';
   import icon from '../../../vue_shared/components/icon.vue';
 
   /**
@@ -39,12 +38,8 @@
     },
 
     computed: {
-      actionIconSvg() {
-        return getActionIcon(this.actionIcon);
-      },
-
       cssClass() {
-        return `js-${gl.text.dasherize(this.actionIcon)}`;
+        return `${gl.text.dasherize(this.actionIcon)} js-${gl.text.dasherize(this.actionIcon)}`;
       },
     },
   };
@@ -59,7 +54,6 @@
     :class="cssClass"
     data-container="body">
     <icon
-      name="stop"
-      size="16"/>
+      :name="actionIcon"/>
   </a>
 </template>

app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue

@@ -37,13 +37,6 @@
     directives: {
       tooltip,
     },
-
-    computed: {
-      actionIconSvg() {
-        alert('LA');
-        return getActionIcon(this.actionIcon);
-      },
-    },
   };
 </script>
 <template>
@@ -56,8 +49,7 @@
     class="ci-action-icon-wrapper js-ci-status-icon"
     data-container="body"
     aria-label="Job's action">
-    {{actionIcon}}
     <icon
-      name="retry"/>
+      :name="actionIcon"/>
   </a>
 </template>

app/assets/javascripts/vue_shared/components/icon.vue

@@ -40,7 +40,7 @@
       },
       fullCssClass() {
         let classString = '' || this.cssClass;
-        // if (this.size) classString += `s${this.size}`
+        if (this.size) classString += `s${this.size}`
         return classString;
       },
     },

app/assets/stylesheets/pages/pipelines.scss

@@ -734,6 +734,15 @@ button.mini-pipeline-graph-dropdown-toggle {
       &:focus svg {
         fill: $gl-text-color;
       }
+
+      &.icon-action-retry,
+      &.icon-action-play {
+        svg {
+          width: calc($ci-action-icon-size-6);
+          height: calc($ci-action-icon-size-6);
+          left: 8px;
+        }
+      }
     }
 
     // link to the build

lib/gitlab/ci/status/build/cancelable.rb

@@ -8,7 +8,7 @@ module Gitlab
           end
 
           def action_icon
-            'icon_action_cancel'
+            'cancel'
           end
 
           def action_path

lib/gitlab/ci/status/build/failed_allowed.rb

@@ -8,7 +8,7 @@ module Gitlab
           end
 
           def icon
-            'icon_status_warning'
+            'warning'
           end
 
           def group

lib/gitlab/ci/status/build/play.rb

@@ -12,7 +12,7 @@ module Gitlab
           end
 
           def action_icon
-            'icon_action_play'
+            'play'
           end
 
           def action_title

lib/gitlab/ci/status/build/retryable.rb

@@ -8,7 +8,7 @@ module Gitlab
           end
 
           def action_icon
-            'icon_action_retry'
+            'retry'
           end
 
           def action_title

lib/gitlab/ci/status/build/stop.rb

@@ -12,7 +12,7 @@ module Gitlab
           end
 
           def action_icon
-            'icon_action_stop'
+            'stop'
           end
 
           def action_title

spec/javascripts/pipelines/graph/dropdown_action_component_spec.js

@@ -11,7 +11,7 @@ describe('action component', () => {
         tooltipText: 'bar',
         link: 'foo',
         actionMethod: 'post',
-        actionIcon: 'icon_action_cancel',
+        actionIcon: 'cancel',
       },
     }).$mount();