Update environment item action buttons icons

app/assets/javascripts/environments/components/environment_actions.vue

 <script>
-  import playIconSvg from 'icons/_icon_play.svg';
+  import Icon from '~/vue_shared/components/icon.vue';
   import eventHub from '../event_hub';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
@@ -8,9 +8,9 @@
     directives: {
       tooltip,
     },
-
     components: {
       loadingIcon,
+      Icon,
     },
     props: {
       actions: {
@@ -19,20 +19,16 @@
         default: () => [],
       },
     },
-
     data() {
       return {
-        playIconSvg,
         isLoading: false,
       };
     },
-
     computed: {
       title() {
         return 'Deploy to...';
       },
     },
-
     methods: {
       onClickAction(endpoint) {
         this.isLoading = true;
@@ -65,7 +61,10 @@
       :disabled="isLoading"
     >
       <span>
-        <span v-html="playIconSvg"></span>
+        <icon
+          name="play"
+          :size="12"
+        />
         <i
           class="fa fa-caret-down"
           aria-hidden="true"
@@ -86,7 +85,10 @@
           :class="{ disabled: isActionDisabled(action) }"
           :disabled="isActionDisabled(action)"
         >
-          <span v-html="playIconSvg"></span>
+          <icon
+            name="play"
+            :size="12"
+          />
           <span>
             {{ action.name }}
           </span>

app/assets/javascripts/environments/components/environment_external_url.vue

 <script>
+  import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
   import { s__ } from '../../locale';
@@ -6,6 +7,9 @@
   * Renders the external url link in environments table.
   */
   export default {
+    components: {
+      Icon,
+    },
     directives: {
       tooltip,
     },
@@ -15,7 +19,6 @@
         required: true,
       },
     },
-
     computed: {
       title() {
         return s__('Environments|Open');
@@ -34,10 +37,9 @@
     :aria-label="title"
     :href="externalUrl"
   >
-    <i
-      class="fa fa-external-link"
-      aria-hidden="true"
-    >
-    </i>
+    <icon
+      name="external-link"
+      :size="12"
+    />
   </a>
 </template>

app/assets/javascripts/environments/components/environment_monitoring.vue

@@ -2,20 +2,22 @@
   /**
   * Renders the Monitoring (Metrics) link in environments table.
   */
+  import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
   export default {
+    components: {
+      Icon,
+    },
     directives: {
       tooltip,
     },
-
     props: {
       monitoringUrl: {
         type: String,
         required: true,
       },
     },
-
     computed: {
       title() {
         return 'Monitoring';
@@ -33,10 +35,9 @@
     :title="title"
     :aria-label="title"
   >
-    <i
-      class="fa fa-area-chart"
-      aria-hidden="true"
-    >
-    </i>
+    <icon
+      name="chart"
+      :size="12"
+    />
   </a>
 </template>

app/assets/javascripts/environments/components/environment_rollback.vue

@@ -12,7 +12,6 @@
     components: {
       loadingIcon,
     },
-
     props: {
       retryUrl: {
         type: String,
@@ -24,13 +23,11 @@
         default: true,
       },
     },
-
     data() {
       return {
         isLoading: false,
       };
     },
-
     methods: {
       onClick() {
         this.isLoading = true;

app/assets/javascripts/environments/components/environment_terminal_button.vue

@@ -3,14 +3,16 @@
   * Renders a terminal button to open a web terminal.
   * Used in environments table.
   */
-  import terminalIconSvg from 'icons/_icon_terminal.svg';
+  import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
   export default {
+    components: {
+      Icon,
+    },
     directives: {
       tooltip,
     },
-
     props: {
       terminalPath: {
         type: String,
@@ -18,13 +20,6 @@
         default: '',
       },
     },
-
-    data() {
-      return {
-        terminalIconSvg,
-      };
-    },
-
     computed: {
       title() {
         return 'Terminal';
@@ -40,7 +35,10 @@
     :title="title"
     :aria-label="title"
     :href="terminalPath"
-    v-html="terminalIconSvg"
   >
+    <icon
+      name="terminal"
+      :size="12"
+    />
   </a>
 </template>

changelogs/unreleased/update-environment-item-action-buttons-icons.yml

+---
+title: Update environment item action buttons icons
+merge_request: 18632
+author: George Tsiolis
+type: changed