Update issue edit button to gl-button

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/40438

app/assets/javascripts/issue_show/components/title.vue

 <script>
 /* eslint-disable vue/no-v-html */
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import animateMixin from '../mixins/animate';
 import eventHub from '../event_hub';
-import tooltip from '../../vue_shared/directives/tooltip';
-import { spriteIcon } from '../../lib/utils/common_utils';
 
 export default {
+  components: {
+    GlButton,
+  },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [animateMixin],
   props: {
@@ -41,11 +43,6 @@ export default {
       titleEl: document.querySelector('title'),
     };
   },
-  computed: {
-    pencilIcon() {
-      return spriteIcon('pencil', 'link-highlight');
-    },
-  },
   watch: {
     titleHtml() {
       this.setPageTitle();
@@ -76,17 +73,13 @@ export default {
       dir="auto"
       v-html="titleHtml"
     ></h2>
-    <button
+    <gl-button
       v-if="showInlineEditButton && canUpdate"
-      v-tooltip
-      type="button"
-      class="btn btn-default btn-edit btn-svg js-issuable-edit
-      qa-edit-button"
+      v-gl-tooltip.bottom
+      icon="pencil"
+      class="btn-edit js-issuable-edit qa-edit-button"
       title="Edit title and description"
-      data-placement="bottom"
-      data-container="body"
       @click="edit"
-      v-html="pencilIcon"
-    ></button>
+    />
   </div>
 </template>

app/assets/stylesheets/pages/issuable.scss

@@ -50,6 +50,7 @@
 
   .title-container {
     display: flex;
+    align-items: flex-start;
   }
 
   .title {
@@ -65,7 +66,6 @@
 
   .btn-edit {
     margin-left: auto;
-    height: $gl-padding * 2;
   }
 
   .emoji-block {

changelogs/unreleased/229313-update-issue-edit-button.yml

+---
+title: Update issue edit button to gl-button
+merge_request: 40438
+author:
+type: changed