Replace fa-tag(s) with GitLab SVG tag icon

- Fix tag/branch icon too close to text on Pipelines list page

app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import CollapsedAssignee from './collapsed_assignee.vue';
 
@@ -12,6 +12,7 @@ export default {
   },
   components: {
     CollapsedAssignee,
+    GlIcon,
   },
   props: {
     users: {
@@ -102,7 +103,7 @@ export default {
     :title="tooltipTitle"
     class="sidebar-collapsed-icon sidebar-collapsed-user"
   >
-    <i v-if="hasNoUsers" :aria-label="__('None')" class="fa fa-user"> </i>
+    <gl-icon v-if="hasNoUsers" name="user" :aria-label="__('None')" />
     <collapsed-assignee
       v-for="user in collapsedUsers"
       :key="user.id"

app/assets/javascripts/sidebar/components/participants/participants.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { __, n__, sprintf } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
@@ -10,6 +10,7 @@ export default {
   },
   components: {
     userAvatarImage,
+    GlIcon,
     GlLoadingIcon,
   },
   props: {
@@ -94,7 +95,7 @@ export default {
       data-boundary="viewport"
       @click="onClickCollapsedIcon"
     >
-      <i class="fa fa-users" aria-hidden="true"> </i>
+      <gl-icon name="users" />
       <gl-loading-icon v-if="loading" />
       <span v-else data-testid="collapsed-count"> {{ participantCount }} </span>
     </div>

app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
@@ -6,6 +7,9 @@ export default {
   directives: {
     tooltip,
   },
+  components: {
+    GlIcon,
+  },
   props: {
     containerClass: {
       type: String,
@@ -47,7 +51,7 @@ export default {
     data-boundary="viewport"
     @click="click"
   >
-    <i v-if="showIcon" class="fa fa-calendar" aria-hidden="true"> </i>
+    <gl-icon v-if="showIcon" name="calendar" />
     <slot>
       <span> {{ text }} </span>
     </slot>

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 
@@ -6,6 +7,9 @@ export default {
   directives: {
     tooltip,
   },
+  components: {
+    GlIcon,
+  },
   props: {
     labels: {
       type: Array,
@@ -49,7 +53,7 @@ export default {
     data-boundary="viewport"
     @click="handleClick"
   >
-    <i aria-hidden="true" data-hidden="true" class="fa fa-tags"> </i>
+    <gl-icon name="labels" />
     <span>{{ labels.length }}</span>
   </div>
 </template>

app/assets/stylesheets/pages/issuable.scss

@@ -234,8 +234,8 @@
 
   .title {
     color: $gl-text-color;
-    margin-bottom: $gl-padding-8;
-    line-height: 1;
+    margin-bottom: $gl-padding-4;
+    line-height: $gl-line-height-20;
 
     .avatar {
       margin-left: 0;

app/assets/stylesheets/pages/pipelines.scss

@@ -193,7 +193,6 @@
 
   .icon-container {
     display: inline-block;
-    width: 10px;
 
     &.commit-icon {
       width: 15px;

app/views/projects/tags/_tag.html.haml

@@ -2,8 +2,8 @@
 - release = @releases.find { |release| release.tag == tag.name }
 %li.flex-row.allow-wrap
   .row-main-content
-    = icon('tag')
-    = link_to tag.name, project_tag_path(@project, tag.name), class: 'item-title ref-name gl-ml-2'
+    = sprite_icon('tag')
+    = link_to tag.name, project_tag_path(@project, tag.name), class: 'item-title ref-name'
 
     - if protected_tag?(@project, tag)
       %span.badge.badge-success.gl-ml-2

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

@@ -10,7 +10,7 @@
   .nav-text
     .title
       %span.item-title.ref-name{ data: { qa_selector: 'tag_name_content' } }
-        = icon('tag')
+        = sprite_icon('tag')
         = @tag.name
       - if protected_tag?(@project, @tag)
         %span.badge.badge-success

app/views/shared/issuable/_sidebar.html.haml

@@ -40,7 +40,7 @@
                 = _('None')
           .title.hide-collapsed
             = _('Milestone')
-            = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
+            = loading_icon(css_class: 'gl-vertical-align-text-bottom hidden block-loading')
             - if can_edit_issuable
               = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right', data: { qa_selector: "edit_milestone_link", track_label: "right_sidebar", track_property: "milestone", track_event: "click_edit_button", track_value: "" }
           .value.hide-collapsed
@@ -65,12 +65,12 @@
         - if issuable_sidebar.has_key?(:due_date)
           .block.due_date
             .sidebar-collapsed-icon.has-tooltip{ data: { placement: 'left', container: 'body', html: 'true', boundary: 'viewport' }, title: sidebar_due_date_tooltip_label(issuable_sidebar[:due_date]) }
-              = icon('calendar', 'aria-hidden': 'true')
+              = sprite_icon('calendar')
               %span.js-due-date-sidebar-value
                 = issuable_sidebar[:due_date].try(:to_s, :medium) || _('None')
             .title.hide-collapsed
               = _('Due date')
-              = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
+              = loading_icon(css_class: 'gl-vertical-align-text-bottom hidden block-loading')
               - if can_edit_issuable
                 = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right', data: { track_label: "right_sidebar", track_property: "due_date", track_event: "click_edit_button", track_value: "" }
             .value.hide-collapsed
@@ -101,12 +101,12 @@
         - selected_labels = issuable_sidebar[:labels]
         .block.labels
           .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(selected_labels), data: { placement: "left", container: "body", boundary: 'viewport' } }
-            = icon('tags', 'aria-hidden': 'true')
+            = sprite_icon('labels')
             %span
               = selected_labels.size
           .title.hide-collapsed
             = _('Labels')
-            = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
+            = loading_icon(css_class: 'gl-vertical-align-text-bottom hidden block-loading')
             - if can_edit_issuable
               = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right', data: { qa_selector: "edit_labels_link", track_label: "right_sidebar", track_property: "labels", track_event: "click_edit_button", track_value: "" }
           .value.issuable-show-labels.dont-hide.hide-collapsed{ class: ("has-labels" if selected_labels.any?), data: { qa_selector: 'labels_block' } }
@@ -175,7 +175,7 @@
                 = dropdown_footer add_content_class: true do
                   %button.btn.btn-success.sidebar-move-issue-confirmation-button.js-move-issue-confirmation-button{ type: 'button', disabled: true }
                     = _('Move')
-                    = icon('spinner spin', class: 'sidebar-move-issue-confirmation-loading-icon')
+                    = loading_icon(css_class: 'gl-vertical-align-text-bottom sidebar-move-issue-confirmation-loading-icon')
 
       -# haml-lint:disable InlineJavaScript
       %script.js-sidebar-options{ type: "application/json" }= issuable_sidebar_options(issuable_sidebar).to_json.html_safe

app/views/shared/issuable/_sidebar_assignees.html.haml

@@ -4,7 +4,7 @@
 #js-vue-sidebar-assignees{ data: { field: issuable_type, signed_in: signed_in } }
   .title.hide-collapsed
     = _('Assignee')
-    .spinner.spinner-sm.align-bottom
+    = loading_icon(css_class: 'gl-vertical-align-text-bottom')
 
 .selectbox.hide-collapsed
   - if assignees.none?

app/views/users/show.html.haml

@@ -30,7 +30,7 @@
       - if current_user && current_user.admin?
         = link_to [:admin, @user], class: link_classes + 'btn btn-default', title: s_('UserProfile|View user in admin area'),
           data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-          = icon('users')
+          = sprite_icon('user')
 
     .profile-header{ class: [('with-no-profile-tabs' if profile_tabs.empty?)] }
       .avatar-holder

changelogs/unreleased/225926-replace-fa-tag-and-sidebar-icons.yml

+---
+title: Replace fa-tag(s) icons with GitLab SVG icons
+merge_request: 38979
+author:
+type: changed

ee/spec/features/epics/epic_labels_spec.rb

@@ -38,7 +38,7 @@ RSpec.describe 'Assign labels to an epic', :js do
   context 'when labels icon is clicked on collapsed sidebar' do
     before do
       page.within('aside.right-sidebar') do
-        find('.fa-tags').click
+        find('[data-testid="labels-icon"]').click
       end
       wait_for_requests
     end

spec/frontend/sidebar/assignees_spec.js

 import { mount } from '@vue/test-utils';
 import { trimText } from 'helpers/text_helper';
+import { GlIcon } from '@gitlab/ui';
 import Assignee from '~/sidebar/components/assignees/assignees.vue';
 import UsersMock from './mock_data';
 import UsersMockHelper from '../helpers/user_mock_data_helper';
@@ -29,10 +30,12 @@ describe('Assignee component', () => {
     it('displays no assignee icon when collapsed', () => {
       createWrapper();
       const collapsedChildren = findCollapsedChildren();
+      const userIcon = collapsedChildren.at(0).find(GlIcon);
 
       expect(collapsedChildren.length).toBe(1);
       expect(collapsedChildren.at(0).attributes('aria-label')).toBe('None');
-      expect(collapsedChildren.at(0).classes()).toContain('fa', 'fa-user');
+      expect(userIcon.exists()).toBe(true);
+      expect(userIcon.props('name')).toBe('user');
     });
 
     it('displays only "None" when no users are assigned and the issue is read-only', () => {

spec/frontend/sidebar/components/assignees/collapsed_assignee_list_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import UsersMockHelper from 'helpers/user_mock_data_helper';
 import CollapsedAssigneeList from '~/sidebar/components/assignees/collapsed_assignee_list.vue';
 import CollapsedAssignee from '~/sidebar/components/assignees/collapsed_assignee.vue';
@@ -20,7 +21,7 @@ describe('CollapsedAssigneeList component', () => {
     });
   }
 
-  const findNoUsersIcon = () => wrapper.find('i[aria-label=None]');
+  const findNoUsersIcon = () => wrapper.find(GlIcon);
   const findAvatarCounter = () => wrapper.find('.avatar-counter');
   const findAssignees = () => wrapper.findAll(CollapsedAssignee);
   const getTooltipTitle = () => wrapper.attributes('title');
@@ -38,6 +39,7 @@ describe('CollapsedAssigneeList component', () => {
 
     it('has no users', () => {
       expect(findNoUsersIcon().exists()).toBe(true);
+      expect(findNoUsersIcon().props('name')).toBe('user');
     });
   });
 

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js

@@ -87,7 +87,7 @@ describe('DropdownValueCollapsedComponent', () => {
     });
 
     it('renders tags icon element', () => {
-      expect(vm.$el.querySelector('.fa-tags')).not.toBeNull();
+      expect(vm.$el.querySelector('[data-testid="labels-icon"]')).not.toBeNull();
     });
 
     it('renders labels count', () => {