Replace fa-chevron-down in dropdown button

app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
   components: {
     GlLoadingIcon,
+    GlIcon,
   },
   props: {
     isDisabled: {
@@ -39,8 +40,10 @@ export default {
       <slot v-if="$slots.default"></slot>
       <span v-else class="dropdown-toggle-text"> {{ toggleText }} </span>
     </template>
-    <span v-show="!isLoading" class="dropdown-toggle-icon">
-      <i class="fa fa-chevron-down" aria-hidden="true" data-hidden="true"></i>
-    </span>
+    <gl-icon
+      v-show="!isLoading"
+      class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
+      name="chevron-down"
+    />
   </button>
 </template>

changelogs/unreleased/mw-replace-fa-chevron-down-dropdown-button.yml

+---
+title: Replace fa-chevron-down in dropdown button
+merge_request: 47758
+author:
+type: changed

spec/frontend/vue_shared/components/dropdown/dropdown_button_spec.js

@@ -60,10 +60,9 @@ describe('DropdownButtonComponent', () => {
     });
 
     it('renders dropdown button icon', () => {
-      const dropdownIconEl = vm.$el.querySelector('.dropdown-toggle-icon i.fa');
+      const dropdownIconEl = vm.$el.querySelector('[data-testid="chevron-down-icon"]');
 
       expect(dropdownIconEl).not.toBeNull();
-      expect(dropdownIconEl.classList.contains('fa-chevron-down')).toBe(true);
     });
 
     it('renders slot, if default slot exists', () => {