Replace fa-angle-right and fa-angle-left

- Update Vue components and
HAML templates

app/assets/javascripts/deploy_keys/components/app.vue

@@ -7,12 +7,14 @@ import eventHub from '../eventhub';
 import DeployKeysService from '../service';
 import DeployKeysStore from '../store';
 import KeysPanel from './keys_panel.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     KeysPanel,
     NavigationTabs,
     GlLoadingIcon,
+    Icon,
   },
   props: {
     endpoint: {
@@ -123,8 +125,8 @@ export default {
     />
     <template v-else-if="hasKeys">
       <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
-        <div class="fade-left"><i class="fa fa-angle-left" aria-hidden="true"> </i></div>
-        <div class="fade-right"><i class="fa fa-angle-right" aria-hidden="true"> </i></div>
+        <div class="fade-left"><icon name="chevron-lg-left" :size="12" /></div>
+        <div class="fade-right"><icon name="chevron-lg-right" :size="12" /></div>
 
         <navigation-tabs :tabs="tabs" scope="deployKeys" @onChangeTab="onChangeTab" />
       </div>

app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue

@@ -9,6 +9,7 @@ import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
 import NavigationControls from './nav_controls.vue';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin';
+import Icon from '~/vue_shared/components/icon.vue';
 import PipelinesFilteredSearch from './pipelines_filtered_search.vue';
 import { validateParams } from '../../utils';
 import { ANY_TRIGGER_AUTHOR, RAW_TEXT_WARNING, FILTER_TAG_IDENTIFIER } from '../../constants';
@@ -20,6 +21,7 @@ export default {
     NavigationTabs,
     NavigationControls,
     PipelinesFilteredSearch,
+    Icon,
   },
   mixins: [pipelinesMixin, CIPaginationMixin, glFeatureFlagsMixin()],
   props: {
@@ -298,8 +300,8 @@ export default {
       v-if="shouldRenderTabs || shouldRenderButtons"
       class="top-area scrolling-tabs-container inner-page-scroll-tabs"
     >
-      <div class="fade-left"><i class="fa fa-angle-left" aria-hidden="true"> </i></div>
-      <div class="fade-right"><i class="fa fa-angle-right" aria-hidden="true"> </i></div>
+      <div class="fade-left"><icon name="chevron-lg-left" :size="12" /></div>
+      <div class="fade-right"><icon name="chevron-lg-right" :size="12" /></div>
 
       <navigation-tabs
         v-if="shouldRenderTabs"

app/assets/stylesheets/framework/mixins.scss

@@ -137,7 +137,8 @@
     transition-duration: 0.3s;
   }
 
-  .fa {
+  .fa,
+  svg {
     position: relative;
     top: 5px;
     font-size: 18px;

app/assets/stylesheets/framework/secondary_navigation_elements.scss

@@ -313,7 +313,7 @@
     right: 0;
     text-align: right;
 
-    .fa {
+    svg {
       right: 5px;
     }
   }
@@ -323,7 +323,7 @@
     left: 0;
     text-align: left;
 
-    .fa {
+    svg {
       left: 5px;
     }
   }

app/views/admin/users/index.html.haml

@@ -2,9 +2,9 @@
 
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .fade-left
-    = icon('angle-left')
+    = sprite_icon('chevron-lg-left', size: 12)
   .fade-right
-    = icon('angle-right')
+    = sprite_icon('chevron-lg-right', size: 12)
   %ul.nav-links.nav.nav-tabs.scrolling-tabs
     = nav_link(html_options: { class: active_when(params[:filter].nil?) }) do
       = link_to admin_users_path do

app/views/dashboard/_projects_head.html.haml

@@ -12,8 +12,8 @@
       = link_to _("New project"), new_project_path, class: "btn btn-success"
 
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
-  .fade-left= icon('angle-left')
-  .fade-right= icon('angle-right')
+  .fade-left= sprite_icon('chevron-lg-left', size: 12)
+  .fade-right= sprite_icon('chevron-lg-right', size: 12)
   %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs{ class: ('border-0' if feature_project_list_filter_bar) }
     = nav_link(page: [dashboard_projects_path, root_path]) do
       = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do

app/views/groups/show.html.haml

@@ -19,8 +19,8 @@
   .groups-listing{ data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } }
     .top-area.group-nav-container.justify-content-between
       .scrolling-tabs-container.inner-page-scroll-tabs
-        .fade-left= icon('angle-left')
-        .fade-right= icon('angle-right')
+        .fade-left= sprite_icon('chevron-lg-left', size: 12)
+        .fade-right= sprite_icon('chevron-lg-right', size: 12)
         %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs
           %li.js-subgroups_and_projects-tab
             = link_to group_path, data: { target: 'div#subgroups_and_projects', action: 'subgroups_and_projects', toggle: 'tab'} do

app/views/projects/merge_requests/creations/_new_submit.html.haml

@@ -20,8 +20,8 @@
     .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
       .merge-request-tabs-container
         .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
-          .fade-left= icon('angle-left')
-          .fade-right= icon('angle-right')
+          .fade-left= sprite_icon('chevron-lg-left', size: 12)
+          .fade-right= sprite_icon('chevron-lg-right', size: 12)
           %ul.merge-request-tabs.nav.nav-tabs.nav-links.no-top.no-bottom.js-tabs-affix
             %li.commits-tab.new-tab
               = link_to url_for(safe_params), data: {target: 'div#commits', action: 'new', toggle: 'tabvue'} do

app/views/search/_category.html.haml

@@ -3,8 +3,8 @@
     = search_filter_link 'users', _("Users")
 
 .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
-  .fade-left= icon('angle-left')
-  .fade-right= icon('angle-right')
+  .fade-left= sprite_icon('chevron-lg-left', size: 12)
+  .fade-right= sprite_icon('chevron-lg-right', size: 12)
   %ul.nav-links.search-filter.scrolling-tabs.nav.nav-tabs
     - if @project
       - if project_search_tabs?(:blobs)

app/views/shared/_event_filter.html.haml

 - show_group_events = local_assigns.fetch(:show_group_events, false)
 
 .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller.flex-fill
-  .fade-left= icon('angle-left')
-  .fade-right= icon('angle-right')
+  .fade-left= sprite_icon('chevron-lg-left', size: 12)
+  .fade-right= sprite_icon('chevron-lg-right', size: 12)
   %ul.nav-links.event-filter.scrolling-tabs.nav.nav-tabs
     = event_filter_link EventFilter::ALL, _('All'), s_('EventFilterBy|Filter by all')
     - if event_filter_visible(:repository)

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

 .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
-  .fade-left= icon('angle-left')
-  .fade-right= icon('angle-right')
+  .fade-left= sprite_icon('chevron-lg-left', size: 12)
+  .fade-right= sprite_icon('chevron-lg-right', size: 12)
   %ul.nav-links.scrolling-tabs.js-milestone-tabs.nav.nav-tabs
     %li.nav-item
       = link_to '#tab-issues', class: 'nav-link active', data: { toggle: 'tab', show: '.tab-issues-buttons' } do

app/views/users/show.html.haml

@@ -89,8 +89,8 @@
 
     - unless profile_tabs.empty?
       .scrolling-tabs-container
-        .fade-left= icon('angle-left')
-        .fade-right= icon('angle-right')
+        .fade-left= sprite_icon('chevron-lg-left', size: 12)
+        .fade-right= sprite_icon('chevron-lg-right', size: 12)
         %ul.nav-links.user-profile-nav.scrolling-tabs.nav.nav-tabs
           - if profile_tab?(:overview)
             %li.js-overview-tab

ee/app/views/shared/credentials_inventory/index.html.haml

@@ -2,9 +2,9 @@
 
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .fade-left
-    = icon('angle-left')
+    = sprite_icon('chevron-lg-left', size: 12)
   .fade-right
-    = icon('angle-right')
+    = sprite_icon('chevron-lg-right', size: 12)
   %ul.nav-links.nav.nav-tabs.scrolling-tabs
     = nav_link(html_options: { class: active_when(show_personal_access_tokens?) }) do
       = link_to credentials_inventory_path(filter: 'personal_access_tokens') do