Replace icons in environment item vue component

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

@@ -458,6 +458,14 @@ export default {
 
       return 'chevron-right';
     },
+
+    deployIconName() {
+      if (this.model.isDeployBoardVisible) {
+        return 'chevron-down';
+      }
+
+      return 'chevron-right';
+    },
   },
 
   methods: {
@@ -491,23 +499,14 @@ export default {
       >
         {{ s__("Environments|Environment") }}
       </div>
-      <span
+
+      <icon
         v-if="model.hasDeployBoard"
+        :name="deployIconName"
         class="deploy-board-icon"
-        @click="toggleDeployBoard">
-
-        <i
-          v-show="!model.isDeployBoardVisible"
-          class="fa fa-caret-right"
-          aria-hidden="true">
-        </i>
-
-        <i
-          v-show="model.isDeployBoardVisible"
-          class="fa fa-caret-down"
-          aria-hidden="true">
-        </i>
-      </span>
+        @click="toggleDeployBoard"
+      />
+
       <span
         v-if="!model.isFolder"
         class="environment-name table-mobile-content">

spec/javascripts/environments/environments_app_spec.js

@@ -113,9 +113,7 @@ describe('Environment', () => {
       describe('deploy boards', () => {
         it('should render arrow to open deploy boards', (done) => {
           setTimeout(() => {
-            expect(
-              component.$el.querySelector('.deploy-board-icon i.fa-caret-right'),
-            ).toBeDefined();
+            expect(component.$el.querySelector('.deploy-board-icon.ic-chevron-right')).not.toBeNull();
             done();
           }, 0);
         });