Add material design icons to admin/settings views (mastodon#27780)

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

app/helpers/application_helper.rb

@@ -113,6 +113,14 @@ def fa_icon(icon, attributes = {})
     content_tag(:i, nil, attributes.merge(class: class_names.join(' ')))
   end
 
+  def material_symbol(icon, attributes = {})
+    inline_svg_tag(
+      "400-24px/#{icon}.svg",
+      class: %w(icon).concat(attributes[:class].to_s.split),
+      role: :img
+    )
+  end
+
   def check_icon
     inline_svg_tag 'check.svg'
   end

app/javascript/styles/mastodon/admin.scss

@@ -10,6 +10,13 @@ $content-width: 840px;
   width: 100%;
   min-height: 100vh;
 
+  .icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    margin: 0 2px;
+  }
+
   .sidebar-wrapper {
     min-height: 100vh;
     overflow: hidden;

app/views/admin/account_warnings/_account_warning.html.haml

@@ -2,7 +2,7 @@
   .log-entry__header
     .log-entry__avatar
       .indicator-icon{ class: account_warning.overruled? ? 'success' : 'failure' }
-        = fa_icon 'warning'
+        = material_symbol 'warning'
     .log-entry__content
       .log-entry__title
         = t(account_warning.action,

app/views/admin/accounts/_remote_account.html.haml

@@ -2,14 +2,14 @@
   %th= t('admin.accounts.inbox_url')
   %td
     = account.inbox_url
-    = fa_icon DeliveryFailureTracker.available?(account.inbox_url) ? 'check' : 'times'
+    = material_symbol DeliveryFailureTracker.available?(account.inbox_url) ? 'check' : 'close'
   %td
     = table_link_to 'search', domain_block.present? ? t('admin.domain_blocks.view') : t('admin.accounts.view_domain'), admin_instance_path(account.domain)
 %tr
   %th= t('admin.accounts.shared_inbox_url')
   %td
     = account.shared_inbox_url
-    = fa_icon DeliveryFailureTracker.available?(account.shared_inbox_url) ? 'check' : 'times'
+    = material_symbol DeliveryFailureTracker.available?(account.shared_inbox_url) ? 'check' : 'close'
   %td
     - if domain_block.nil?
       = table_link_to 'ban', t('admin.domain_blocks.add_new'), new_admin_domain_block_path(_domain: account.domain)

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

@@ -53,19 +53,19 @@
         = check_box_tag :batch_checkbox_all, nil, false
       .batch-table__toolbar__actions
         - if @accounts.any?(&:user_pending?)
-          = f.button safe_join([fa_icon('check'), t('admin.accounts.approve')]),
+          = f.button safe_join([material_symbol('check'), t('admin.accounts.approve')]),
                      class: 'table-action-link',
                      data: { confirm: t('admin.reports.are_you_sure') },
                      name: :approve,
                      type: :submit
 
-          = f.button safe_join([fa_icon('times'), t('admin.accounts.reject')]),
+          = f.button safe_join([material_symbol('close'), t('admin.accounts.reject')]),
                      class: 'table-action-link',
                      data: { confirm: t('admin.reports.are_you_sure') },
                      name: :reject,
                      type: :submit
 
-        = f.button safe_join([fa_icon('lock'), t('admin.accounts.perform_full_suspension')]),
+        = f.button safe_join([material_symbol('lock'), t('admin.accounts.perform_full_suspension')]),
                    class: 'table-action-link',
                    data: { confirm: t('admin.reports.are_you_sure') },
                    name: :suspend,

app/views/admin/accounts/show.html.haml

@@ -20,7 +20,7 @@
               %dd{ title: field.value, class: custom_field_classes(field) }
                 - if field.verified?
                   %span.verified__mark{ title: t('accounts.link_verified_on', date: l(field.verified_at)) }
-                    = fa_icon 'check'
+                    = material_symbol 'check'
                 = prerender_custom_emojis(account_field_value_format(field, with_rel_me: false), account.emojis)
 
     - if account.note.present?

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

@@ -48,19 +48,19 @@
         - if params[:local] == '1'
           = f.button safe_join([fa_icon('save'), t('generic.save_changes')]), name: :update, class: 'table-action-link', type: :submit, data: { confirm: t('admin.reports.are_you_sure') }
 
-          = f.button safe_join([fa_icon('eye'), t('admin.custom_emojis.list')]), name: :list, class: 'table-action-link', type: :submit, data: { confirm: t('admin.reports.are_you_sure') }
+          = f.button safe_join([material_symbol('visibility'), t('admin.custom_emojis.list')]), name: :list, class: 'table-action-link', type: :submit, data: { confirm: t('admin.reports.are_you_sure') }
 
-          = f.button safe_join([fa_icon('eye-slash'), t('admin.custom_emojis.unlist')]), name: :unlist, class: 'table-action-link', type: :submit, data: { confirm: t('admin.reports.are_you_sure') }
+          = f.button safe_join([material_symbol('visibility_off'), t('admin.custom_emojis.unlist')]), name: :unlist, class: 'table-action-link', type: :submit, data: { confirm: t('admin.reports.are_you_sure') }
 
         = f.button safe_join([fa_icon('power-off'), t('admin.custom_emojis.enable')]), name: :enable, class: 'table-action-link', type: :submit, data: { confirm: t('admin.reports.are_you_sure') }
 
         = f.button safe_join([fa_icon('power-off'), t('admin.custom_emojis.disable')]), name: :disable, class: 'table-action-link', type: :submit, data: { confirm: t('admin.reports.are_you_sure') }
 
         - if can?(:destroy, :custom_emoji)
-          = f.button safe_join([fa_icon('times'), t('admin.custom_emojis.delete')]), name: :delete, class: 'table-action-link', type: :submit, data: { confirm: t('admin.reports.are_you_sure') }
+          = f.button safe_join([material_symbol('close'), t('admin.custom_emojis.delete')]), name: :delete, class: 'table-action-link', type: :submit, data: { confirm: t('admin.reports.are_you_sure') }
 
         - if can?(:copy, :custom_emoji) && params[:local] != '1'
-          = f.button safe_join([fa_icon('copy'), t('admin.custom_emojis.copy')]), name: :copy, class: 'table-action-link', type: :submit, data: { confirm: t('admin.reports.are_you_sure') }
+          = f.button safe_join([material_symbol('content_copy'), t('admin.custom_emojis.copy')]), name: :copy, class: 'table-action-link', type: :submit, data: { confirm: t('admin.reports.are_you_sure') }
 
     - if params[:local] == '1'
       .batch-table__form.simple_form

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

@@ -57,19 +57,19 @@
   .dashboard__item
     = link_to admin_reports_path, class: 'dashboard__quick-access' do
       %span= t('admin.dashboard.pending_reports_html', count: @pending_reports_count)
-      = fa_icon 'chevron-right fw'
+      = material_symbol 'chevron_right'
 
     = link_to admin_accounts_path(status: 'pending'), class: 'dashboard__quick-access' do
       %span= t('admin.dashboard.pending_users_html', count: @pending_users_count)
-      = fa_icon 'chevron-right fw'
+      = material_symbol 'chevron_right'
 
     = link_to admin_trends_tags_path(status: 'pending_review'), class: 'dashboard__quick-access' do
       %span= t('admin.dashboard.pending_tags_html', count: @pending_tags_count)
-      = fa_icon 'chevron-right fw'
+      = material_symbol 'chevron_right'
 
     = link_to admin_disputes_appeals_path(status: 'pending'), class: 'dashboard__quick-access' do
       %span= t('admin.dashboard.pending_appeals_html', count: @pending_appeals_count)
-      = fa_icon 'chevron-right fw'
+      = material_symbol 'chevron_right'
   .dashboard__item
     = react_admin_component :dimension,
                             dimension: 'sources',

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

@@ -12,7 +12,7 @@
       %label.batch-table__toolbar__select.batch-checkbox-all
         = check_box_tag :batch_checkbox_all, nil, false
       .batch-table__toolbar__actions
-        = f.button safe_join([fa_icon('times'), t('admin.email_domain_blocks.delete')]),
+        = f.button safe_join([material_symbol('close'), t('admin.email_domain_blocks.delete')]),
                    class: 'table-action-link',
                    data: { confirm: t('admin.reports.are_you_sure') },
                    name: :delete,

app/views/admin/export_domain_blocks/_domain_block.html.haml

@@ -23,5 +23,5 @@
         = f.object.public_comment
       - if existing_relationships
         ·
-        = fa_icon 'warning fw'
+        = material_symbol 'warning'
         = t('admin.export_domain_blocks.import.existing_relationships_warning')

app/views/admin/export_domain_blocks/import.html.haml

@@ -12,7 +12,7 @@
       %label.batch-table__toolbar__select.batch-checkbox-all
         = check_box_tag :batch_checkbox_all, nil, false
       .batch-table__toolbar__actions
-        = f.button safe_join([fa_icon('copy'), t('admin.domain_blocks.import')]),
+        = f.button safe_join([material_symbol('content_copy'), t('admin.domain_blocks.import')]),
                    class: 'table-action-link',
                    data: { confirm: t('admin.reports.are_you_sure') },
                    name: :save,

app/views/admin/follow_recommendations/show.html.haml

@@ -31,13 +31,13 @@
         = check_box_tag :batch_checkbox_all, nil, false
       .batch-table__toolbar__actions
         - if params[:status].blank? && can?(:suppress, :follow_recommendation)
-          = f.button safe_join([fa_icon('times'), t('admin.follow_recommendations.suppress')]),
+          = f.button safe_join([material_symbol('close'), t('admin.follow_recommendations.suppress')]),
                      class: 'table-action-link',
                      data: { confirm: t('admin.reports.are_you_sure') },
                      name: :suppress,
                      type: :submit
         - if params[:status] == 'suppressed' && can?(:unsuppress, :follow_recommendation)
-          = f.button safe_join([fa_icon('plus'), t('admin.follow_recommendations.unsuppress')]),
+          = f.button safe_join([material_symbol('add'), t('admin.follow_recommendations.unsuppress')]),
                      class: 'table-action-link',
                      name: :unsuppress,
                      type: :submit

app/views/admin/instances/show.html.haml

@@ -9,7 +9,7 @@
 
   - if @instance.persisted?
     %p
-      = fa_icon 'info fw'
+      = material_symbol 'info'
       = t('admin.instances.totals_time_period_hint_html')
 
     .dashboard

app/views/admin/invites/_invite.html.haml

@@ -12,7 +12,7 @@
 
   - if invite.valid_for_use?
     %td
-      = fa_icon 'user fw'
+      = material_symbol 'person'
       = invite.uses
       = " / #{invite.max_uses}" unless invite.max_uses.nil?
     %td

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

@@ -14,7 +14,7 @@
         = check_box_tag :batch_checkbox_all, nil, false
       .batch-table__toolbar__actions
         - if can?(:destroy, :ip_block)
-          = f.button safe_join([fa_icon('times'), t('admin.ip_blocks.delete')]),
+          = f.button safe_join([material_symbol('close'), t('admin.ip_blocks.delete')]),
                      class: 'table-action-link',
                      data: { confirm: t('admin.reports.are_you_sure') },
                      name: :delete,

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

@@ -19,7 +19,7 @@
 
   .back-link
     = link_to admin_account_path(@account.id) do
-      = fa_icon 'chevron-left fw'
+      = material_symbol 'chevron_left'
       = t('admin.statuses.back_to_account')
 
 %hr.spacer/
@@ -30,7 +30,7 @@
       %label.batch-table__toolbar__select.batch-checkbox-all
         = check_box_tag :batch_checkbox_all, nil, false
       .batch-table__toolbar__actions
-        = f.button safe_join([fa_icon('lock'), t('admin.accounts.perform_full_suspension')]),
+        = f.button safe_join([material_symbol('lock'), t('admin.accounts.perform_full_suspension')]),
                    class: 'table-action-link',
                    data: { confirm: t('admin.reports.are_you_sure') },
                    name: :suspend,

app/views/admin/relays/_relay.html.haml

@@ -4,7 +4,7 @@
   %td
     - if relay.accepted?
       %span.positive-hint
-        = fa_icon('check')
+        = material_symbol('check')
          
         = t 'admin.relays.enabled'
     - elsif relay.pending?
@@ -13,7 +13,7 @@
       = t 'admin.relays.pending'
     - else
       %span.negative-hint
-        = fa_icon('times')
+        = material_symbol('close')
          
         = t 'admin.relays.disabled'
   %td

app/views/admin/reports/_header_card.html.haml

@@ -16,7 +16,7 @@
           %strong.emojify.p-name= display_name(report.target_account, custom_emojify: true)
         %span
           = acct(report.target_account)
-          = fa_icon('lock') if report.target_account.locked?
+          = material_symbol('lock') if report.target_account.locked?
     - if report.target_account.note.present?
       .account-card__bio.emojify
         = prerender_custom_emojis(account_bio_format(report.target_account), report.target_account.emojis)

app/views/admin/reports/_status.html.haml

@@ -37,5 +37,5 @@
         = t("statuses.visibilities.#{status.visibility}")
       - if status.proper.sensitive?
         ·
-        = fa_icon('eye-slash fw')
+        = material_symbol('visibility_off')
         = t('stream_entries.sensitive_content')

app/views/admin/reports/actions/preview.html.haml

@@ -58,7 +58,7 @@
 
                   - status.ordered_media_attachments.each do |media_attachment|
                     %abbr{ title: media_attachment.description }
-                      = fa_icon 'link'
+                      = material_symbol 'link'
                       = media_attachment.file_file_name
                 .strike-card__statuses-list__item__meta
                   = link_to ActivityPub::TagManager.instance.url_for(status), target: '_blank', rel: 'noopener noreferrer' do

app/views/admin/reports/show.html.haml

@@ -41,7 +41,7 @@
 %p
   = t 'admin.reports.statuses_description_html'
   —
-  = link_to safe_join([fa_icon('plus'), t('admin.reports.add_to_report')]),
+  = link_to safe_join([material_symbol('add'), t('admin.reports.add_to_report')]),
             admin_account_statuses_path(@report.target_account_id, report_id: @report.id),
             class: 'table-action-link'
 
@@ -52,7 +52,7 @@
         = check_box_tag :batch_checkbox_all, nil, false
       .batch-table__toolbar__actions
         - if !@statuses.empty? && @report.unresolved?
-          = f.button safe_join([fa_icon('times'), t('admin.statuses.batch.remove_from_report')]), name: :remove_from_report, class: 'table-action-link', type: :submit
+          = f.button safe_join([material_symbol('close'), t('admin.statuses.batch.remove_from_report')]), name: :remove_from_report, class: 'table-action-link', type: :submit
     .batch-table__body
       - if @statuses.empty?
         = nothing_here 'nothing-here--under-tabs'

app/views/admin/roles/_role.html.haml

@@ -2,7 +2,7 @@
   - if can?(:update, role)
     = link_to edit_admin_role_path(role), class: 'announcements-list__item__title' do
       %span.user-role{ class: "user-role-#{role.id}" }
-        = fa_icon 'users fw'
+        = material_symbol 'group'
 
         - if role.everyone?
           = t('admin.roles.everyone')
@@ -11,7 +11,7 @@
   - else
     %span.announcements-list__item__title
       %span.user-role{ class: "user-role-#{role.id}" }
-        = fa_icon 'users fw'
+        = material_symbol 'group'
 
         - if role.everyone?
           = t('admin.roles.everyone')

app/views/admin/settings/shared/_links.html.haml

@@ -3,7 +3,7 @@
     :ruby
       primary.item :branding, safe_join([fa_icon('pencil fw'), t('admin.settings.branding.title')]), admin_settings_branding_path
       primary.item :about, safe_join([fa_icon('file-text fw'), t('admin.settings.about.title')]), admin_settings_about_path
-      primary.item :registrations, safe_join([fa_icon('users fw'), t('admin.settings.registrations.title')]), admin_settings_registrations_path
+      primary.item :registrations, safe_join([material_symbol('group'), t('admin.settings.registrations.title')]), admin_settings_registrations_path
       primary.item :discovery, safe_join([fa_icon('search fw'), t('admin.settings.discovery.title')]), admin_settings_discovery_path
       primary.item :content_retention, safe_join([fa_icon('history fw'), t('admin.settings.content_retention.title')]), admin_settings_content_retention_path
       primary.item :appearance, safe_join([fa_icon('desktop fw'), t('admin.settings.appearance.title')]), admin_settings_appearance_path

app/views/admin/status_edits/_status_edit.html.haml

@@ -26,5 +26,5 @@
 
         - if status_edit.sensitive?
           ·
-          = fa_icon('eye-slash fw')
+          = material_symbol('visibility_off')
           = t('stream_entries.sensitive_content')

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

@@ -12,11 +12,11 @@
   .back-link
     - if params[:report_id]
       = link_to admin_report_path(params[:report_id].to_i) do
-        = fa_icon 'chevron-left fw'
+        = material_symbol 'chevron_left'
         = t('admin.statuses.back_to_report')
     - else
       = link_to admin_account_path(@account.id) do
-        = fa_icon 'chevron-left fw'
+        = material_symbol 'chevron_left'
         = t('admin.statuses.back_to_account')
 
 %hr.spacer/

app/views/admin/tags/show.html.haml

@@ -52,26 +52,26 @@
       = link_to admin_tag_path(@tag.id), class: ['dashboard__quick-access', @tag.usable? ? 'positive' : 'negative'] do
         - if @tag.usable?
           %span= t('admin.trends.tags.usable')
-          = fa_icon 'check fw'
+          = material_symbol 'check'
         - else
           %span= t('admin.trends.tags.not_usable')
-          = fa_icon 'lock fw'
+          = material_symbol 'lock'
 
       = link_to admin_tag_path(@tag.id), class: ['dashboard__quick-access', @tag.trendable? ? 'positive' : 'negative'] do
         - if @tag.trendable?
           %span= t('admin.trends.tags.trendable')
-          = fa_icon 'check fw'
+          = material_symbol 'check'
         - else
           %span= t('admin.trends.tags.not_trendable')
-          = fa_icon 'lock fw'
+          = material_symbol 'lock'
 
       = link_to admin_tag_path(@tag.id), class: ['dashboard__quick-access', @tag.listable? ? 'positive' : 'negative'] do
         - if @tag.listable?
           %span= t('admin.trends.tags.listable')
-          = fa_icon 'check fw'
+          = material_symbol 'check'
         - else
           %span= t('admin.trends.tags.not_listable')
-          = fa_icon 'lock fw'
+          = material_symbol 'lock'
 
   %hr.spacer/
 

app/views/admin/trends/links/index.html.haml

@@ -24,7 +24,7 @@
     .back-link
       = link_to admin_trends_links_preview_card_providers_path do
         = t('admin.trends.preview_card_providers.title')
-        = fa_icon 'chevron-right fw'
+        = material_symbol 'chevron_right'
 
 = form_for(@form, url: batch_admin_trends_links_path) do |f|
   = hidden_field_tag :page, params[:page] || 1
@@ -37,22 +37,22 @@
       %label.batch-table__toolbar__select.batch-checkbox-all
         = check_box_tag :batch_checkbox_all, nil, false
       .batch-table__toolbar__actions
-        = f.button safe_join([fa_icon('check'), t('admin.trends.links.allow')]),
+        = f.button safe_join([material_symbol('check'), t('admin.trends.links.allow')]),
                    class: 'table-action-link',
                    data: { confirm: t('admin.reports.are_you_sure') },
                    name: :approve,
                    type: :submit
-        = f.button safe_join([fa_icon('check'), t('admin.trends.links.allow_provider')]),
+        = f.button safe_join([material_symbol('check'), t('admin.trends.links.allow_provider')]),
                    class: 'table-action-link',
                    data: { confirm: t('admin.reports.are_you_sure') },
                    name: :approve_providers,
                    type: :submit
-        = f.button safe_join([fa_icon('times'), t('admin.trends.links.disallow')]),
+        = f.button safe_join([material_symbol('close'), t('admin.trends.links.disallow')]),
                    class: 'table-action-link',
                    data: { confirm: t('admin.reports.are_you_sure') },
                    name: :reject,
                    type: :submit
-        = f.button safe_join([fa_icon('times'), t('admin.trends.links.disallow_provider')]),
+        = f.button safe_join([material_symbol('close'), t('admin.trends.links.disallow_provider')]),
                    class: 'table-action-link',
                    data: { confirm: t('admin.reports.are_you_sure') },
                    name: :reject_providers,