Replace fa-calendar icon with GitLab SVG

- Replaces the Fontawesome calendar icon
with the GitLab calendar SVG

app/assets/javascripts/issues_list/components/issuable.vue

@@ -351,7 +351,7 @@ export default {
             :class="{ cred: isOverdue }"
             :title="__('Due date')"
           >
-            <i class="fa fa-calendar"></i>
+            <gl-icon name="calendar" />
             {{ dueDateWords }}
           </span>
 

app/assets/stylesheets/fontawesome_custom.scss

@@ -109,10 +109,6 @@
   content: '\f110';
 }
 
-.fa-calendar::before {
-  content: '\f073';
-}
-
 .fa-angle-double-right::before {
   content: '\f101';
 }

app/views/projects/artifacts/_artifact.html.haml

@@ -30,7 +30,7 @@
     .table-mobile-header{ role: 'rowheader' }= _('Creation date')
     .table-mobile-content
       %p.finished-at
-        = icon("calendar")
+        = sprite_icon("calendar")
         %span= time_ago_with_tooltip(artifact.created_at)
 
   .table-section.section-20
@@ -38,7 +38,7 @@
     .table-mobile-content
       - if artifact.expire_at
         %p.finished-at
-          = icon("calendar")
+          = sprite_icon("calendar")
           %span= time_ago_with_tooltip(artifact.expire_at)
 
   .table-section.section-10

app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml

@@ -75,7 +75,7 @@
 
     - if generic_commit_status.finished_at
       %p.finished-at
-        = icon("calendar")
+        = sprite_icon("calendar")
         %span= time_ago_with_tooltip(generic_commit_status.finished_at)
 
   %td.coverage

app/views/projects/issues/_issue.html.haml

@@ -35,7 +35,7 @@
           - if issue.due_date
             %span.issuable-due-date.d-none.d-sm-inline-block.has-tooltip{ class: "#{'cred' if issue.overdue?}", title: _('Due date') }
                
-              = icon('calendar')
+              = sprite_icon('calendar')
               = issue.due_date.to_s(:medium)
           - if issue.labels.any?
              

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

@@ -32,7 +32,8 @@
 
     .block.due_date
       .sidebar-collapsed-icon
-        = icon('calendar', 'aria-hidden': 'true')
+        %span{ 'aria-hidden': 'true' }
+          = sprite_icon('calendar')
         %span.collapsed-milestone-date
           - if milestone.start_date && milestone.due_date
             - if milestone.start_date.year == milestone.due_date.year

changelogs/unreleased/225952-replace-fa-calendar-icons-with-gitlab-svg-calendar-icon.yml

+---
+title: Replace fa-calendar icon with GitLab SVG
+merge_request: 45175
+author:
+type: changed

spec/frontend/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js

@@ -18,7 +18,7 @@ describe('collapsedCalendarIcon', () => {
   });
 
   it('should hide calendar icon if showIcon', () => {
-    expect(vm.$el.querySelector('.fa-calendar')).toBeNull();
+    expect(vm.$el.querySelector('[data-testid="calendar-icon"]')).toBeNull();
   });
 
   it('should render text', () => {