Replace fa-bell icons with notifications svg

app/assets/stylesheets/pages/projects.scss

@@ -224,12 +224,6 @@
       font-size: $gl-font-size-large;
     }
   }
-
-  .notifications-btn {
-    .fa-bell {
-      margin-right: 0;
-    }
-  }
 }
 
 .nav > .project-buttons {

app/views/shared/notifications/_button.html.haml

@@ -17,16 +17,16 @@
       .js-notification-toggle-btns
         %div{ class: ("btn-group" if notification_setting.custom?) }
           - if notification_setting.custom?
-            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn.text-left#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
-              = icon("bell", class: "js-notification-loading")
+            %button.dropdown-new.btn.btn-defaul.btn-icon.gl-button.has-tooltip.notifications-btn.text-left#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
+              = sprite_icon("notifications", size: 16, css_class: "js-notification-loading")
               = notification_title(notification_setting.level)
             %button.btn.dropdown-toggle.d-flex{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
               = icon('caret-down')
               .sr-only Toggle dropdown
           - else
-            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
+            %button.dropdown-new.btn.btn-default.btn-icon.gl-button.has-tooltip.notifications-btn#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
               .float-left
-                = icon("bell", class: "js-notification-loading")
+                = sprite_icon("notifications", size: 16, css_class: "js-notification-loading")
                 = notification_title(notification_setting.level)
               .float-right
                 = icon("caret-down")

changelogs/unreleased/225934-replace-fa-bell-icons-with-gitlab-svg-notifications-icon.yml

+---
+title: Replace fa-bell icons with GitLab SVG notifications icon
+merge_request: 37676
+author:
+type: changed