Update external link icon in merge request widget

app/assets/javascripts/vue_merge_request_widget/components/deployment.vue

 <script>
+import Icon from '~/vue_shared/components/icon.vue';
 import timeagoMixin from '../../vue_shared/mixins/timeago';
 import tooltip from '../../vue_shared/directives/tooltip';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
@@ -14,6 +15,7 @@ export default {
     LoadingButton,
     MemoryUsage,
     StatusIcon,
+    Icon,
   },
   directives: {
     tooltip,
@@ -110,11 +112,10 @@ export default {
               class="deploy-link js-deploy-url"
             >
               {{ deployment.external_url_formatted }}
-              <i
-                class="fa fa-external-link"
-                aria-hidden="true"
-              >
-              </i>
+              <icon
+                :size="16"
+                name="external-link"
+              />
             </a>
           </template>
           <span

app/assets/stylesheets/pages/merge_requests.scss

@@ -737,6 +737,10 @@
   > *:not(:last-child) {
     margin-right: .3em;
   }
+
+  svg {
+    vertical-align: text-top;
+  }
 }
 
 .deploy-link {

changelogs/unreleased/update-external-link-icon-in-merge-request-widget.yml

+---
+title: Update external link icon in merge request widget
+merge_request: 20154
+author: George Tsiolis
+type: changed