Replace exclamation-triangle with GitLab SVG

In HAML

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

 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     user: {
       type: Object,
@@ -46,6 +50,6 @@ export default {
       class="avatar avatar-inline m-0"
       data-qa-selector="avatar_image"
     />
-    <i v-if="hasMergeIcon" aria-hidden="true" class="fa fa-exclamation-triangle merge-icon"></i>
+    <gl-icon v-if="hasMergeIcon" name="warning-solid" aria-hidden="true" class="merge-icon" />
   </span>
 </template>

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

@@ -112,11 +112,12 @@ export default {
     />
     <button v-if="hasMoreThanTwoAssignees" class="btn-link" type="button">
       <span class="avatar-counter sidebar-avatar-counter"> {{ sidebarAvatarCounter }} </span>
-      <i
+      <gl-icon
         v-if="isMergeRequest && !allAssigneesCanMerge"
+        name="warning-solid"
         aria-hidden="true"
-        class="fa fa-exclamation-triangle merge-icon"
-      ></i>
+        class="merge-icon"
+      />
     </button>
   </div>
 </template>

app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue

@@ -97,11 +97,12 @@ export default {
     <collapsed-reviewer v-for="user in collapsedUsers" :key="user.id" :user="user" />
     <button v-if="hasMoreThanTwoReviewers" class="btn-link" type="button">
       <span class="avatar-counter sidebar-avatar-counter"> {{ sidebarAvatarCounter }} </span>
-      <i
+      <gl-icon
         v-if="!allReviewersCanMerge"
+        name="warning-solid"
         aria-hidden="true"
-        class="fa fa-exclamation-triangle merge-icon"
-      ></i>
+        class="merge-icon"
+      />
     </button>
   </div>
 </template>

app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar.vue

 <script>
 // NOTE! For the first iteration, we are simply copying the implementation of Assignees
 // It will soon be overhauled in Issue https://gitlab.com/gitlab-org/gitlab/-/issues/233736
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     user: {
       type: Object,
@@ -38,6 +42,6 @@ export default {
       class="avatar avatar-inline m-0"
       data-qa-selector="avatar_image"
     />
-    <i v-if="hasMergeIcon" aria-hidden="true" class="fa fa-exclamation-triangle merge-icon"></i>
+    <gl-icon v-if="hasMergeIcon" name="warning-solid" aria-hidden="true" class="merge-icon" />
   </span>
 </template>

app/assets/javascripts/users_select/index.js

@@ -796,7 +796,7 @@ UsersSelect.prototype.renderRowAvatar = function(issuableType, user, img) {
 
   const mergeIcon =
     issuableType === 'merge_request' && !user.can_merge
-      ? `${spriteIcon('warning-solid', 's12 merge-icon')}`
+      ? spriteIcon('warning-solid', 's12 merge-icon')
       : '';
 
   return `<span class="position-relative mr-2">

app/assets/stylesheets/pages/issuable.scss

@@ -112,7 +112,7 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    text-shadow: -1px -1px 2px $white, 1px -1px 2px $white, -1px 1px 2px $white, 1px 1px 2px $white;
+    filter: drop-shadow(0 0 0.5px $white) drop-shadow(0 0 1px $white) drop-shadow(0 0 2px $white);
   }
 }
 
@@ -391,6 +391,13 @@
       text-align: center;
     }
 
+    .merge-icon {
+      height: 12px;
+      width: 12px;
+      bottom: -5px;
+      right: 4px;
+    }
+
     .sidebar-collapsed-icon {
       display: flex;
       flex-direction: column;
@@ -401,7 +408,7 @@
       text-align: center;
       color: $gl-text-color-secondary;
 
-      svg {
+      > svg {
         fill: $gl-text-color-secondary;
       }
 
@@ -409,7 +416,7 @@
       &:hover .todo-undone {
         color: $gl-text-color;
 
-        svg {
+        > svg {
           fill: $gl-text-color;
         }
       }
@@ -481,10 +488,6 @@
       display: none;
     }
 
-    .merge-icon {
-      font-size: 10px;
-    }
-
     .multiple-users {
       position: relative;
       height: 24px;

app/assets/stylesheets/pages/merge_requests.scss

@@ -287,10 +287,6 @@ $mr-widget-min-height: 69px;
       margin-top: 0;
       margin-bottom: 0;
 
-      &.has-conflicts .fa-exclamation-triangle {
-        color: $orange-500;
-      }
-
       time {
         font-weight: $gl-font-weight-normal;
       }

app/views/doorkeeper/authorizations/new.html.haml

@@ -10,7 +10,7 @@
         - if current_user.admin?
           .text-warning
             %p
-              = icon("exclamation-triangle fw")
+              = sprite_icon('warning-solid')
               = html_escape(_('You are an admin, which means granting access to %{client_name} will allow them to interact with GitLab as an admin as well. Proceed with caution.')) % { client_name: tag.strong(@pre_auth.client.name) }
         %p
           - link_to_client = link_to(@pre_auth.client.name, @pre_auth.redirect_uri, target: '_blank', rel: 'noopener noreferrer')

app/views/projects/_archived_notice.html.haml

 - if project.archived?
   .text-warning.center.prepend-top-20
     %p
-      = icon("exclamation-triangle fw")
+      = sprite_icon('warning-solid')
       = _('Archived project! Repository and other project resources are read only')

app/views/projects/merge_requests/widget/open/_error.html.haml

 %h4
-  = icon('exclamation-triangle')
+  = sprite_icon('warning-solid')
   This merge request failed to be merged automatically
 
 %p

app/views/projects/tree/_truncated_notice_tree_row.html.haml

 %tr.tree-truncated-warning
   %td{ colspan: '3' }
-    = icon('exclamation-triangle fw')
+    = sprite_icon('warning-solid')
     %span
       Too many items to show. To preserve performance only
       %strong #{number_with_delimiter(limit)} of #{number_with_delimiter(total)}

app/views/shared/_md_preview.html.haml

@@ -28,7 +28,7 @@
   - if referenced_users
     .referenced-users.hide
       %span
-        = icon("exclamation-triangle")
+        = sprite_icon('warning-solid')
         You are about to add
         %strong
           %span.js-referenced-users-count 0

changelogs/unreleased/276417-replace-fa-exclamation-triangle-icons-with-gitlab-svg-warning-soli.yml

+---
+title: Replace fa-exclamation-triangle icons with GitLab SVG warning-solid icon
+merge_request: 47089
+author:
+type: changed

ee/app/views/projects/_archived_notice.html.haml

@@ -3,5 +3,5 @@
 - if project.archived?
   .text-warning.center.prepend-top-20
     %p
-      = icon("exclamation-triangle fw")
+      = sprite_icon('warning-solid')
       = _('Archived project! Repository and other project resources are read-only')

ee/app/views/projects/_marked_for_deletion_notice.haml

 - if project.marked_for_deletion?
   .text-warning.center.prepend-top-20
     %p
-      = icon("exclamation-triangle fw")
+      = sprite_icon('warning-solid')
       = _("Deletion pending. This project will be removed on %{date}. Repository and other project resources are read-only.") % { date: permanent_deletion_date(project.marked_for_deletion_at) }

ee/app/views/projects/branches/_diverged_from_upstream.html.haml

 - if @project.mirror_ever_updated_successfully? && @repository.diverged_from_upstream?(branch.name)
   %span.badge.badge-danger.gl-ml-2.has-tooltip{ data: { html: "true", title: branch_diverged_tooltip_message } }
-    = icon('exclamation-triangle')
+    = sprite_icon('warning-solid')
     = s_('Branches|diverged from upstream')

ee/app/views/projects/commits/_mirror_status.html.haml

@@ -8,7 +8,7 @@
 
       - if @ref.present? && @project.mirror_ever_updated_successfully? && @repository.diverged_from_upstream?(@ref)
         %span.has-tooltip{ data: { html: "true", title: branch_diverged_tooltip_message } }
-          = icon('exclamation-triangle')
+          = sprite_icon('warning-solid')
           This branch has diverged from upstream.
     .project-mirror-button
       = render "shared/mirror_update_button"

ee/app/views/projects/merge_requests/widget/open/_size_limit_reached.html.haml

 - error_messages = @project.repository_size_checker.error_message
 
 %h4.size-limit-reached
-  = icon("exclamation-triangle")
+  = sprite_icon('warning-solid')
   = error_messages.merge_error
 
 %p