Updated the description template FA icon to use GlIcon close

Updated the dropdowns.scss to remove absolute styles

app/assets/javascripts/issue_show/components/fields/description_template.vue

 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
 import $ from 'jquery';
+import { GlIcon } from '@gitlab/ui';
 import IssuableTemplateSelectors from '../../../templates/issuable_template_selectors';
 
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     formState: {
       type: Object,
@@ -61,14 +65,14 @@ export default {
       <i aria-hidden="true" class="fa fa-chevron-down"> </i>
     </button>
     <div class="dropdown-menu dropdown-select">
-      <div class="dropdown-title">
-        Choose a template
+      <div class="dropdown-title gl-display-flex gl-justify-content-center">
+        <span class="gl-ml-auto">Choose a template</span>
         <button
-          class="dropdown-title-button dropdown-menu-close"
+          class="dropdown-title-button dropdown-menu-close gl-ml-auto"
           :aria-label="__('Close')"
           type="button"
         >
-          <i aria-hidden="true" class="fa fa-times dropdown-menu-close-icon"> </i>
+          <gl-icon name="close" class="dropdown-menu-close-icon" :aria-hidden="true" />
         </button>
       </div>
       <div class="dropdown-input">
@@ -79,12 +83,11 @@ export default {
           autocomplete="off"
         />
         <i aria-hidden="true" class="fa fa-search dropdown-input-search"> </i>
-        <i
-          role="button"
+        <gl-icon
+          name="close"
+          class="dropdown-input-clear js-dropdown-input-clear"
           :aria-label="__('Clear templates search input')"
-          class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
-        >
-        </i>
+        />
       </div>
       <div class="dropdown-content"></div>
       <div class="dropdown-footer">

app/assets/stylesheets/framework/dropdowns.scss

@@ -596,8 +596,6 @@
 }
 
 .dropdown-title-button {
-  position: absolute;
-  top: 0;
   padding: 0;
   color: $dropdown-title-btn-color;
   border: 0;
@@ -609,17 +607,6 @@
   }
 }
 
-.dropdown-menu-close {
-  top: $gl-padding-6;
-  right: $gl-padding-8;
-  width: 20px;
-  height: 20px;
-}
-
-.dropdown-menu-close-icon {
-  vertical-align: middle;
-}
-
 .dropdown-menu-back {
   left: 10px;
   top: $gl-padding-8;
@@ -632,6 +619,7 @@
 
   .fa,
   .input-icon,
+  .dropdown-input-clear,
   .dropdown-input-search {
     position: absolute;
     top: $gl-padding-8;
@@ -682,13 +670,15 @@
     border-color: $blue-300;
     box-shadow: 0 0 4px $dropdown-input-focus-shadow;
 
-    ~ .fa {
+    ~ .fa,
+    ~ .dropdown-input-clear {
       color: $gray-700;
     }
   }
 
   &:hover {
-    ~ .fa {
+    ~ .fa,
+    ~ .dropdown-input-clear {
       color: $gray-700;
     }
   }

changelogs/unreleased/224534-replace-fa-times-with-gitlab-svg-close-icon-dropdowns.yml

+---
+title: Replace fa-times with GitLab SVG close icon in dropdowns
+merge_request: 40585
+author:
+type: performance