Replace notification icons with Gitlab SVGs

app/helpers/notifications_helper.rb

@@ -6,15 +6,15 @@ module NotificationsHelper
   def notification_icon_class(level)
     case level.to_sym
     when :disabled, :owner_disabled
-      'microphone-slash'
+      'notifications-off'
     when :participating
-      'volume-up'
+      'notifications'
     when :watch
       'eye'
     when :mention
       'at'
     when :global
-      'globe'
+      'earth'
     end
   end
 
@@ -28,8 +28,8 @@ module NotificationsHelper
     end
   end
 
-  def notification_icon(level, text = nil)
-    icon("#{notification_icon_class(level)} fw", text: text)
+  def notification_icon(level)
+    sprite_icon("#{notification_icon_class(level)}")
   end
 
   def notification_title(level)

app/views/profiles/notifications/_group_settings.html.haml

@@ -2,7 +2,7 @@
 
 .gl-responsive-table-row.notification-list-item
   .table-section.section-40
-    %span.notification.fa.fa-holder.gl-mr-2
+    %span.notification.gl-mr-2
       = notification_icon(notification_icon_level(setting, emails_disabled))
 
     %span.str-truncated

app/views/profiles/notifications/_project_settings.html.haml

 - emails_disabled = project.emails_disabled?
 
 %li.notification-list-item
-  %span.notification.fa.fa-holder.gl-mr-2
+  %span.notification.gl-mr-2
     = notification_icon(notification_icon_level(setting, emails_disabled))
 
   %span.str-truncated

changelogs/unreleased/mw-notification-icons.yml

+---
+title: Replace notification icons with Gitlab SVGs
+merge_request: 40709
+author:
+type: changed

spec/helpers/notifications_helper_spec.rb

@@ -4,12 +4,12 @@ require 'spec_helper'
 
 RSpec.describe NotificationsHelper do
   describe 'notification_icon' do
-    it { expect(notification_icon(:disabled)).to match('class="fa fa-microphone-slash fa-fw"') }
-    it { expect(notification_icon(:owner_disabled)).to match('class="fa fa-microphone-slash fa-fw"') }
-    it { expect(notification_icon(:participating)).to match('class="fa fa-volume-up fa-fw"') }
-    it { expect(notification_icon(:mention)).to match('class="fa fa-at fa-fw"') }
-    it { expect(notification_icon(:global)).to match('class="fa fa-globe fa-fw"') }
-    it { expect(notification_icon(:watch)).to match('class="fa fa-eye fa-fw"') }
+    it { expect(notification_icon(:disabled)).to match('data-testid="notifications-off-icon"') }
+    it { expect(notification_icon(:owner_disabled)).to match('data-testid="notifications-off-icon"') }
+    it { expect(notification_icon(:participating)).to match('data-testid="notifications-icon"') }
+    it { expect(notification_icon(:mention)).to match('data-testid="at-icon"') }
+    it { expect(notification_icon(:global)).to match('data-testid="earth-icon') }
+    it { expect(notification_icon(:watch)).to match('data-testid="eye-icon"') }
   end
 
   describe 'notification_title' do