Replace icons in EnvironmentItem vue component

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

@@ -4,6 +4,7 @@ import _ from 'underscore';
 import tooltip from '~/vue_shared/directives/tooltip';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { humanize } from '~/lib/utils/text_utility';
+import Icon from '~/vue_shared/components/icon.vue';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
 import StopComponent from './environment_stop.vue';
@@ -24,6 +25,7 @@ export default {
   components: {
     UserAvatarLink,
     CommitComponent,
+    Icon,
     ActionsComponent,
     ExternalUrlComponent,
     StopComponent,
@@ -520,27 +522,24 @@ export default {
         role="button"
         @click="onClickFolder">
 
-        <span class="folder-icon">
-          <i
+        <icon
           v-show="model.isOpen"
-            class="fa fa-caret-down"
+          name="angle-down"
+          class="folder-icon"
           aria-hidden="true"
-          >
-          </i>
-          <i
+        />
+        <icon
           v-show="!model.isOpen"
-            class="fa fa-caret-right"
+          name="angle-right"
+          class="folder-icon"
           aria-hidden="true"
-          >
-          </i>
-        </span>
+        />
 
-        <span class="folder-icon">
-          <i
-            class="fa fa-folder"
-            aria-hidden="true">
-          </i>
-        </span>
+        <icon
+          name="folder"
+          class="folder-icon"
+          aria-hidden="true"
+        />
 
         <span>
           {{ model.folderName }}

app/assets/stylesheets/pages/environments.scss

@@ -90,6 +90,7 @@
       margin-right: 3px;
       color: $gl-text-color-secondary;
       display: inline-block;
+      vertical-align: text-top;
 
       .fa:nth-child(1) {
         margin-right: 3px;