Update fa-question-circle icon in Vue and HAML

Update from `fa-question-circle` to GitLab SVG `information-o`.

app/assets/javascripts/confidential_merge_request/components/project_form_group.vue

 <script>
-import { GlLink, GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import { __ } from '../../locale';
 import { deprecatedCreateFlash as createFlash } from '../../flash';
 import Api from '../../api';
@@ -8,6 +8,7 @@ import Dropdown from './dropdown.vue';
 
 export default {
   components: {
+    GlIcon,
     GlLink,
     GlSprintf,
     Dropdown,
@@ -136,7 +137,7 @@ export default {
           target="_blank"
         >
           <span class="sr-only">{{ __('Read more') }}</span>
-          <i class="fa fa-question-circle" aria-hidden="true"></i>
+          <gl-icon name="question-o" />
         </gl-link>
       </p>
     </div>

app/assets/javascripts/jobs/components/sidebar_detail_row.vue

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlIcon, GlLink } from '@gitlab/ui';
 
 export default {
   name: 'SidebarDetailRow',
   components: {
+    GlIcon,
     GlLink,
   },
   props: {
@@ -37,7 +38,7 @@ export default {
     <span v-if="hasTitle" class="font-weight-bold">{{ title }}:</span> {{ value }}
     <span v-if="hasHelpURL" class="help-button float-right">
       <gl-link :href="helpUrl" target="_blank" rel="noopener noreferrer nofollow">
-        <i class="fa fa-question-circle" aria-hidden="true"></i>
+        <gl-icon name="question-o" />
       </gl-link>
     </span>
   </p>

app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     label: {
       type: String,
@@ -25,7 +30,7 @@ export default {
     <label v-if="label" class="label-bold">
       {{ label }}
       <a v-if="helpPath" :href="helpPath" target="_blank">
-        <i aria-hidden="true" data-hidden="true" class="fa fa-question-circle"> </i>
+        <gl-icon name="question-o" />
       </a>
     </label>
     <span v-if="helpText" class="form-text text-muted"> {{ helpText }} </span> <slot></slot>

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

@@ -106,7 +106,7 @@ export default {
     <div class="title hide-collapsed">
       {{ __('Time tracking') }}
       <div v-if="!showHelpState" class="help-button float-right" @click="toggleHelpState(true)">
-        <i class="fa fa-question-circle" aria-hidden="true"> </i>
+        <gl-icon name="question-o" />
       </div>
       <div
         v-if="showHelpState"

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

 <script>
-import { GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlSprintf } from '@gitlab/ui';
 import tooltip from '../../vue_shared/directives/tooltip';
 import { __ } from '../../locale';
 
@@ -9,6 +9,7 @@ export default {
     tooltipTitle: __('A user with write access to the source branch selected this option'),
   },
   components: {
+    GlIcon,
     GlSprintf,
   },
   directives: {
@@ -26,12 +27,11 @@ export default {
         </template>
       </gl-sprintf>
     </span>
-    <i
+    <gl-icon
       v-tooltip
       :title="$options.i18n.tooltipTitle"
       :aria-label="$options.i18n.tooltipTitle"
-      class="fa fa-question-circle"
-    >
-    </i>
+      name="question-o"
+    />
   </p>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import statusIcon from '../mr_widget_status_icon.vue';
@@ -9,6 +10,7 @@ export default {
     tooltip,
   },
   components: {
+    GlIcon,
     statusIcon,
   },
   props: {
@@ -50,7 +52,7 @@ export default {
       <span class="bold js-branch-text">
         <span class="capitalize"> {{ missingBranchName }} </span>
         {{ s__('mrWidget|branch does not exist.') }} {{ missingBranchNameMessage }}
-        <i v-tooltip :title="message" :aria-label="message" class="fa fa-question-circle"> </i>
+        <gl-icon v-tooltip :title="message" :aria-label="message" name="question-o" />
       </span>
     </div>
   </div>

app/assets/stylesheets/fontawesome_custom.scss

@@ -84,10 +84,6 @@
   color: $white;
 }
 
-.fa-question-circle::before {
-  content: '\f059';
-}
-
 .fa-chevron-down::before {
   content: '\f078';
 }

app/views/projects/_issuable_by_email.html.haml

@@ -37,9 +37,9 @@
           = render 'by_email_description'
         %p
           This is a private email address
-
-          %a{ href: 'https://docs.gitlab.com/ee/development/emails.html#email-namespace', target: "_blank", rel: "noopener" }
-            %i.fa.fa-question-circle{ 'aria-label': "Learn more about incoming email addresses" }
+          %span<
+            = link_to help_page_path('development/emails', anchor: 'email-namespace'), target: '_blank', rel: 'noopener', aria: { label: 'Learn more about incoming email addresses' } do
+              = sprite_icon('question-o')
 
           generated just for you.
 

app/views/projects/cycle_analytics/show.html.haml

@@ -40,19 +40,23 @@
               %li.stage-header.pl-5
                 %span.stage-name.font-weight-bold
                   {{ s__('ProjectLifecycle|Stage') }}
-                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The phase of the development lifecycle."), "aria-hidden" => "true" }
+                %span.has-tooltip{ "data-placement" => "top", title: _("The phase of the development lifecycle."), "aria-hidden" => "true" }
+                  = sprite_icon('question-o')
               %li.median-header
                 %span.stage-name.font-weight-bold
                   {{ __('Median') }}
-                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6."), "aria-hidden" => "true" }
+                %span.has-tooltip{ "data-placement" => "top", title: _("The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6."), "aria-hidden" => "true" }
+                  = sprite_icon('question-o')
               %li.event-header.pl-3
                 %span.stage-name.font-weight-bold
                   {{ currentStage ? __(currentStage.legend) : __('Related Issues') }}
-                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The collection of events added to the data gathered for that stage."), "aria-hidden" => "true" }
+                %span.has-tooltip{ "data-placement" => "top", title: _("The collection of events added to the data gathered for that stage."), "aria-hidden" => "true" }
+                  = sprite_icon('question-o')
               %li.total-time-header.pr-5.text-right
                 %span.stage-name.font-weight-bold
                   {{ __('Time') }}
-                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The time taken by each data entry gathered by that stage."), "aria-hidden" => "true" }
+                %span.has-tooltip{ "data-placement" => "top", title: _("The time taken by each data entry gathered by that stage."), "aria-hidden" => "true" }
+                  = sprite_icon('question-o')
         .stage-panel-body
           %nav.stage-nav
             %ul

doc/development/documentation/index.md

@@ -335,9 +335,9 @@ You can combine one or more of the following:
    = link_to 'Help page', help_page_path('user/permissions'), target: '_blank'
    ```
 
-1. **Linking to a circle icon.** Usually used in settings where a long
+1. **Using a question icon.** Usually used in settings where a long
    description cannot be used, like near checkboxes. You can basically use
-   any font awesome icon, but prefer the `question-circle`:
+   any GitLab SVG icon, but prefer the `question-o`:
 
    ```haml
    = link_to icon('question-circle'), help_page_path('user/permissions')

ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_secondary_geo_node.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
 
 export default {
   components: {
+    GlIcon,
     statusIcon,
   },
   directives: {
@@ -31,7 +33,7 @@ export default {
         rel="noopener noreferrer nofollow"
         data-container="body"
       >
-        <i class="fa fa-question-circle"></i>
+        <gl-icon name="question-o" />
       </a>
     </div>
   </div>

ee/spec/frontend/vue_mr_widget/ee_mr_widget_options_spec.js

@@ -958,7 +958,7 @@ describe('ee merge request widget options', () => {
       vm.mr.state = 'readyToMerge';
 
       vm.$nextTick(() => {
-        const tooltip = vm.$el.querySelector('.fa-question-circle');
+        const tooltip = vm.$el.querySelector('[data-testid="question-o-icon"]');
 
         expect(vm.$el.textContent).toContain('Deletes source branch');
         expect(tooltip.getAttribute('data-original-title')).toBe(

spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap

@@ -33,9 +33,9 @@ exports[`Confidential merge request project form group component renders empty s
           Read more
         </span>
          
-        <i
-          aria-hidden="true"
-          class="fa fa-question-circle"
+        <gl-icon-stub
+          name="question-o"
+          size="16"
         />
       </gl-link-stub>
     </p>
@@ -76,9 +76,9 @@ exports[`Confidential merge request project form group component renders fork dr
           Read more
         </span>
          
-        <i
-          aria-hidden="true"
-          class="fa fa-question-circle"
+        <gl-icon-stub
+          name="question-o"
+          size="16"
         />
       </gl-link-stub>
     </p>

spec/frontend/vue_mr_widget/mr_widget_options_spec.js

@@ -530,7 +530,7 @@ describe('mrWidgetOptions', () => {
         vm.mr.state = 'readyToMerge';
 
         vm.$nextTick(() => {
-          const tooltip = vm.$el.querySelector('.fa-question-circle');
+          const tooltip = vm.$el.querySelector('[data-testid="question-o-icon"]');
 
           expect(vm.$el.textContent).toContain('Deletes source branch');
           expect(tooltip.getAttribute('data-original-title')).toBe(