Merge branch 'main' of https://github.com/glitch-soc/mastodon

2024-01-19 18:10:15 +09:00 · 2024-01-19 18:10:15 +09:00 · ee2178203b
commit ee2178203b
parent 51ccef82c9 07b6777c99
1320 changed files with 14462 additions and 9291 deletions
--- a/.bundler-audit.yml
+++ b/.bundler-audit.yml
@ -0,0 +1,6 @@
+---
+ignore:
+  # devise-two-factor advisory about brute-forcing TOTP
+  # We have rate-limits on authentication endpoints in place (including second
+  # factor verification) since Mastodon v3.2.0
+  - CVE-2024-0227
--- a/.devcontainer/docker-compose.yml
+++ b/.devcontainer/docker-compose.yml
@ -70,7 +70,7 @@ services:
        hard: -1

  libretranslate:
-    image: libretranslate/libretranslate:v1.5.2
+    image: libretranslate/libretranslate:v1.5.4
    restart: unless-stopped
    volumes:
      - lt-data:/home/libretranslate/.local
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -245,7 +245,7 @@ module.exports = defineConfig({
          },
          // Immutable / Redux / data store
          {
-            pattern: '{immutable,react-redux,react-immutable-proptypes,react-immutable-pure-component,reselect}',
+            pattern: '{immutable,@reduxjs/toolkit,react-redux,react-immutable-proptypes,react-immutable-pure-component}',
            group: 'external',
            position: 'before',
          },
@ -370,7 +370,14 @@ module.exports = defineConfig({
        '@typescript-eslint/consistent-type-exports': 'error',
        '@typescript-eslint/consistent-type-imports': 'error',
        "@typescript-eslint/prefer-nullish-coalescing": ['error', { ignorePrimitives: { boolean: true } }],
-
+        "@typescript-eslint/no-restricted-imports": [
+          "warn",
+          {
+            "name": "react-redux",
+            "importNames": ["useSelector", "useDispatch"],
+            "message": "Use typed hooks `useAppDispatch` and `useAppSelector` instead."
+          }
+        ],
        'jsdoc/require-jsdoc': 'off',

        // Those rules set stricter rules for TS files
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@ -31,7 +31,7 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
        with:
          languages: ${{ matrix.language }}
          # If you wish to specify custom queries, you can do so here or in a config file.
@ -44,7 +44,7 @@ jobs:
      # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+        uses: github/codeql-action/autobuild@v3

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@ -57,6 +57,6 @@ jobs:
      #   ./location_of_script_within_repo/buildscript.sh

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3
        with:
          category: '/language:${{matrix.language}}'
--- a/.haml-lint_todo.yml
+++ b/.haml-lint_todo.yml
@ -1,21 +1,13 @@
 # This configuration was generated by
 # `haml-lint --auto-gen-config`
-# on 2023-12-15 11:02:19 -0500 using Haml-Lint version 0.52.0.
+# on 2024-01-09 11:30:07 -0500 using Haml-Lint version 0.53.0.
 # The point is for the user to remove these configuration records
 # one by one as the lints are removed from the code base.
 # Note that changes in the inspected code, or installation of new
 # versions of Haml-Lint, may require this file to be generated again.

 linters:
-  # Offense count: 11
+  # Offense count: 1
  LineLength:
    exclude:
      - 'app/views/admin/roles/_form.html.haml'
-      - 'app/views/auth/registrations/edit.html.haml'
-      - 'app/views/auth/registrations/new.html.haml'
-      - 'app/views/media/player.html.haml'
-      - 'app/views/settings/applications/_fields.html.haml'
-      - 'app/views/settings/imports/index.html.haml'
-      - 'app/views/settings/preferences/appearance/show.html.haml'
-      - 'app/views/settings/preferences/notifications/show.html.haml'
-      - 'app/views/settings/preferences/other/show.html.haml'
--- a/.nvmrc
+++ b/.nvmrc
@ -1 +1 @@
-20.9
+20.11
--- a/.prettierignore
+++ b/.prettierignore
@ -74,6 +74,8 @@ app/javascript/styles/mastodon/reset.scss
 # Ignore the generated AUTHORS.md
 AUTHORS.md

+!lint-staged.config.js
+
 # Ignore glitch-soc emoji map file
 /app/javascript/flavours/glitch/features/emoji/emoji_map.json

--- a/.rubocop.yml
+++ b/.rubocop.yml
@ -74,14 +74,12 @@ Metrics/ModuleLength:
 Metrics/AbcSize:
  Exclude:
    - 'lib/mastodon/cli/*.rb'
-    - db/*migrate/**/*

 # Reason: Currently disabled in .rubocop_todo.yml
 # https://docs.rubocop.org/rubocop/cops_metrics.html#metricscyclomaticcomplexity
 Metrics/CyclomaticComplexity:
  Exclude:
    - lib/mastodon/cli/*.rb
-    - db/*migrate/**/*

 # Reason:
 # https://docs.rubocop.org/rubocop/cops_metrics.html#metricsparameterlists
@ -105,9 +103,26 @@ Rails/Exit:
    - 'config/boot.rb'
    - 'lib/mastodon/cli/*.rb'

-Rails/SkipsModelValidations:
+# Reason: Conflicts with `Lint/UselessMethodDefinition` for inherited controller actions
+# https://docs.rubocop.org/rubocop-rails/cops_rails.html#railslexicallyscopedactionfilter
+Rails/LexicallyScopedActionFilter:
  Exclude:
-    - 'db/*migrate/**/*'
+    - 'app/controllers/auth/*'
+
+# Reason: These tasks are doing local work which do not need full env loaded
+# https://docs.rubocop.org/rubocop-rails/cops_rails.html#railsrakeenvironment
+Rails/RakeEnvironment:
+  Exclude:
+    - 'lib/tasks/auto_annotate_models.rake'
+    - 'lib/tasks/emojis.rake'
+    - 'lib/tasks/mastodon.rake'
+    - 'lib/tasks/repo.rake'
+    - 'lib/tasks/statistics.rake'
+
+# Reason: There are appropriate times to use these features
+# https://docs.rubocop.org/rubocop-rails/cops_rails.html#railsskipsmodelvalidations
+Rails/SkipsModelValidations:
+  Enabled: false

 # Reason: We want to preserve the ability to migrate from arbitrary old versions,
 # and cannot guarantee that every installation has run every migration as they upgrade.
@ -120,15 +135,10 @@ Rails/UnusedIgnoredColumns:
 Rails/NegateInclude:
  Enabled: false

-# Reason: Some single letter camel case files shouldn't be split
+# Reason: Deprecated cop, will be removed in 3.0, replaced by SpecFilePathFormat
 # https://docs.rubocop.org/rubocop-rspec/cops_rspec.html#rspecfilepath
 RSpec/FilePath:
-  CustomTransform:
-    ActivityPub: activitypub
-    DeepL: deepl
-    FetchOEmbedService: fetch_oembed_service
-    OEmbedController: oembed_controller
-    OStatus: ostatus
+  Enabled: false

 # Reason:
 # https://docs.rubocop.org/rubocop-rspec/cops_rspec.html#rspecnamedsubject
--- a/.rubocop_todo.yml
+++ b/.rubocop_todo.yml
@ -1,6 +1,6 @@
 # This configuration was generated by
 # `rubocop --auto-gen-config --auto-gen-only-exclude --no-exclude-limit --no-offense-counts --no-auto-gen-timestamp`
-# using RuboCop version 1.57.2.
+# using RuboCop version 1.59.0.
 # The point is for the user to remove these configuration records
 # one by one as the offenses are removed from the code base.
 # Note that changes in the inspected code, or installation of new
@ -13,20 +13,13 @@ Bundler/OrderedGems:
  Exclude:
    - 'Gemfile'

-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: Max, AllowHeredoc, AllowURI, URISchemes, IgnoreCopDirectives, AllowedPatterns.
-# URISchemes: http, https
-Layout/LineLength:
-  Exclude:
-    - 'app/models/account.rb'
-
 Lint/NonLocalExitFromIterator:
  Exclude:
    - 'app/helpers/jsonld_helper.rb'

 # Configuration parameters: AllowedMethods, AllowedPatterns, CountRepeatedAttributes.
 Metrics/AbcSize:
-  Max: 100
+  Max: 90

 # Configuration parameters: CountBlocks, Max.
 Metrics/BlockNesting:
@ -45,131 +38,29 @@ Metrics/PerceivedComplexity:
 RSpec/ExampleLength:
  Max: 22

-RSpec/LetSetup:
-  Exclude:
-    - 'spec/controllers/api/v1/accounts/statuses_controller_spec.rb'
-    - 'spec/controllers/api/v1/filters_controller_spec.rb'
-    - 'spec/controllers/api/v2/admin/accounts_controller_spec.rb'
-    - 'spec/controllers/api/v2/filters/keywords_controller_spec.rb'
-    - 'spec/controllers/api/v2/filters/statuses_controller_spec.rb'
-    - 'spec/controllers/auth/confirmations_controller_spec.rb'
-    - 'spec/controllers/auth/passwords_controller_spec.rb'
-    - 'spec/controllers/auth/sessions_controller_spec.rb'
-    - 'spec/controllers/follower_accounts_controller_spec.rb'
-    - 'spec/controllers/following_accounts_controller_spec.rb'
-    - 'spec/controllers/oauth/authorized_applications_controller_spec.rb'
-    - 'spec/controllers/oauth/tokens_controller_spec.rb'
-    - 'spec/controllers/settings/imports_controller_spec.rb'
-    - 'spec/lib/activitypub/activity/delete_spec.rb'
-    - 'spec/lib/vacuum/applications_vacuum_spec.rb'
-    - 'spec/lib/vacuum/preview_cards_vacuum_spec.rb'
-    - 'spec/models/account_spec.rb'
-    - 'spec/models/account_statuses_cleanup_policy_spec.rb'
-    - 'spec/models/canonical_email_block_spec.rb'
-    - 'spec/models/status_spec.rb'
-    - 'spec/models/user_spec.rb'
-    - 'spec/services/account_statuses_cleanup_service_spec.rb'
-    - 'spec/services/activitypub/fetch_featured_collection_service_spec.rb'
-    - 'spec/services/activitypub/fetch_remote_status_service_spec.rb'
-    - 'spec/services/activitypub/process_account_service_spec.rb'
-    - 'spec/services/activitypub/process_collection_service_spec.rb'
-    - 'spec/services/batched_remove_status_service_spec.rb'
-    - 'spec/services/block_domain_service_spec.rb'
-    - 'spec/services/bulk_import_service_spec.rb'
-    - 'spec/services/delete_account_service_spec.rb'
-    - 'spec/services/import_service_spec.rb'
-    - 'spec/services/notify_service_spec.rb'
-    - 'spec/services/remove_status_service_spec.rb'
-    - 'spec/services/report_service_spec.rb'
-    - 'spec/services/resolve_account_service_spec.rb'
-    - 'spec/services/suspend_account_service_spec.rb'
-    - 'spec/services/unallow_domain_service_spec.rb'
-    - 'spec/services/unsuspend_account_service_spec.rb'
-    - 'spec/workers/scheduler/user_cleanup_scheduler_spec.rb'
-
 RSpec/MultipleExpectations:
  Max: 8

 # Configuration parameters: AllowSubject.
 RSpec/MultipleMemoizedHelpers:
-  Max: 21
+  Max: 17

 # Configuration parameters: AllowedGroups.
 RSpec/NestedGroups:
  Max: 6

-# This cop supports unsafe autocorrection (--autocorrect-all).
-Rails/ApplicationController:
-  Exclude:
-    - 'app/controllers/health_controller.rb'
-
 # Configuration parameters: Include.
 # Include: app/models/**/*.rb
 Rails/HasAndBelongsToMany:
  Exclude:
    - 'app/models/concerns/account/associations.rb'
-    - 'app/models/preview_card.rb'
    - 'app/models/status.rb'
    - 'app/models/tag.rb'

-# Configuration parameters: Include.
-# Include: app/controllers/**/*.rb, app/mailers/**/*.rb
-Rails/LexicallyScopedActionFilter:
-  Exclude:
-    - 'app/controllers/auth/passwords_controller.rb'
-    - 'app/controllers/auth/registrations_controller.rb'
-
 Rails/OutputSafety:
  Exclude:
    - 'config/initializers/simple_form.rb'

-# This cop supports unsafe autocorrection (--autocorrect-all).
-# Configuration parameters: Include.
-# Include: **/Rakefile, **/*.rake
-Rails/RakeEnvironment:
-  Exclude:
-    - 'lib/tasks/auto_annotate_models.rake'
-    - 'lib/tasks/db.rake'
-    - 'lib/tasks/emojis.rake'
-    - 'lib/tasks/mastodon.rake'
-    - 'lib/tasks/repo.rake'
-    - 'lib/tasks/statistics.rake'
-
-# Configuration parameters: ForbiddenMethods, AllowedMethods.
-# ForbiddenMethods: decrement!, decrement_counter, increment!, increment_counter, insert, insert!, insert_all, insert_all!, toggle!, touch, touch_all, update_all, update_attribute, update_column, update_columns, update_counters, upsert, upsert_all
-Rails/SkipsModelValidations:
-  Exclude:
-    - 'app/controllers/admin/invites_controller.rb'
-    - 'app/controllers/concerns/session_tracking_concern.rb'
-    - 'app/models/concerns/account/merging.rb'
-    - 'app/models/concerns/expireable.rb'
-    - 'app/models/status.rb'
-    - 'app/models/trends/links.rb'
-    - 'app/models/trends/preview_card_batch.rb'
-    - 'app/models/trends/preview_card_provider_batch.rb'
-    - 'app/models/trends/status_batch.rb'
-    - 'app/models/trends/statuses.rb'
-    - 'app/models/trends/tag_batch.rb'
-    - 'app/models/trends/tags.rb'
-    - 'app/models/user.rb'
-    - 'app/services/activitypub/process_status_update_service.rb'
-    - 'app/services/approve_appeal_service.rb'
-    - 'app/services/block_domain_service.rb'
-    - 'app/services/delete_account_service.rb'
-    - 'app/services/process_mentions_service.rb'
-    - 'app/services/unallow_domain_service.rb'
-    - 'app/services/unblock_domain_service.rb'
-    - 'app/services/update_status_service.rb'
-    - 'app/workers/activitypub/post_upgrade_worker.rb'
-    - 'app/workers/move_worker.rb'
-    - 'app/workers/scheduler/ip_cleanup_scheduler.rb'
-    - 'app/workers/scheduler/scheduled_statuses_scheduler.rb'
-    - 'lib/mastodon/cli/accounts.rb'
-    - 'lib/mastodon/cli/maintenance.rb'
-    - 'spec/lib/activitypub/activity/follow_spec.rb'
-    - 'spec/services/follow_service_spec.rb'
-    - 'spec/services/update_account_service_spec.rb'
-
 # Configuration parameters: Include.
 # Include: app/models/**/*.rb
 Rails/UniqueValidationWithoutIndex:
@ -186,7 +77,6 @@ Rails/WhereExists:
  Exclude:
    - 'app/controllers/activitypub/inboxes_controller.rb'
    - 'app/controllers/admin/email_domain_blocks_controller.rb'
-    - 'app/controllers/auth/registrations_controller.rb'
    - 'app/lib/activitypub/activity/create.rb'
    - 'app/lib/delivery_failure_tracker.rb'
    - 'app/lib/feed_manager.rb'
@ -202,24 +92,16 @@ Rails/WhereExists:
    - 'app/serializers/rest/announcement_serializer.rb'
    - 'app/serializers/rest/tag_serializer.rb'
    - 'app/services/activitypub/fetch_remote_status_service.rb'
-    - 'app/services/app_sign_up_service.rb'
    - 'app/services/vote_service.rb'
    - 'app/validators/reaction_validator.rb'
    - 'app/validators/vote_validator.rb'
    - 'app/workers/move_worker.rb'
-    - 'db/migrate/20190529143559_preserve_old_layout_for_existing_users.rb'
    - 'lib/tasks/tests.rake'
    - 'spec/models/account_spec.rb'
    - 'spec/services/activitypub/process_collection_service_spec.rb'
    - 'spec/services/purge_domain_service_spec.rb'
    - 'spec/services/unallow_domain_service_spec.rb'

-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: AllowOnConstant, AllowOnSelfClass.
-Style/CaseEquality:
-  Exclude:
-    - 'config/initializers/trusted_proxies.rb'
-
 # This cop supports unsafe autocorrection (--autocorrect-all).
 # Configuration parameters: AllowedMethods, AllowedPatterns.
 # AllowedMethods: ==, equal?, eql?
@ -247,8 +129,8 @@ Style/FetchEnvVar:
    - 'config/initializers/devise.rb'
    - 'config/initializers/paperclip.rb'
    - 'config/initializers/vapid.rb'
-    - 'lib/premailer_webpack_strategy.rb'
    - 'lib/mastodon/redis_config.rb'
+    - 'lib/premailer_webpack_strategy.rb'
    - 'lib/tasks/repo.rake'
    - 'spec/features/profile_spec.rb'

@ -265,7 +147,6 @@ Style/FormatStringToken:
 # This cop supports unsafe autocorrection (--autocorrect-all).
 Style/GlobalStdStream:
  Exclude:
-    - 'config/boot.rb'
    - 'config/environments/development.rb'
    - 'config/environments/production.rb'

@ -295,8 +176,6 @@ Style/GuardClause:
    - 'app/workers/redownload_media_worker.rb'
    - 'app/workers/remote_account_refresh_worker.rb'
    - 'config/initializers/devise.rb'
-    - 'db/migrate/20170901141119_truncate_preview_cards.rb'
-    - 'db/post_migrate/20220704024901_migrate_settings_to_user_roles.rb'
    - 'lib/devise/strategies/two_factor_ldap_authenticatable.rb'
    - 'lib/devise/strategies/two_factor_pam_authenticatable.rb'
    - 'lib/mastodon/cli/accounts.rb'
@ -317,7 +196,6 @@ Style/HashAsLastArrayItem:
    - 'app/models/status.rb'
    - 'app/services/batched_remove_status_service.rb'
    - 'app/services/notify_service.rb'
-    - 'db/migrate/20181024224956_migrate_account_conversations.rb'

 # This cop supports unsafe autocorrection (--autocorrect-all).
 Style/HashTransformValues:
@ -457,8 +335,8 @@ Style/TrailingCommaInHashLiteral:
    - 'config/environments/test.rb'

 # This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyle, MinSize, WordRegex.
+# Configuration parameters: WordRegex.
 # SupportedStyles: percent, brackets
 Style/WordArray:
-  Exclude:
-    - 'app/helpers/languages_helper.rb'
+  EnforcedStyle: percent
+  MinSize: 3
--- a/.yarn/patches/compression-webpack-plugin-npm-6.1.1-3a2a65987e.patch
+++ b/.yarn/patches/compression-webpack-plugin-npm-6.1.1-3a2a65987e.patch
@ -1,22 +0,0 @@
-diff --git a/dist/index.js b/dist/index.js
-index 57e375592d984e9a429bcd9f800fa2d15cd662e4..0c47d96df3608e23adfd77d887a8f72abbd501c0 100644
--- a/dist/index.js
-+++ b/dist/index.js
-@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
- });
- exports.default = void 0;
- 
-var _crypto = _interopRequireDefault(require("crypto"));
-+var _createHash = _interopRequireDefault(require("webpack/lib/util/createHash"));
- 
- var _path = _interopRequireDefault(require("path"));
- 
-@@ -227,7 +227,7 @@ class CompressionPlugin {
-             originalAlgorithm: this.options.algorithm,
-             compressionOptions: this.options.compressionOptions,
-             name,
-            contentHash: _crypto.default.createHash("md4").update(input).digest("hex")
-+            contentHash: _createHash.default("md4").update(input).digest("hex")
-           };
-         } else {
-           cacheData.name = (0, _serializeJavascript.default)({
--- a/1
+++ b/1
@ -103,6 +103,7 @@ RUN \
    procps \
    tini \
    tzdata \
+    wget \
  ; \
 # Patch Ruby to use jemalloc
  patchelf --add-needed libjemalloc.so.2 /usr/local/bin/ruby; \
--- a/8
+++ b/8
@ -39,15 +39,14 @@ end

 gem 'net-ldap', '~> 0.18'

-# TODO: Point back at released omniauth-cas gem when PR merged
-# https://github.com/dlindahl/omniauth-cas/pull/68
-gem 'omniauth-cas', github: 'stanhu/omniauth-cas', ref: '4211e6d05941b4a981f9a36b49ec166cecd0e271'
+gem 'omniauth-cas', '~> 3.0.0.beta.1'
 gem 'omniauth-saml', '~> 2.0'
 gem 'omniauth_openid_connect', '~> 0.6.1'
 gem 'omniauth', '~> 2.0'
 gem 'omniauth-rails_csrf_protection', '~> 1.0'

 gem 'color_diff', '~> 0.1'
+gem 'csv', '~> 3.2'
 gem 'discard', '~> 1.2'
 gem 'doorkeeper', '~> 5.6'
 gem 'ed25519', '~> 1.3'
@ -75,7 +74,6 @@ gem 'premailer-rails'
 gem 'rack-attack', '~> 6.6'
 gem 'rack-cors', '~> 2.0', require: 'rack/cors'
 gem 'rails-i18n', '~> 7.0'
-gem 'rails-settings-cached', '~> 0.6', git: 'https://github.com/mastodon/rails-settings-cached.git', branch: 'v0.6.6-aliases-true'
 gem 'redcarpet', '~> 3.6'
 gem 'redis', '~> 4.5', require: ['redis', 'redis/connection/hiredis']
 gem 'mario-redis-lock', '~> 1.2', require: 'redis_lock'
@ -90,7 +88,7 @@ gem 'sidekiq-bulk', '~> 0.2.0'
 gem 'simple-navigation', '~> 4.4'
 gem 'simple_form', '~> 5.2'
 gem 'stoplight', '~> 3.0.1'
-gem 'strong_migrations', '1.6.4'
+gem 'strong_migrations', '1.7.0'
 gem 'tty-prompt', '~> 0.23', require: false
 gem 'twitter-text', '~> 3.1.0'
 gem 'tzinfo-data', '~> 1.2023'
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -18,56 +18,38 @@ GIT
      sidekiq (>= 3.5)
      statsd-ruby (~> 1.4, >= 1.4.0)

-GIT
-  remote: https://github.com/mastodon/rails-settings-cached.git
-  revision: 86328ef0bd04ce21cc0504ff5e334591e8c2ccab
-  branch: v0.6.6-aliases-true
-  specs:
-    rails-settings-cached (0.6.6)
-      rails (>= 4.2.0)
-
-GIT
-  remote: https://github.com/stanhu/omniauth-cas.git
-  revision: 4211e6d05941b4a981f9a36b49ec166cecd0e271
-  ref: 4211e6d05941b4a981f9a36b49ec166cecd0e271
-  specs:
-    omniauth-cas (2.0.0)
-      addressable (~> 2.3)
-      nokogiri (~> 1.5)
-      omniauth (>= 1.2, < 3)
-
 GEM
  remote: https://rubygems.org/
  specs:
-    actioncable (7.1.2)
-      actionpack (= 7.1.2)
-      activesupport (= 7.1.2)
+    actioncable (7.1.3)
+      actionpack (= 7.1.3)
+      activesupport (= 7.1.3)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
      zeitwerk (~> 2.6)
-    actionmailbox (7.1.2)
-      actionpack (= 7.1.2)
-      activejob (= 7.1.2)
-      activerecord (= 7.1.2)
-      activestorage (= 7.1.2)
-      activesupport (= 7.1.2)
+    actionmailbox (7.1.3)
+      actionpack (= 7.1.3)
+      activejob (= 7.1.3)
+      activerecord (= 7.1.3)
+      activestorage (= 7.1.3)
+      activesupport (= 7.1.3)
      mail (>= 2.7.1)
      net-imap
      net-pop
      net-smtp
-    actionmailer (7.1.2)
-      actionpack (= 7.1.2)
-      actionview (= 7.1.2)
-      activejob (= 7.1.2)
-      activesupport (= 7.1.2)
+    actionmailer (7.1.3)
+      actionpack (= 7.1.3)
+      actionview (= 7.1.3)
+      activejob (= 7.1.3)
+      activesupport (= 7.1.3)
      mail (~> 2.5, >= 2.5.4)
      net-imap
      net-pop
      net-smtp
      rails-dom-testing (~> 2.2)
-    actionpack (7.1.2)
-      actionview (= 7.1.2)
-      activesupport (= 7.1.2)
+    actionpack (7.1.3)
+      actionview (= 7.1.3)
+      activesupport (= 7.1.3)
      nokogiri (>= 1.8.5)
      racc
      rack (>= 2.2.4)
@ -75,15 +57,15 @@ GEM
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.2)
      rails-html-sanitizer (~> 1.6)
-    actiontext (7.1.2)
-      actionpack (= 7.1.2)
-      activerecord (= 7.1.2)
-      activestorage (= 7.1.2)
-      activesupport (= 7.1.2)
+    actiontext (7.1.3)
+      actionpack (= 7.1.3)
+      activerecord (= 7.1.3)
+      activestorage (= 7.1.3)
+      activesupport (= 7.1.3)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (7.1.2)
-      activesupport (= 7.1.2)
+    actionview (7.1.3)
+      activesupport (= 7.1.3)
      builder (~> 3.1)
      erubi (~> 1.11)
      rails-dom-testing (~> 2.2)
@ -93,22 +75,22 @@ GEM
      activemodel (>= 4.1)
      case_transform (>= 0.2)
      jsonapi-renderer (>= 0.1.1.beta1, < 0.3)
-    activejob (7.1.2)
-      activesupport (= 7.1.2)
+    activejob (7.1.3)
+      activesupport (= 7.1.3)
      globalid (>= 0.3.6)
-    activemodel (7.1.2)
-      activesupport (= 7.1.2)
-    activerecord (7.1.2)
-      activemodel (= 7.1.2)
-      activesupport (= 7.1.2)
+    activemodel (7.1.3)
+      activesupport (= 7.1.3)
+    activerecord (7.1.3)
+      activemodel (= 7.1.3)
+      activesupport (= 7.1.3)
      timeout (>= 0.4.0)
-    activestorage (7.1.2)
-      actionpack (= 7.1.2)
-      activejob (= 7.1.2)
-      activerecord (= 7.1.2)
-      activesupport (= 7.1.2)
+    activestorage (7.1.3)
+      actionpack (= 7.1.3)
+      activejob (= 7.1.3)
+      activerecord (= 7.1.3)
+      activesupport (= 7.1.3)
      marcel (~> 1.0)
-    activesupport (7.1.2)
+    activesupport (7.1.3)
      base64
      bigdecimal
      concurrent-ruby (~> 1.0, >= 1.0.2)
@ -131,20 +113,20 @@ GEM
    attr_required (1.0.1)
    awrence (1.2.1)
    aws-eventstream (1.3.0)
-    aws-partitions (1.857.0)
-    aws-sdk-core (3.188.0)
-      aws-eventstream (~> 1, >= 1.0.2)
+    aws-partitions (1.873.0)
+    aws-sdk-core (3.190.1)
+      aws-eventstream (~> 1, >= 1.3.0)
      aws-partitions (~> 1, >= 1.651.0)
-      aws-sigv4 (~> 1.5)
+      aws-sigv4 (~> 1.8)
      jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.73.0)
+    aws-sdk-kms (1.75.0)
      aws-sdk-core (~> 3, >= 3.188.0)
      aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.140.0)
-      aws-sdk-core (~> 3, >= 3.188.0)
+    aws-sdk-s3 (1.142.0)
+      aws-sdk-core (~> 3, >= 3.189.0)
      aws-sdk-kms (~> 1)
-      aws-sigv4 (~> 1.6)
-    aws-sigv4 (1.7.0)
+      aws-sigv4 (~> 1.8)
+    aws-sigv4 (1.8.0)
      aws-eventstream (~> 1, >= 1.0.2)
    azure-storage-blob (2.0.3)
      azure-storage-common (~> 2.0)
@ -173,9 +155,10 @@ GEM
    binding_of_caller (1.0.0)
      debug_inspector (>= 0.0.1)
    blurhash (0.1.7)
-    bootsnap (1.17.0)
+    bootsnap (1.17.1)
      msgpack (~> 1.2)
-    brakeman (6.1.0)
+    brakeman (6.1.1)
+      racc
    browser (5.3.1)
    brpoplpush-redis_script (0.1.3)
      concurrent-ruby (~> 1.0, >= 1.0.5)
@ -205,7 +188,7 @@ GEM
    climate_control (0.2.0)
    cocoon (1.2.15)
    color_diff (0.1)
-    concurrent-ruby (1.2.2)
+    concurrent-ruby (1.2.3)
    connection_pool (2.4.1)
    cose (1.3.0)
      cbor (~> 0.5.9)
@ -215,12 +198,13 @@ GEM
    crass (1.0.6)
    css_parser (1.14.0)
      addressable
+    csv (3.2.8)
    database_cleaner-active_record (2.1.0)
      activerecord (>= 5.a)
      database_cleaner-core (~> 2.0.0)
    database_cleaner-core (2.0.1)
    date (3.3.4)
-    debug (1.9.0)
+    debug (1.9.1)
      irb (~> 1.10)
      reline (>= 0.3.8)
    debug_inspector (1.1.0)
@ -271,9 +255,9 @@ GEM
    erubi (1.12.0)
    et-orbi (1.2.7)
      tzinfo
-    excon (0.104.0)
+    excon (0.109.0)
    fabrication (2.31.0)
-    faker (3.2.2)
+    faker (3.2.3)
      i18n (>= 1.8.11, < 2)
    faraday (1.10.3)
      faraday-em_http (~> 1.0)
@ -301,12 +285,12 @@ GEM
    faraday_middleware (1.2.0)
      faraday (~> 1.0)
    fast_blank (1.0.1)
-    fastimage (2.2.7)
+    fastimage (2.3.0)
    ffi (1.15.5)
    ffi-compiler (1.0.1)
      ffi (>= 1.0.0)
      rake
-    fog-core (2.3.0)
+    fog-core (2.4.0)
      builder
      excon (~> 0.71)
      formatador (>= 0.2, < 2.0)
@ -335,8 +319,8 @@ GEM
      activesupport (>= 5.1)
      haml (>= 4.0.6)
      railties (>= 5.1)
-    haml_lint (0.52.0)
-      haml (>= 4.0)
+    haml_lint (0.53.0)
+      haml (>= 5.0)
      parallel (~> 1.10)
      rainbow
      rubocop (>= 1.0)
@ -376,10 +360,10 @@ GEM
      rainbow (>= 2.2.2, < 4.0)
      terminal-table (>= 1.5.1)
    idn-ruby (0.1.5)
-    io-console (0.6.0)
-    irb (1.10.1)
+    io-console (0.7.1)
+    irb (1.11.1)
      rdoc
-      reline (>= 0.3.8)
+      reline (>= 0.4.2)
    jmespath (1.6.2)
    json (2.7.1)
    json-canonicalization (1.0.0)
@ -456,9 +440,9 @@ GEM
      azure-storage-blob (~> 2.0.1)
      hashie (~> 5.0)
    memory_profiler (1.0.1)
-    mime-types (3.5.1)
+    mime-types (3.5.2)
      mime-types-data (~> 3.2015)
-    mime-types-data (3.2023.1003)
+    mime-types-data (3.2023.1205)
    mini_mime (1.1.5)
    mini_portile2 (2.8.5)
    minitest (5.20.0)
@ -466,22 +450,22 @@ GEM
    multi_json (1.15.0)
    multipart-post (2.3.0)
    mutex_m (0.2.0)
-    net-http (0.4.0)
+    net-http (0.4.1)
      uri
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
-    net-imap (0.4.4)
+    net-imap (0.4.9.1)
      date
      net-protocol
-    net-ldap (0.18.0)
+    net-ldap (0.19.0)
    net-pop (0.1.2)
      net-protocol
    net-protocol (0.2.2)
      timeout
-    net-smtp (0.4.0)
+    net-smtp (0.4.0.1)
      net-protocol
    nio4r (2.5.9)
-    nokogiri (1.15.5)
+    nokogiri (1.16.0)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
    oj (3.16.3)
@ -490,6 +474,10 @@ GEM
      hashie (>= 3.4.6)
      rack (>= 2.2.3)
      rack-protection
+    omniauth-cas (3.0.0.beta.1)
+      addressable (~> 2.8)
+      nokogiri (~> 1.12)
+      omniauth (~> 2.1)
    omniauth-rails_csrf_protection (1.0.1)
      actionpack (>= 4.2)
      omniauth (~> 2.0)
@ -510,7 +498,7 @@ GEM
      validate_email
      validate_url
      webfinger (~> 1.2)
-    openssl (3.1.0)
+    openssl (3.2.0)
    openssl-signature_algorithm (1.3.0)
      openssl (> 2.0)
    orm_adapter (0.5.0)
@ -540,10 +528,10 @@ GEM
      activesupport (>= 7.0.0)
      rack
      railties (>= 7.0.0)
-    psych (5.1.1.1)
+    psych (5.1.2)
      stringio
    public_suffix (5.0.4)
-    puma (6.4.0)
+    puma (6.4.2)
      nio4r (~> 2.0)
    pundit (2.3.1)
      activesupport (>= 3.0.0)
@ -564,27 +552,27 @@ GEM
      rack
    rack-proxy (0.7.6)
      rack
-    rack-session (1.0.1)
+    rack-session (1.0.2)
      rack (< 3)
    rack-test (2.1.0)
      rack (>= 1.3)
    rackup (1.0.0)
      rack (< 3)
      webrick
-    rails (7.1.2)
-      actioncable (= 7.1.2)
-      actionmailbox (= 7.1.2)
-      actionmailer (= 7.1.2)
-      actionpack (= 7.1.2)
-      actiontext (= 7.1.2)
-      actionview (= 7.1.2)
-      activejob (= 7.1.2)
-      activemodel (= 7.1.2)
-      activerecord (= 7.1.2)
-      activestorage (= 7.1.2)
-      activesupport (= 7.1.2)
+    rails (7.1.3)
+      actioncable (= 7.1.3)
+      actionmailbox (= 7.1.3)
+      actionmailer (= 7.1.3)
+      actionpack (= 7.1.3)
+      actiontext (= 7.1.3)
+      actionview (= 7.1.3)
+      activejob (= 7.1.3)
+      activemodel (= 7.1.3)
+      activerecord (= 7.1.3)
+      activestorage (= 7.1.3)
+      activesupport (= 7.1.3)
      bundler (>= 1.15.0)
-      railties (= 7.1.2)
+      railties (= 7.1.3)
    rails-controller-testing (1.0.5)
      actionpack (>= 5.0.1.rc1)
      actionview (>= 5.0.1.rc1)
@ -599,9 +587,9 @@ GEM
    rails-i18n (7.0.8)
      i18n (>= 0.7, < 2)
      railties (>= 6.0.0, < 8)
-    railties (7.1.2)
-      actionpack (= 7.1.2)
-      activesupport (= 7.1.2)
+    railties (7.1.3)
+      actionpack (= 7.1.3)
+      activesupport (= 7.1.3)
      irb
      rackup (>= 1.0.0)
      rake (>= 12.2)
@ -614,7 +602,7 @@ GEM
      link_header (~> 0.0, >= 0.0.8)
    rdf-normalize (0.6.1)
      rdf (~> 3.2)
-    rdoc (6.6.1)
+    rdoc (6.6.2)
      psych (>= 4.0.0)
    redcarpet (3.6.0)
    redis (4.8.1)
@ -623,7 +611,7 @@ GEM
    redlock (1.3.2)
      redis (>= 3.0.0, < 6.0)
    regexp_parser (2.8.3)
-    reline (0.4.1)
+    reline (0.4.2)
      io-console (~> 0.5)
    request_store (1.5.1)
      rack (>= 1.4)
@ -675,23 +663,23 @@ GEM
      unicode-display_width (>= 2.4.0, < 3.0)
    rubocop-ast (1.30.0)
      parser (>= 3.2.1.0)
-    rubocop-capybara (2.19.0)
+    rubocop-capybara (2.20.0)
      rubocop (~> 1.41)
-    rubocop-factory_bot (2.24.0)
+    rubocop-factory_bot (2.25.0)
      rubocop (~> 1.33)
-    rubocop-performance (1.20.0)
+    rubocop-performance (1.20.2)
      rubocop (>= 1.48.1, < 2.0)
      rubocop-ast (>= 1.30.0, < 2.0)
-    rubocop-rails (2.23.0)
+    rubocop-rails (2.23.1)
      activesupport (>= 4.2.0)
      rack (>= 1.1)
      rubocop (>= 1.33.0, < 2.0)
      rubocop-ast (>= 1.30.0, < 2.0)
-    rubocop-rspec (2.25.0)
+    rubocop-rspec (2.26.1)
      rubocop (~> 1.40)
      rubocop-capybara (~> 2.17)
      rubocop-factory_bot (~> 2.22)
-    ruby-prof (1.6.3)
+    ruby-prof (1.7.0)
    ruby-progressbar (1.13.0)
    ruby-saml (1.15.0)
      nokogiri (>= 1.13.10)
@ -723,7 +711,7 @@ GEM
      rufus-scheduler (~> 3.2)
      sidekiq (>= 6, < 8)
      tilt (>= 1.4.0)
-    sidekiq-unique-jobs (7.1.30)
+    sidekiq-unique-jobs (7.1.31)
      brpoplpush-redis_script (> 0.1.1, <= 2.0.0)
      concurrent-ruby (~> 1.0, >= 1.0.5)
      redis (< 5.0)
@ -742,12 +730,12 @@ GEM
    simplecov-lcov (0.8.0)
    simplecov_json_formatter (0.1.4)
    smart_properties (1.17.0)
-    stackprof (0.2.25)
+    stackprof (0.2.26)
    statsd-ruby (1.5.0)
    stoplight (3.0.2)
      redlock (~> 1.0)
    stringio (3.1.0)
-    strong_migrations (1.6.4)
+    strong_migrations (1.7.0)
      activerecord (>= 5.2)
    swd (1.3.0)
      activesupport (>= 3)
@ -782,7 +770,7 @@ GEM
      unf (~> 0.1.0)
    tzinfo (2.0.6)
      concurrent-ruby (~> 1.0)
-    tzinfo-data (1.2023.3)
+    tzinfo-data (1.2023.4)
      tzinfo (>= 1.0.0)
    unf (0.1.4)
      unf_ext
@ -797,7 +785,7 @@ GEM
      public_suffix
    warden (1.2.9)
      rack (>= 2.0.9)
-    webauthn (3.0.0)
+    webauthn (3.1.0)
      android_key_attestation (~> 0.3.0)
      awrence (~> 1.1)
      bindata (~> 2.4)
@ -852,6 +840,7 @@ DEPENDENCIES
  color_diff (~> 0.1)
  concurrent-ruby
  connection_pool
+  csv (~> 3.2)
  database_cleaner-active_record
  debug (~> 1.8)
  devise (~> 4.9)
@ -899,7 +888,7 @@ DEPENDENCIES
  nsa!
  oj (~> 3.14)
  omniauth (~> 2.0)
-  omniauth-cas!
+  omniauth-cas (~> 3.0.0.beta.1)
  omniauth-rails_csrf_protection (~> 1.0)
  omniauth-saml (~> 2.0)
  omniauth_openid_connect (~> 0.6.1)
@ -921,7 +910,6 @@ DEPENDENCIES
  rails (~> 7.1.1)
  rails-controller-testing (~> 1.0)
  rails-i18n (~> 7.0)
-  rails-settings-cached (~> 0.6)!
  rdf-normalize (~> 0.5)
  redcarpet (~> 3.6)
  redis (~> 4.5)
@ -951,7 +939,7 @@ DEPENDENCIES
  simplecov-lcov (~> 0.8)
  stackprof
  stoplight (~> 3.0.1)
-  strong_migrations (= 1.6.4)
+  strong_migrations (= 1.7.0)
  test-prof
  thor (~> 1.2)
  tty-prompt (~> 0.23)
@ -967,4 +955,4 @@ RUBY VERSION
   ruby 3.2.2p53

 BUNDLED WITH
-   2.4.20
+   2.5.4
--- a/SECURITY.md
+++ b/SECURITY.md
@ -13,10 +13,8 @@ A "vulnerability in Mastodon" is a vulnerability in the code distributed through

 ## Supported Versions

-| Version | Supported        |
-| ------- | ---------------- |
-| 4.2.x   | Yes              |
-| 4.1.x   | Yes              |
-| 4.0.x   | No               |
-| 3.5.x   | Until 2023-12-31 |
-| < 3.5   | No               |
+| Version | Supported |
+| ------- | --------- |
+| 4.2.x   | Yes       |
+| 4.1.x   | Yes       |
+| < 4.1   | No        |
--- a/app/controllers/admin/confirmations_controller.rb
+++ b/app/controllers/admin/confirmations_controller.rb
@ -7,7 +7,7 @@ module Admin

    def create
      authorize @user, :confirm?
-      @user.confirm!
+      @user.mark_email_as_confirmed!
      log_action :confirm, @user
      redirect_to admin_accounts_path
    end
--- a/app/controllers/admin/email_domain_blocks_controller.rb
+++ b/app/controllers/admin/email_domain_blocks_controller.rb
@ -40,7 +40,7 @@ module Admin
          (@email_domain_block.other_domains || []).uniq.each do |domain|
            next if EmailDomainBlock.where(domain: domain).exists?

-            other_email_domain_block = EmailDomainBlock.create!(domain: domain, parent: @email_domain_block)
+            other_email_domain_block = EmailDomainBlock.create!(domain: domain, allow_with_approval: @email_domain_block.allow_with_approval, parent: @email_domain_block)
            log_action :create, other_email_domain_block
          end
        end
@ -65,7 +65,7 @@ module Admin
    end

    def resource_params
-      params.require(:email_domain_block).permit(:domain, other_domains: [])
+      params.require(:email_domain_block).permit(:domain, :allow_with_approval, other_domains: [])
    end

    def form_email_domain_block_batch_params
--- a/app/controllers/admin/export_domain_blocks_controller.rb
+++ b/app/controllers/admin/export_domain_blocks_controller.rb
@ -68,7 +68,7 @@ module Admin

    def export_data
      CSV.generate(headers: export_headers, write_headers: true) do |content|
-        DomainBlock.with_limitations.each do |instance|
+        DomainBlock.with_limitations.order(id: :asc).each do |instance|
          content << [instance.domain, instance.severity, instance.reject_media, instance.reject_reports, instance.public_comment, instance.obfuscate]
        end
      end
--- a/app/controllers/admin/follow_recommendations_controller.rb
+++ b/app/controllers/admin/follow_recommendations_controller.rb
@ -8,7 +8,7 @@ module Admin
      authorize :follow_recommendation, :show?

      @form     = Form::AccountBatch.new
-      @accounts = filtered_follow_recommendations
+      @accounts = filtered_follow_recommendations.page(params[:page])
    end

    def update
--- a/app/controllers/api/v1/admin/email_domain_blocks_controller.rb
+++ b/app/controllers/api/v1/admin/email_domain_blocks_controller.rb
@ -55,7 +55,7 @@ class Api::V1::Admin::EmailDomainBlocksController < Api::BaseController
  end

  def resource_params
-    params.permit(:domain)
+    params.permit(:domain, :allow_with_approval)
  end

  def insert_pagination_headers
--- a/app/controllers/api/v1/markers_controller.rb
+++ b/app/controllers/api/v1/markers_controller.rb
@ -19,7 +19,7 @@ class Api::V1::MarkersController < Api::BaseController
      @markers = {}

      resource_params.each_pair do |timeline, timeline_params|
-        @markers[timeline] = current_user.markers.find_or_initialize_by(timeline: timeline)
+        @markers[timeline] = current_user.markers.find_or_create_by(timeline: timeline)
        @markers[timeline].update!(timeline_params)
      end
    end
--- a/app/controllers/api/v1/streaming_controller.rb
+++ b/app/controllers/api/v1/streaming_controller.rb
@ -2,7 +2,7 @@

 class Api::V1::StreamingController < Api::BaseController
  def index
-    if Rails.configuration.x.streaming_api_base_url == request.host
+    if same_host?
      not_found
    else
      redirect_to streaming_api_url, status: 301, allow_other_host: true
@ -11,9 +11,16 @@ class Api::V1::StreamingController < Api::BaseController

  private

+  def same_host?
+    base_url = Addressable::URI.parse(Rails.configuration.x.streaming_api_base_url)
+    request.host == base_url.host && request.port == (base_url.port || 80)
+  end
+
  def streaming_api_url
    Addressable::URI.parse(request.url).tap do |uri|
-      uri.host = Addressable::URI.parse(Rails.configuration.x.streaming_api_base_url).host
+      base_url = Addressable::URI.parse(Rails.configuration.x.streaming_api_base_url)
+      uri.host = base_url.host
+      uri.port = base_url.port
    end.to_s
  end
 end
--- a/app/controllers/api/v1/suggestions_controller.rb
+++ b/app/controllers/api/v1/suggestions_controller.rb
@ -3,22 +3,23 @@
 class Api::V1::SuggestionsController < Api::BaseController
  include Authorization

-  before_action -> { doorkeeper_authorize! :read }
+  before_action -> { doorkeeper_authorize! :read, :'read:accounts' }, only: :index
+  before_action -> { doorkeeper_authorize! :write, :'write:accounts' }, except: :index
  before_action :require_user!
+  before_action :set_suggestions

  def index
-    suggestions = suggestions_source.get(current_account, limit: limit_param(DEFAULT_ACCOUNTS_LIMIT))
-    render json: suggestions.map(&:account), each_serializer: REST::AccountSerializer
+    render json: @suggestions.get(limit_param(DEFAULT_ACCOUNTS_LIMIT), params[:offset].to_i).map(&:account), each_serializer: REST::AccountSerializer
  end

  def destroy
-    suggestions_source.remove(current_account, params[:id])
+    @suggestions.remove(params[:id])
    render_empty
  end

  private

-  def suggestions_source
-    AccountSuggestions::PastInteractionsSource.new
+  def set_suggestions
+    @suggestions = AccountSuggestions.new(current_account)
  end
 end
--- a/app/controllers/api/v2/suggestions_controller.rb
+++ b/app/controllers/api/v2/suggestions_controller.rb
@ -3,17 +3,23 @@
 class Api::V2::SuggestionsController < Api::BaseController
  include Authorization

-  before_action -> { doorkeeper_authorize! :read }
+  before_action -> { doorkeeper_authorize! :read, :'read:accounts' }, only: :index
+  before_action -> { doorkeeper_authorize! :write, :'write:accounts' }, except: :index
  before_action :require_user!
  before_action :set_suggestions

  def index
-    render json: @suggestions, each_serializer: REST::SuggestionSerializer
+    render json: @suggestions.get(limit_param(DEFAULT_ACCOUNTS_LIMIT), params[:offset].to_i), each_serializer: REST::SuggestionSerializer
+  end
+
+  def destroy
+    @suggestions.remove(params[:id])
+    render_empty
  end

  private

  def set_suggestions
-    @suggestions = AccountSuggestions.get(current_account, limit_param(DEFAULT_ACCOUNTS_LIMIT))
+    @suggestions = AccountSuggestions.new(current_account)
  end
 end
--- a/app/controllers/concerns/cache_concern.rb
+++ b/app/controllers/concerns/cache_concern.rb
@ -3,150 +3,6 @@
 module CacheConcern
  extend ActiveSupport::Concern

-  module ActiveRecordCoder
-    EMPTY_HASH = {}.freeze
-
-    class << self
-      def dump(record)
-        instances = InstanceTracker.new
-        serialized_associations = serialize_associations(record, instances)
-        serialized_records = instances.map { |r| serialize_record(r) }
-        [serialized_associations, *serialized_records]
-      end
-
-      def load(payload)
-        instances = InstanceTracker.new
-        serialized_associations, *serialized_records = payload
-        serialized_records.each { |attrs| instances.push(deserialize_record(*attrs)) }
-        deserialize_associations(serialized_associations, instances)
-      end
-
-      private
-
-      # Records without associations, or which have already been visited before,
-      # are serialized by their id alone.
-      #
-      # Records with associations are serialized as a two-element array including
-      # their id and the record's association cache.
-      #
-      def serialize_associations(record, instances)
-        return unless record
-
-        if (id = instances.lookup(record))
-          payload = id
-        else
-          payload = instances.push(record)
-
-          cached_associations = record.class.reflect_on_all_associations.select do |reflection|
-            record.association_cached?(reflection.name)
-          end
-
-          unless cached_associations.empty?
-            serialized_associations = cached_associations.map do |reflection|
-              association = record.association(reflection.name)
-
-              serialized_target = if reflection.collection?
-                                    association.target.map { |target_record| serialize_associations(target_record, instances) }
-                                  else
-                                    serialize_associations(association.target, instances)
-                                  end
-
-              [reflection.name, serialized_target]
-            end
-
-            payload = [payload, serialized_associations]
-          end
-        end
-
-        payload
-      end
-
-      def deserialize_associations(payload, instances)
-        return unless payload
-
-        id, associations = payload
-        record = instances.fetch(id)
-
-        associations&.each do |name, serialized_target|
-          begin
-            association = record.association(name)
-          rescue ActiveRecord::AssociationNotFoundError
-            raise AssociationMissingError, "undefined association: #{name}"
-          end
-
-          target = if association.reflection.collection?
-                     serialized_target.map! { |serialized_record| deserialize_associations(serialized_record, instances) }
-                   else
-                     deserialize_associations(serialized_target, instances)
-                   end
-
-          association.target = target
-        end
-
-        record
-      end
-
-      def serialize_record(record)
-        arguments = [record.class.name, attributes_for_database(record)]
-        arguments << true if record.new_record?
-        arguments
-      end
-
-      def attributes_for_database(record)
-        attributes = record.attributes_for_database
-        attributes.transform_values! { |attr| attr.is_a?(::ActiveModel::Type::Binary::Data) ? attr.to_s : attr }
-        attributes
-      end
-
-      def deserialize_record(class_name, attributes_from_database, new_record = false) # rubocop:disable Style/OptionalBooleanParameter
-        begin
-          klass = Object.const_get(class_name)
-        rescue NameError
-          raise ClassMissingError, "undefined class: #{class_name}"
-        end
-
-        # Ideally we'd like to call `klass.instantiate`, however it doesn't allow to pass
-        # wether the record was persisted or not.
-        attributes = klass.attributes_builder.build_from_database(attributes_from_database, EMPTY_HASH)
-        klass.allocate.init_with_attributes(attributes, new_record)
-      end
-    end
-
-    class Error < StandardError
-    end
-
-    class ClassMissingError < Error
-    end
-
-    class AssociationMissingError < Error
-    end
-
-    class InstanceTracker
-      def initialize
-        @instances = []
-        @ids = {}.compare_by_identity
-      end
-
-      def map(&block)
-        @instances.map(&block)
-      end
-
-      def fetch(...)
-        @instances.fetch(...)
-      end
-
-      def push(instance)
-        id = @ids[instance] = @instances.size
-        @instances << instance
-        id
-      end
-
-      def lookup(instance)
-        @ids[instance]
-      end
-    end
-  end
-
  class_methods do
    def vary_by(value, **kwargs)
      before_action(**kwargs) do |controller|
@ -196,11 +52,7 @@ module CacheConcern
    raw = raw.cache_ids.to_a if raw.is_a?(ActiveRecord::Relation)
    return [] if raw.empty?

-    cached_keys_with_value = begin
-      Rails.cache.read_multi(*raw).transform_keys(&:id).transform_values { |r| ActiveRecordCoder.load(r) }
-    rescue ActiveRecordCoder::Error
-      {} # The serialization format may have changed, let's pretend it's a cache miss.
-    end
+    cached_keys_with_value = Rails.cache.read_multi(*raw).transform_keys(&:id)

    uncached_ids = raw.map(&:id) - cached_keys_with_value.keys

@ -208,10 +60,7 @@ module CacheConcern

    unless uncached_ids.empty?
      uncached = klass.where(id: uncached_ids).with_includes.index_by(&:id)
-
-      uncached.each_value do |item|
-        Rails.cache.write(item, ActiveRecordCoder.dump(item))
-      end
+      Rails.cache.write_multi(uncached.values.to_h { |i| [i, i] })
    end

    raw.filter_map { |item| cached_keys_with_value[item.id] || uncached[item.id] }
--- a/app/controllers/concerns/signature_verification.rb
+++ b/app/controllers/concerns/signature_verification.rb
@ -91,14 +91,23 @@ module SignatureVerification
    raise SignatureVerificationError, "Public key not found for key #{signature_params['keyId']}" if actor.nil?

    signature             = Base64.decode64(signature_params['signature'])
-    compare_signed_string = build_signed_string
+    compare_signed_string = build_signed_string(include_query_string: true)

    return actor unless verify_signature(actor, signature, compare_signed_string).nil?

+    # Compatibility quirk with older Mastodon versions
+    compare_signed_string = build_signed_string(include_query_string: false)
+    return actor unless verify_signature(actor, signature, compare_signed_string).nil?
+
    actor = stoplight_wrap_request { actor_refresh_key!(actor) }

    raise SignatureVerificationError, "Could not refresh public key #{signature_params['keyId']}" if actor.nil?

+    compare_signed_string = build_signed_string(include_query_string: true)
+    return actor unless verify_signature(actor, signature, compare_signed_string).nil?
+
+    # Compatibility quirk with older Mastodon versions
+    compare_signed_string = build_signed_string(include_query_string: false)
    return actor unless verify_signature(actor, signature, compare_signed_string).nil?

    fail_with! "Verification failed for #{actor.to_log_human_identifier} #{actor.uri} using rsa-sha256 (RSASSA-PKCS1-v1_5 with SHA-256)", signed_string: compare_signed_string, signature: signature_params['signature']
@ -180,11 +189,18 @@ module SignatureVerification
    nil
  end

-  def build_signed_string
+  def build_signed_string(include_query_string: true)
    signed_headers.map do |signed_header|
      case signed_header
      when Request::REQUEST_TARGET
-        "#{Request::REQUEST_TARGET}: #{request.method.downcase} #{request.path}"
+        if include_query_string
+          "#{Request::REQUEST_TARGET}: #{request.method.downcase} #{request.original_fullpath}"
+        else
+          # Current versions of Mastodon incorrectly omit the query string from the (request-target) pseudo-header.
+          # Therefore, temporarily support such incorrect signatures for compatibility.
+          # TODO: remove eventually some time after release of the fixed version
+          "#{Request::REQUEST_TARGET}: #{request.method.downcase} #{request.path}"
+        end
      when '(created)'
        raise SignatureVerificationError, 'Invalid pseudo-header (created) for rsa-sha256' unless signature_algorithm == 'hs2019'
        raise SignatureVerificationError, 'Pseudo-header (created) used but corresponding argument missing' if signature_params['created'].blank?
--- a/app/controllers/custom_css_controller.rb
+++ b/app/controllers/custom_css_controller.rb
@ -1,8 +1,21 @@
 # frozen_string_literal: true

 class CustomCssController < ActionController::Base # rubocop:disable Rails/ApplicationController
+  before_action :set_user_roles
+
  def show
    expires_in 3.minutes, public: true
    render content_type: 'text/css'
  end
+
+  private
+
+  def custom_css_styles
+    Setting.custom_css
+  end
+  helper_method :custom_css_styles
+
+  def set_user_roles
+    @user_roles = UserRole.where(highlighted: true).where.not(color: [nil, ''])
+  end
 end
--- a/app/controllers/health_controller.rb
+++ b/app/controllers/health_controller.rb
@ -1,6 +1,6 @@
 # frozen_string_literal: true

-class HealthController < ActionController::Base
+class HealthController < ActionController::Base # rubocop:disable Rails/ApplicationController
  def show
    render plain: 'OK'
  end
--- a/app/controllers/well_known/webfinger_controller.rb
+++ b/app/controllers/well_known/webfinger_controller.rb
@ -21,7 +21,7 @@ module WellKnown
      username = username_from_resource

      @account = begin
-        if username == Rails.configuration.x.local_domain
+        if username == Rails.configuration.x.local_domain || username == Rails.configuration.x.web_domain
          Account.representative
        else
          Account.find_local!(username)
--- a/app/helpers/accounts_helper.rb
+++ b/app/helpers/accounts_helper.rb
@ -31,22 +31,26 @@ module AccountsHelper
    Setting.hide_followers_count || account.user&.settings&.[]('hide_followers_count')
  end

+  def account_formatted_stat(value)
+    number_to_human(value, precision: 3, strip_insignificant_zeros: true)
+  end
+
  def account_description(account)
    prepend_stats = [
      [
-        number_to_human(account.statuses_count, precision: 3, strip_insignificant_zeros: true),
+        account_formatted_stat(account.statuses_count),
        I18n.t('accounts.posts', count: account.statuses_count),
      ].join(' '),

      [
-        number_to_human(account.following_count, precision: 3, strip_insignificant_zeros: true),
+        account_formatted_stat(account.following_count),
        I18n.t('accounts.following', count: account.following_count),
      ].join(' '),
    ]

    unless hide_followers_count?(account)
      prepend_stats << [
-        number_to_human(account.followers_count, precision: 3, strip_insignificant_zeros: true),
+        account_formatted_stat(account.followers_count),
        I18n.t('accounts.followers', count: account.followers_count),
      ].join(' ')
    end
--- a/app/helpers/admin/settings_helper.rb
+++ b/app/helpers/admin/settings_helper.rb
@ -4,4 +4,60 @@ module Admin::SettingsHelper
  def captcha_available?
    ENV['HCAPTCHA_SECRET_KEY'].present? && ENV['HCAPTCHA_SITE_KEY'].present?
  end
+
+  def login_activity_title(activity)
+    t(
+      "login_activities.#{login_activity_key(activity)}",
+      method: login_activity_method(activity),
+      ip: login_activity_ip(activity),
+      browser: login_activity_browser(activity)
+    )
+  end
+
+  private
+
+  def login_activity_key(activity)
+    activity.success? ? 'successful_sign_in_html' : 'failed_sign_in_html'
+  end
+
+  def login_activity_method(activity)
+    content_tag(
+      :span,
+      login_activity_method_string(activity),
+      class: 'target'
+    )
+  end
+
+  def login_activity_ip(activity)
+    content_tag(
+      :span,
+      activity.ip,
+      class: 'target'
+    )
+  end
+
+  def login_activity_browser(activity)
+    content_tag(
+      :span,
+      login_activity_browser_description(activity),
+      class: 'target',
+      title: activity.user_agent
+    )
+  end
+
+  def login_activity_method_string(activity)
+    if activity.omniauth?
+      t("auth.providers.#{activity.provider}")
+    else
+      t("login_activities.authentication_methods.#{activity.authentication_method}")
+    end
+  end
+
+  def login_activity_browser_description(activity)
+    t(
+      'sessions.description',
+      browser: t(activity.browser, scope: 'sessions.browsers', default: activity.browser.to_s),
+      platform: t(activity.platform, scope: 'sessions.platforms', default: activity.platform.to_s)
+    )
+  end
 end
--- a/app/helpers/languages_helper.rb
+++ b/app/helpers/languages_helper.rb
@ -224,7 +224,7 @@ module LanguagesHelper
    'en-GB': 'English (British)',
    'es-AR': 'Español (Argentina)',
    'es-MX': 'Español (México)',
-    'fr-QC': 'Français (Canadien)',
+    'fr-CA': 'Français (Canadien)',
    'pt-BR': 'Português (Brasil)',
    'pt-PT': 'Português (Portugal)',
    'sr-Latn': 'Srpski (latinica)',
--- a/app/helpers/mascot_helper.rb
+++ b/app/helpers/mascot_helper.rb
@ -2,7 +2,7 @@

 module MascotHelper
  def mascot_url
-    full_asset_url(instance_presenter.mascot&.file&.url || asset_pack_path('media/images/elephant_ui_plane.svg'))
+    full_asset_url(instance_presenter.mascot&.file&.url || frontend_asset_path('images/elephant_ui_plane.svg'))
  end

  def instance_presenter
--- a/app/helpers/routing_helper.rb
+++ b/app/helpers/routing_helper.rb
@ -24,8 +24,12 @@ module RoutingHelper
    Rails.configuration.action_controller.asset_host || root_url
  end

-  def full_pack_url(source, **options)
-    full_asset_url(asset_pack_path(source, **options))
+  def frontend_asset_path(source, **options)
+    asset_pack_path("media/#{source}", **options)
+  end
+
+  def frontend_asset_url(source, **options)
+    full_asset_url(frontend_asset_path(source, **options))
  end

  def use_storage?
--- a/app/helpers/settings_helper.rb
+++ b/app/helpers/settings_helper.rb
@ -9,6 +9,19 @@ module SettingsHelper
    LanguagesHelper.sorted_locale_keys(I18n.available_locales)
  end

+  def featured_tags_hint(recently_used_tags)
+    safe_join(
+      [
+        t('simple_form.hints.featured_tag.name'),
+        safe_join(
+          links_for_featured_tags(recently_used_tags),
+          ', '
+        ),
+      ],
+      ' '
+    )
+  end
+
  def session_device_icon(session)
    device = session.detection.device

@ -28,4 +41,18 @@ module SettingsHelper
      safe_join([image_tag(account.avatar.url, width: 15, height: 15, alt: '', class: 'avatar'), content_tag(:span, account.acct, class: 'username')], ' ')
    end
  end
+
+  private
+
+  def links_for_featured_tags(tags)
+    tags.map { |tag| post_link_to_featured_tag(tag) }
+  end
+
+  def post_link_to_featured_tag(tag)
+    link_to(
+      "##{tag.display_name}",
+      settings_featured_tags_path(featured_tag: { name: tag.name }),
+      method: :post
+    )
+  end
 end
--- a/app/javascript/mocks/svg.js
+++ b/app/javascript/mocks/svg.js
@ -1,3 +1,3 @@
-// eslint-disable-next-line import/no-anonymous-default-export
-export default 'SvgrURL';
-export const ReactComponent = 'div';
+const ReactComponent = 'div';
+
+export default ReactComponent;
--- a/app/javascript/core/inert.js
+++ b/app/javascript/core/inert.js
@ -0,0 +1,4 @@
+/* Placeholder file to have `inert.scss` compiled by Webpack
+   This is used by the `wicg-inert` polyfill */
+
+import '../styles/inert.scss';
--- a/app/javascript/core/theme.yml
+++ b/app/javascript/core/theme.yml
@ -10,6 +10,9 @@ pack:
  embed: embed.js
  error:
  home:
+  inert:
+    filename: inert.js
+    stylesheet: true
  mailer:
    filename: mailer.js
    stylesheet: true
--- a/app/javascript/flavours/glitch/actions/accounts.js
+++ b/app/javascript/flavours/glitch/actions/accounts.js
@ -714,6 +714,21 @@ export function fetchPinnedAccountsFail(error) {
  };
 }

+export const updateAccount = ({ displayName, note, avatar, header, discoverable, indexable }) => (dispatch, getState) => {
+  const data = new FormData();
+
+  data.append('display_name', displayName);
+  data.append('note', note);
+  if (avatar) data.append('avatar', avatar);
+  if (header) data.append('header', header);
+  data.append('discoverable', discoverable);
+  data.append('indexable', indexable);
+
+  return api(getState).patch('/api/v1/accounts/update_credentials', data).then(response => {
+    dispatch(importFetchedAccount(response.data));
+  });
+};
+
 export function fetchPinnedAccountsSuggestions(q) {
  return (dispatch, getState) => {
    dispatch(fetchPinnedAccountsSuggestionsRequest());
--- a/app/javascript/flavours/glitch/api_types/accounts.ts
+++ b/app/javascript/flavours/glitch/api_types/accounts.ts
@ -20,6 +20,7 @@ export interface ApiAccountJSON {
  bot: boolean;
  created_at: string;
  discoverable: boolean;
+  indexable: boolean;
  display_name: string;
  emojis: ApiCustomEmojiJSON[];
  fields: ApiAccountFieldJSON[];
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@ -17,7 +17,7 @@ import { Avatar } from './avatar';
 import { Button } from './button';
 import { FollowersCounter } from './counters';
 import { DisplayName } from './display_name';
-import Permalink from './permalink';
+import { Permalink } from './permalink';
 import { RelativeTimestamp } from './relative_timestamp';

 const messages = defineMessages({
--- a/app/javascript/flavours/glitch/components/admin/Retention.jsx
+++ b/app/javascript/flavours/glitch/components/admin/Retention.jsx
@ -51,7 +51,7 @@ export default class Retention extends PureComponent {
    let content;

    if (loading) {
-      content = <FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' />;
+      content = <FormattedMessage id='loading_indicator.label' defaultMessage='Loading…' />;
    } else {
      content = (
        <table className='retention__table'>
--- a/app/javascript/flavours/glitch/components/admin/Trends.jsx
+++ b/app/javascript/flavours/glitch/components/admin/Trends.jsx
@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';

 import api from 'flavours/glitch/api';
-import Hashtag from 'flavours/glitch/components/hashtag';
+import { Hashtag } from 'flavours/glitch/components/hashtag';

 export default class Trends extends PureComponent {

--- a/app/javascript/flavours/glitch/components/attachment_list.jsx
+++ b/app/javascript/flavours/glitch/components/attachment_list.jsx
@ -7,7 +7,9 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

-import { Icon } from 'flavours/glitch/components/icon';
+import LinkIcon from '@/material-icons/400-24px/link.svg?react';
+import { Icon }  from 'flavours/glitch/components/icon';
+

 const filename = url => url.split('/').pop().split('#')[0].split('?')[0];

@ -25,7 +27,7 @@ export default class AttachmentList extends ImmutablePureComponent {
      <div className={classNames('attachment-list', { compact })}>
        {!compact && (
          <div className='attachment-list__icon'>
-            <Icon id='link' />
+            <Icon id='link' icon={LinkIcon} />
          </div>
        )}

@ -36,7 +38,7 @@ export default class AttachmentList extends ImmutablePureComponent {
            return (
              <li key={attachment.get('id')}>
                <a href={displayUrl} target='_blank' rel='noopener noreferrer'>
-                  {compact && <Icon id='link' />}
+                  {compact && <Icon id='link' icon={LinkIcon} />}
                  {compact && ' ' }
                  {displayUrl ? filename(displayUrl) : <FormattedMessage id='attachments_list.unprocessed' defaultMessage='(unprocessed)' />}
                </a>
--- a/app/javascript/flavours/glitch/components/badge.jsx
+++ b/app/javascript/flavours/glitch/components/badge.jsx
@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import GroupsIcon from '@/material-icons/400-24px/group.svg?react';
+import PersonIcon from '@/material-icons/400-24px/person.svg?react';
+import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
+
+
+export const Badge = ({ icon, label, domain }) => (
+  <div className='account-role'>
+    {icon}
+    {label}
+    {domain && <span className='account-role__domain'>{domain}</span>}
+  </div>
+);
+
+Badge.propTypes = {
+  icon: PropTypes.node,
+  label: PropTypes.node,
+  domain: PropTypes.node,
+};
+
+Badge.defaultProps = {
+  icon: <PersonIcon />,
+};
+
+export const GroupBadge = () => (
+  <Badge icon={<GroupsIcon />} label={<FormattedMessage id='account.badges.group' defaultMessage='Group' />} />
+);
+
+export const AutomatedBadge = () => (
+  <Badge icon={<SmartToyIcon />} label={<FormattedMessage id='account.badges.bot' defaultMessage='Automated' />} />
+);
--- a/app/javascript/flavours/glitch/components/check.tsx
+++ b/app/javascript/flavours/glitch/components/check.tsx
@ -1,13 +0,0 @@
-export const Check: React.FC = () => (
-  <svg
-    xmlns='http://www.w3.org/2000/svg'
-    viewBox='0 0 20 20'
-    fill='currentColor'
-  >
-    <path
-      fillRule='evenodd'
-      d='M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z'
-      clipRule='evenodd'
-    />
-  </svg>
-);
--- a/app/javascript/flavours/glitch/components/column_back_button.jsx
+++ b/app/javascript/flavours/glitch/components/column_back_button.jsx
@ -1,63 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-import { createPortal } from 'react-dom';
-
-import { FormattedMessage } from 'react-intl';
-
-import { withRouter } from 'react-router-dom';
-
-import { Icon }  from 'flavours/glitch/components/icon';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
-export class ColumnBackButton extends PureComponent {
-
-  static propTypes = {
-    multiColumn: PropTypes.bool,
-    onClick: PropTypes.func,
-    ...WithRouterPropTypes,
-  };
-
-  handleClick = () => {
-    const { onClick, history } = this.props;
-
-    if (onClick) {
-      onClick();
-    } else if (history.location?.state?.fromMastodon) {
-      history.goBack();
-    } else {
-      history.push('/');
-    }
-  };
-
-  render () {
-    const { multiColumn } = this.props;
-
-    const component = (
-      <button onClick={this.handleClick} className='column-back-button'>
-        <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
-        <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
-      </button>
-    );
-
-    if (multiColumn) {
-      return component;
-    } else {
-      // The portal container and the component may be rendered to the DOM in
-      // the same React render pass, so the container might not be available at
-      // the time `render()` is called.
-      const container = document.getElementById('tabs-bar__portal');
-      if (container === null) {
-        // The container wasn't available, force a re-render so that the
-        // component can eventually be inserted in the container and not scroll
-        // with the rest of the area.
-        this.forceUpdate();
-        return component;
-      } else {
-        return createPortal(component, container);
-      }
-    }
-  }
-
-}
-
-export default withRouter(ColumnBackButton);
--- a/app/javascript/flavours/glitch/components/column_back_button.tsx
+++ b/app/javascript/flavours/glitch/components/column_back_button.tsx
@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import ArrowBackIcon from '@/material-icons/400-24px/arrow_back.svg?react';
+import { Icon } from 'flavours/glitch/components/icon';
+import { ButtonInTabsBar } from 'flavours/glitch/features/ui/util/columns_context';
+
+import { useAppHistory } from './router';
+
+type OnClickCallback = () => void;
+
+function useHandleClick(onClick?: OnClickCallback) {
+  const history = useAppHistory();
+
+  return useCallback(() => {
+    if (onClick) {
+      onClick();
+    } else if (history.location.state?.fromMastodon) {
+      history.goBack();
+    } else {
+      history.push('/');
+    }
+  }, [history, onClick]);
+}
+
+export const ColumnBackButton: React.FC<{ onClick: OnClickCallback }> = ({
+  onClick,
+}) => {
+  const handleClick = useHandleClick(onClick);
+
+  const component = (
+    <button onClick={handleClick} className='column-back-button'>
+      <Icon
+        id='chevron-left'
+        icon={ArrowBackIcon}
+        className='column-back-button__icon'
+      />
+      <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
+    </button>
+  );
+
+  return <ButtonInTabsBar>{component}</ButtonInTabsBar>;
+};
--- a/app/javascript/flavours/glitch/components/column_back_button_slim.jsx
+++ b/app/javascript/flavours/glitch/components/column_back_button_slim.jsx
@ -1,40 +0,0 @@
-import { PureComponent } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import { withRouter } from 'react-router-dom';
-
-import { Icon } from 'flavours/glitch/components/icon';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
-class ColumnBackButtonSlim extends PureComponent {
-
-  static propTypes = {
-    ...WithRouterPropTypes,
-  };
-
-  handleClick = () => {
-    const { location, history } = this.props;
-
-    // Check if there is a previous page in the app to go back to per https://stackoverflow.com/a/70532858/9703201
-    // When upgrading to V6, check `location.key !== 'default'` instead per https://github.com/remix-run/history/blob/main/docs/api-reference.md#location
-    if (location.key) {
-      history.goBack();
-    } else {
-      history.push('/');
-    }
-  };
-
-  render () {
-    return (
-      <div className='column-back-button--slim'>
-        <div role='button' tabIndex={0} onClick={this.handleClick} className='column-back-button column-back-button--slim-button'>
-          <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
-          <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
-        </div>
-      </div>
-    );
-  }
-}
-
-export default withRouter(ColumnBackButtonSlim);
--- a/app/javascript/flavours/glitch/components/column_header.jsx
+++ b/app/javascript/flavours/glitch/components/column_header.jsx
@ -1,15 +1,24 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-import { createPortal } from 'react-dom';
+import { PureComponent, useCallback } from 'react';

 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';

 import classNames from 'classnames';
 import { withRouter } from 'react-router-dom';

+import AddIcon from '@/material-icons/400-24px/add.svg?react';
+import ArrowBackIcon from '@/material-icons/400-24px/arrow_back.svg?react';
+import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
+import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import TuneIcon from '@/material-icons/400-24px/tune.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
+import { ButtonInTabsBar, useColumnsContext } from 'flavours/glitch/features/ui/util/columns_context';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';

+
+import { useAppHistory } from './router';
+
 const messages = defineMessages({
  show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
  hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
@ -17,6 +26,34 @@ const messages = defineMessages({
  moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' },
 });

+const BackButton = ({ pinned, show }) => {
+  const history = useAppHistory();
+  const { multiColumn } = useColumnsContext();
+
+  const handleBackClick = useCallback(() => {
+    if (history.location?.state?.fromMastodon) {
+      history.goBack();
+    } else {
+      history.push('/');
+    }
+  }, [history]);
+
+  const showButton = history && !pinned && ((multiColumn && history.location?.state?.fromMastodon) || show);
+
+  if(!showButton) return null;
+
+  return (<button onClick={handleBackClick} className='column-header__back-button'>
+    <Icon id='chevron-left' icon={ArrowBackIcon} className='column-back-button__icon' />
+    <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
+  </button>);
+
+};
+
+BackButton.propTypes = {
+  pinned: PropTypes.bool,
+  show: PropTypes.bool,
+};
+
 class ColumnHeader extends PureComponent {

  static contextTypes = {
@ -27,6 +64,7 @@ class ColumnHeader extends PureComponent {
    intl: PropTypes.object.isRequired,
    title: PropTypes.node,
    icon: PropTypes.string,
+    iconComponent: PropTypes.func,
    active: PropTypes.bool,
    multiColumn: PropTypes.bool,
    extraButton: PropTypes.node,
@ -64,16 +102,6 @@ class ColumnHeader extends PureComponent {
    this.props.onMove(1);
  };

-  handleBackClick = () => {
-    const { history } = this.props;
-
-    if (history.location?.state?.fromMastodon) {
-      history.goBack();
-    } else {
-      history.push('/');
-    }
-  };
-
  handleTransitionEnd = () => {
    this.setState({ animating: false });
  };
@ -87,7 +115,7 @@ class ColumnHeader extends PureComponent {
  };

  render () {
-    const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props;
+    const { title, icon, iconComponent, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues } = this.props;
    const { collapsed, animating } = this.state;

    const wrapperClassName = classNames('column-header__wrapper', {
@ -118,26 +146,19 @@ class ColumnHeader extends PureComponent {
    }

    if (multiColumn && pinned) {
-      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='times' /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;
+      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='times' icon={CloseIcon} /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;

      moveButtons = (
        <div key='move-buttons' className='column-header__setting-arrows'>
-          <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='icon-button column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' /></button>
-          <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='icon-button column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' /></button>
+          <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='icon-button column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' icon={ChevronLeftIcon} /></button>
+          <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='icon-button column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' icon={ChevronRightIcon} /></button>
        </div>
      );
    } else if (multiColumn && this.props.onPin) {
-      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
+      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' icon={AddIcon} /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
    }

-    if (!pinned && ((multiColumn && history.location?.state?.fromMastodon) || showBackButton)) {
-      backButton = (
-        <button onClick={this.handleBackClick} className='column-header__back-button'>
-          <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
-          <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
-        </button>
-      );
-    }
+    backButton = <BackButton pinned={pinned} show={showBackButton} />;

    const collapsedContent = [
      extraContent,
@ -157,21 +178,21 @@ class ColumnHeader extends PureComponent {
          onClick={this.handleToggleClick}
        >
          <i className='icon-with-badge'>
-            <Icon id='sliders' />
+            <Icon id='sliders' icon={TuneIcon} />
            {collapseIssues && <i className='icon-with-badge__issue-badge' />}
          </i>
        </button>
      );
    }

-    const hasTitle = icon && title;
+    const hasTitle = (icon || iconComponent) && title;

    const component = (
      <div className={wrapperClassName}>
        <h1 className={buttonClassName}>
          {hasTitle && (
            <button onClick={this.handleTitleClick}>
-              <Icon id={icon} fixedWidth className='column-header__icon' />
+              <Icon id={icon} icon={iconComponent} className='column-header__icon' />
              {title}
            </button>
          )}
@ -195,22 +216,12 @@ class ColumnHeader extends PureComponent {
      </div>
    );

-    if (multiColumn || placeholder) {
+    if (placeholder) {
      return component;
    } else {
-      // The portal container and the component may be rendered to the DOM in
-      // the same React render pass, so the container might not be available at
-      // the time `render()` is called.
-      const container = document.getElementById('tabs-bar__portal');
-      if (container === null) {
-        // The container wasn't available, force a re-render so that the
-        // component can eventually be inserted in the container and not scroll
-        // with the rest of the area.
-        this.forceUpdate();
-        return component;
-      } else {
-        return createPortal(component, container);
-      }
+      return (<ButtonInTabsBar>
+        {component}
+      </ButtonInTabsBar>);
    }
  }

--- a/app/javascript/flavours/glitch/components/dismissable_banner.tsx
+++ b/app/javascript/flavours/glitch/components/dismissable_banner.tsx
@ -8,6 +8,7 @@ import { useCallback, useState, useEffect } from 'react';

 import { defineMessages, useIntl } from 'react-intl';

+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import { changeSetting } from 'flavours/glitch/actions/settings';
 import { bannerSettings } from 'flavours/glitch/settings';
 import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
@ -55,6 +56,7 @@ export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
      <div className='dismissable-banner__action'>
        <IconButton
          icon='times'
+          iconComponent={CloseIcon}
          title={intl.formatMessage(messages.dismiss)}
          onClick={handleDismiss}
        />
--- a/app/javascript/flavours/glitch/components/domain.tsx
+++ b/app/javascript/flavours/glitch/components/domain.tsx
@ -2,6 +2,8 @@ import { useCallback } from 'react';

 import { defineMessages, useIntl } from 'react-intl';

+import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
+
 import { IconButton } from './icon_button';

 const messages = defineMessages({
@ -34,6 +36,7 @@ export const Domain: React.FC<Props> = ({ domain, onUnblockDomain }) => {
          <IconButton
            active
            icon='unlock'
+            iconComponent={LockOpenIcon}
            title={intl.formatMessage(messages.unblockDomain, { domain })}
            onClick={handleDomainUnblock}
          />
--- a/app/javascript/flavours/glitch/components/dropdown_menu.jsx
+++ b/app/javascript/flavours/glitch/components/dropdown_menu.jsx
@ -9,6 +9,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Overlay from 'react-overlays/Overlay';

+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import { CircularProgress } from 'flavours/glitch/components/circular_progress';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';

@ -163,6 +164,7 @@ class Dropdown extends PureComponent {
  static propTypes = {
    children: PropTypes.node,
    icon: PropTypes.string,
+    iconComponent: PropTypes.func,
    items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]).isRequired,
    loading: PropTypes.bool,
    size: PropTypes.number,
@ -255,7 +257,7 @@ class Dropdown extends PureComponent {
  };

  findTarget = () => {
-    return this.target;
+    return this.target?.buttonRef?.current ?? this.target;
  };

  componentWillUnmount = () => {
@ -271,6 +273,7 @@ class Dropdown extends PureComponent {
  render () {
    const {
      icon,
+      iconComponent,
      items,
      size,
      title,
@ -291,9 +294,11 @@ class Dropdown extends PureComponent {
      onMouseDown: this.handleMouseDown,
      onKeyDown: this.handleButtonKeyDown,
      onKeyPress: this.handleKeyPress,
+      ref: this.setTargetRef,
    }) : (
      <IconButton
-        icon={icon}
+        icon={!open ? icon : 'close'}
+        iconComponent={!open ? iconComponent : CloseIcon}
        title={title}
        active={open}
        disabled={disabled}
@ -302,14 +307,14 @@ class Dropdown extends PureComponent {
        onMouseDown={this.handleMouseDown}
        onKeyDown={this.handleButtonKeyDown}
        onKeyPress={this.handleKeyPress}
+        ref={this.setTargetRef}
      />
    );

    return (
      <>
-        <span ref={this.setTargetRef}>
-          {button}
-        </span>
+        {button}
+
        <Overlay show={open} offset={[5, 5]} placement={'bottom'} flip target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
          {({ props, arrowProps, placement }) => (
            <div {...props}>
--- a/app/javascript/flavours/glitch/components/edited_timestamp/index.jsx
+++ b/app/javascript/flavours/glitch/components/edited_timestamp/index.jsx
@ -5,6 +5,8 @@ import { FormattedMessage, injectIntl } from 'react-intl';

 import { connect } from 'react-redux';

+
+import ArrowDropDownIcon from '@/material-icons/400-24px/arrow_drop_down.svg?react';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { Icon }  from 'flavours/glitch/components/icon';
 import InlineAccount from 'flavours/glitch/components/inline_account';
@ -66,7 +68,7 @@ class EditedTimestamp extends PureComponent {
    return (
      <DropdownMenu statusId={statusId} renderItem={this.renderItem} scrollable renderHeader={this.renderHeader} onItemClick={this.handleItemClick}>
        <button className='dropdown-menu__text-button'>
-          <FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(timestamp, { hour12: false, month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} /> <Icon id='caret-down' />
+          <FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(timestamp, { hour12: false, month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} /> <Icon id='caret-down' icon={ArrowDropDownIcon} />
        </button>
      </DropdownMenu>
    );
--- a/app/javascript/flavours/glitch/components/hashtag.jsx
+++ b/app/javascript/flavours/glitch/components/hashtag.jsx
@ -1,123 +0,0 @@
-// @ts-check
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-import { Sparklines, SparklinesCurve } from 'react-sparklines';
-
-import { ShortNumber } from 'flavours/glitch/components/short_number';
-import { Skeleton } from 'flavours/glitch/components/skeleton';
-
-import Permalink from './permalink';
-
-class SilentErrorBoundary extends Component {
-
-  static propTypes = {
-    children: PropTypes.node,
-  };
-
-  state = {
-    error: false,
-  };
-
-  componentDidCatch() {
-    this.setState({ error: true });
-  }
-
-  render() {
-    if (this.state.error) {
-      return null;
-    }
-
-    return this.props.children;
-  }
-
-}
-
-/**
- * Used to render counter of how much people are talking about hashtag
- * @type {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
- */
-export const accountsCountRenderer = (displayNumber, pluralReady) => (
-  <FormattedMessage
-    id='trends.counter_by_accounts'
-    defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} in the past {days, plural, one {day} other {# days}}'
-    values={{
-      count: pluralReady,
-      counter: <strong>{displayNumber}</strong>,
-      days: 2,
-    }}
-  />
-);
-
-// @ts-expect-error
-export const ImmutableHashtag = ({ hashtag }) => (
-  <Hashtag
-    name={hashtag.get('name')}
-    href={hashtag.get('url')}
-    to={`/tags/${hashtag.get('name')}`}
-    people={hashtag.getIn(['history', 0, 'accounts']) * 1 + hashtag.getIn(['history', 1, 'accounts']) * 1}
-    // @ts-expect-error
-    history={hashtag.get('history').reverse().map((day) => day.get('uses')).toArray()}
-  />
-);
-
-ImmutableHashtag.propTypes = {
-  hashtag: ImmutablePropTypes.map.isRequired,
-};
-
-// @ts-expect-error
-const Hashtag = ({ name, href, to, people, uses, history, className, description, withGraph }) => (
-  <div className={classNames('trends__item', className)}>
-    <div className='trends__item__name'>
-      <Permalink href={href} to={to}>
-        {name ? <>#<span>{name}</span></> : <Skeleton width={50} />}
-      </Permalink>
-
-      {description ? (
-        <span>{description}</span>
-      ) : (
-        typeof people !== 'undefined' ? <ShortNumber value={people} renderer={accountsCountRenderer} /> : <Skeleton width={100} />
-      )}
-    </div>
-
-    {typeof uses !== 'undefined' && (
-      <div className='trends__item__current'>
-        <ShortNumber value={uses} />
-      </div>
-    )}
-
-    {withGraph && (
-      <div className='trends__item__sparkline'>
-        <SilentErrorBoundary>
-          <Sparklines width={50} height={28} data={history ? history : Array.from(Array(7)).map(() => 0)}>
-            <SparklinesCurve style={{ fill: 'none' }} />
-          </Sparklines>
-        </SilentErrorBoundary>
-      </div>
-    )}
-  </div>
-);
-
-Hashtag.propTypes = {
-  name: PropTypes.string,
-  href: PropTypes.string,
-  to: PropTypes.string,
-  people: PropTypes.number,
-  description: PropTypes.node,
-  uses: PropTypes.number,
-  history: PropTypes.arrayOf(PropTypes.number),
-  className: PropTypes.string,
-  withGraph: PropTypes.bool,
-};
-
-Hashtag.defaultProps = {
-  withGraph: true,
-};
-
-export default Hashtag;
--- a/app/javascript/flavours/glitch/components/hashtag.tsx
+++ b/app/javascript/flavours/glitch/components/hashtag.tsx
@ -0,0 +1,149 @@
+import type { JSX } from 'react';
+import { Component } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import type Immutable from 'immutable';
+
+import { Sparklines, SparklinesCurve } from 'react-sparklines';
+
+import { ShortNumber } from 'flavours/glitch/components/short_number';
+import { Skeleton } from 'flavours/glitch/components/skeleton';
+
+import { Permalink } from './permalink';
+
+interface SilentErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+class SilentErrorBoundary extends Component<SilentErrorBoundaryProps> {
+  state = {
+    error: false,
+  };
+
+  componentDidCatch() {
+    this.setState({ error: true });
+  }
+
+  render() {
+    if (this.state.error) {
+      return null;
+    }
+
+    return this.props.children;
+  }
+}
+
+/**
+ * Used to render counter of how much people are talking about hashtag
+ * @param displayNumber Counter number to display
+ * @param pluralReady Whether the count is plural
+ * @returns Formatted counter of how much people are talking about hashtag
+ */
+export const accountsCountRenderer = (
+  displayNumber: JSX.Element,
+  pluralReady: number,
+) => (
+  <FormattedMessage
+    id='trends.counter_by_accounts'
+    defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} in the past {days, plural, one {day} other {# days}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+      days: 2,
+    }}
+  />
+);
+
+interface ImmutableHashtagProps {
+  hashtag: Immutable.Map<string, unknown>;
+}
+
+export const ImmutableHashtag = ({ hashtag }: ImmutableHashtagProps) => (
+  <Hashtag
+    name={hashtag.get('name') as string}
+    href={hashtag.get('url') as string}
+    to={`/tags/${hashtag.get('name') as string}`}
+    people={
+      (hashtag.getIn(['history', 0, 'accounts']) as number) * 1 +
+      (hashtag.getIn(['history', 1, 'accounts']) as number) * 1
+    }
+    history={(
+      hashtag.get('history') as Immutable.Collection.Indexed<
+        Immutable.Map<string, number>
+      >
+    )
+      .reverse()
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      .map((day) => day.get('uses')!)
+      .toArray()}
+  />
+);
+
+export interface HashtagProps {
+  className?: string;
+  description?: React.ReactNode;
+  history?: number[];
+  href: string;
+  name: string;
+  people: number;
+  to: string;
+  uses?: number;
+  withGraph?: boolean;
+}
+
+export const Hashtag: React.FC<HashtagProps> = ({
+  name,
+  href,
+  to,
+  people,
+  uses,
+  history,
+  className,
+  description,
+  withGraph = true,
+}) => (
+  <div className={classNames('trends__item', className)}>
+    <div className='trends__item__name'>
+      <Permalink href={href} to={to}>
+        {name ? (
+          <>
+            #<span>{name}</span>
+          </>
+        ) : (
+          <Skeleton width={50} />
+        )}
+      </Permalink>
+
+      {description ? (
+        <span>{description}</span>
+      ) : typeof people !== 'undefined' ? (
+        <ShortNumber value={people} renderer={accountsCountRenderer} />
+      ) : (
+        <Skeleton width={100} />
+      )}
+    </div>
+
+    {typeof uses !== 'undefined' && (
+      <div className='trends__item__current'>
+        <ShortNumber value={uses} />
+      </div>
+    )}
+
+    {withGraph && (
+      <div className='trends__item__sparkline'>
+        <SilentErrorBoundary>
+          <Sparklines
+            width={50}
+            height={28}
+            data={history ? history : Array.from(Array(7)).map(() => 0)}
+          >
+            <SparklinesCurve style={{ fill: 'none' }} />
+          </Sparklines>
+        </SilentErrorBoundary>
+      </div>
+    )}
+  </div>
+);
--- a/app/javascript/flavours/glitch/components/icon.tsx
+++ b/app/javascript/flavours/glitch/components/icon.tsx
@ -1,20 +1,53 @@
 import classNames from 'classnames';

-interface Props extends React.HTMLAttributes<HTMLImageElement> {
-  id: string;
-  className?: string;
-  fixedWidth?: boolean;
+import CheckBoxOutlineBlankIcon from '@/material-icons/400-24px/check_box_outline_blank.svg?react';
+import { isProduction } from 'flavours/glitch/utils/environment';
+
+interface SVGPropsWithTitle extends React.SVGProps<SVGSVGElement> {
+  title?: string;
+}
+
+export type IconProp = React.FC<SVGPropsWithTitle>;
+
+interface Props extends React.SVGProps<SVGSVGElement> {
  children?: never;
+  id: string;
+  icon: IconProp;
+  title?: string;
 }

 export const Icon: React.FC<Props> = ({
  id,
+  icon: IconComponent,
  className,
-  fixedWidth,
+  title: titleProp,
  ...other
-}) => (
-  <i
-    className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
-    {...other}
-  />
-);
+}) => {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (!IconComponent) {
+    if (!isProduction()) {
+      throw new Error(
+        `<Icon id="${id}" className="${className}"> is missing an "icon" prop.`,
+      );
+    }
+
+    IconComponent = CheckBoxOutlineBlankIcon;
+  }
+
+  const ariaHidden = titleProp ? undefined : true;
+  const role = !ariaHidden ? 'img' : undefined;
+
+  // Set the title to an empty string to remove the built-in SVG one if any
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+  const title = titleProp || '';
+
+  return (
+    <IconComponent
+      className={classNames('icon', `icon-${id}`, className)}
+      title={title}
+      aria-hidden={ariaHidden}
+      role={role}
+      {...other}
+    />
+  );
+};
--- a/app/javascript/flavours/glitch/components/icon_button.tsx
+++ b/app/javascript/flavours/glitch/components/icon_button.tsx
@ -1,19 +1,20 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';

 import classNames from 'classnames';

 import { AnimatedNumber } from './animated_number';
+import type { IconProp } from './icon';
 import { Icon } from './icon';

 interface Props {
  className?: string;
  title: string;
  icon: string;
+  iconComponent: IconProp;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;
-  size: number;
  active: boolean;
  expanded?: boolean;
  style?: React.CSSProperties;
@ -34,8 +35,9 @@ interface States {
  deactivate: boolean;
 }
 export class IconButton extends PureComponent<Props, States> {
+  buttonRef = createRef<HTMLButtonElement>();
+
  static defaultProps = {
-    size: 18,
    active: false,
    disabled: false,
    animate: false,
@ -86,24 +88,10 @@ export class IconButton extends PureComponent<Props, States> {
  };

  render() {
-    // Hack required for some icons which have an overriden size
-    let containerSize = '1.28571429em';
-    if (this.props.style?.fontSize) {
-      containerSize = `${this.props.size * 1.28571429}px`;
-    }
-
    const style = {
-      fontSize: `${this.props.size}px`,
-      height: containerSize,
-      lineHeight: `${this.props.size}px`,
      ...this.props.style,
      ...(this.props.active ? this.props.activeStyle : {}),
    };
-    if (!this.props.label) {
-      style.width = containerSize;
-    } else {
-      style.textAlign = 'left';
-    }

    const {
      active,
@ -111,6 +99,7 @@ export class IconButton extends PureComponent<Props, States> {
      disabled,
      expanded,
      icon,
+      iconComponent,
      inverted,
      overlay,
      tabIndex,
@ -133,13 +122,9 @@ export class IconButton extends PureComponent<Props, States> {
      'icon-button--with-counter': typeof counter !== 'undefined',
    });

-    if (typeof counter !== 'undefined') {
-      style.width = 'auto';
-    }
-
    let contents = (
      <>
-        <Icon id={icon} fixedWidth aria-hidden='true' />{' '}
+        <Icon id={icon} icon={iconComponent} aria-hidden='true' />{' '}
        {typeof counter !== 'undefined' && (
          <span className='icon-button__counter'>
            <AnimatedNumber value={counter} obfuscate={obfuscateCount} />
@ -172,6 +157,7 @@ export class IconButton extends PureComponent<Props, States> {
        style={style}
        tabIndex={tabIndex}
        disabled={disabled}
+        ref={this.buttonRef}
      >
        {contents}
      </button>
--- a/app/javascript/flavours/glitch/components/icon_with_badge.tsx
+++ b/app/javascript/flavours/glitch/components/icon_with_badge.tsx
@ -1,21 +1,24 @@
+import type { IconProp } from './icon';
 import { Icon } from './icon';

 const formatNumber = (num: number): number | string => (num > 40 ? '40+' : num);

 interface Props {
  id: string;
+  icon: IconProp;
  count: number;
  issueBadge: boolean;
  className: string;
 }
 export const IconWithBadge: React.FC<Props> = ({
  id,
+  icon,
  count,
  issueBadge,
  className,
 }) => (
  <i className='icon-with-badge'>
-    <Icon id={id} fixedWidth className={className} />
+    <Icon id={id} icon={icon} className={className} />
    {count > 0 && (
      <i className='icon-with-badge__badge'>{formatNumber(count)}</i>
    )}
--- a/app/javascript/flavours/glitch/components/load_gap.tsx
+++ b/app/javascript/flavours/glitch/components/load_gap.tsx
@ -2,6 +2,7 @@ import { useCallback } from 'react';

 import { useIntl, defineMessages } from 'react-intl';

+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';

 const messages = defineMessages({
@ -28,7 +29,7 @@ export const LoadGap: React.FC<Props> = ({ disabled, maxId, onClick }) => {
      onClick={handleClick}
      aria-label={intl.formatMessage(messages.load_more)}
    >
-      <Icon id='ellipsis-h' />
+      <Icon id='ellipsis-h' icon={MoreHorizIcon} />
    </button>
  );
 };
--- a/app/javascript/flavours/glitch/components/loading_indicator.tsx
+++ b/app/javascript/flavours/glitch/components/loading_indicator.tsx
@ -1,7 +1,23 @@
+import { useIntl, defineMessages } from 'react-intl';
+
 import { CircularProgress } from './circular_progress';

-export const LoadingIndicator: React.FC = () => (
-  <div className='loading-indicator'>
-    <CircularProgress size={50} strokeWidth={6} />
-  </div>
-);
+const messages = defineMessages({
+  loading: { id: 'loading_indicator.label', defaultMessage: 'Loading…' },
+});
+
+export const LoadingIndicator: React.FC = () => {
+  const intl = useIntl();
+
+  return (
+    <div
+      className='loading-indicator'
+      role='progressbar'
+      aria-busy
+      aria-live='polite'
+      aria-label={intl.formatMessage(messages.loading)}
+    >
+      <CircularProgress size={50} strokeWidth={6} />
+    </div>
+  );
+};
--- a/app/javascript/flavours/glitch/components/logo.jsx
+++ b/app/javascript/flavours/glitch/components/logo.jsx
@ -1,4 +1,4 @@
-import logo from 'mastodon/../images/logo.svg';
+import logo from '@/images/logo.svg';

 export const WordmarkLogo = () => (
  <svg viewBox='0 0 261 66' className='logo logo--wordmark' role='img'>
--- a/app/javascript/flavours/glitch/components/media_attachments.jsx
+++ b/app/javascript/flavours/glitch/components/media_attachments.jsx
@ -15,7 +15,7 @@ export default class MediaAttachments extends ImmutablePureComponent {
    lang: PropTypes.string,
    height: PropTypes.number,
    width: PropTypes.number,
-    revealed: PropTypes.bool,
+    visible: PropTypes.bool,
  };

  static defaultProps = {
@ -52,7 +52,7 @@ export default class MediaAttachments extends ImmutablePureComponent {
  };

  render () {
-    const { status, width, height, revealed } = this.props;
+    const { status, width, height, visible } = this.props;
    const mediaAttachments = status.get('media_attachments');
    const language = status.getIn(['language', 'translation']) || status.get('language') || this.props.lang;

@ -100,7 +100,7 @@ export default class MediaAttachments extends ImmutablePureComponent {
              height={height}
              inline
              sensitive={status.get('sensitive')}
-              revealed={revealed}
+              visible={visible}
              onOpenVideo={noop}
            />
          )}
@ -115,7 +115,7 @@ export default class MediaAttachments extends ImmutablePureComponent {
              lang={language}
              sensitive={status.get('sensitive')}
              defaultWidth={width}
-              revealed={revealed}
+              visible={visible}
              height={height}
              onOpenMedia={noop}
            />
--- a/app/javascript/flavours/glitch/components/media_gallery.jsx
+++ b/app/javascript/flavours/glitch/components/media_gallery.jsx
@ -10,6 +10,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';

 import { debounce } from 'lodash';

+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
 import { Blurhash } from 'flavours/glitch/components/blurhash';

 import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
@ -122,7 +123,7 @@ class Item extends PureComponent {
    }

    if (attachment.get('description')?.length > 0) {
-      badges.push(<span key='alt' className='media-gallery__gifv__label'>ALT</span>);
+      badges.push(<span key='alt' className='media-gallery__alt__label'>ALT</span>);
    }

    const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
@ -362,7 +363,7 @@ class MediaGallery extends PureComponent {
        </button>
      );
    } else if (visible) {
-      spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible, { number: size })} icon='eye-slash' overlay onClick={this.handleOpen} ariaHidden />;
+      spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible, { number: size })} icon='eye-slash' iconComponent={VisibilityOffIcon} overlay onClick={this.handleOpen} ariaHidden />;
    } else {
      spoilerButton = (
        <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
--- a/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx
+++ b/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx
@ -4,8 +4,6 @@
 * a Confirm and Abort buttons are shown in its place.
 */

-
-//  Package imports  //
 import PropTypes from 'prop-types';

 import { defineMessages, injectIntl } from 'react-intl';
@ -14,8 +12,10 @@ import classNames from 'classnames';

 import ImmutablePureComponent from 'react-immutable-pure-component';

+import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';

+
 const messages = defineMessages({
  btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' },
  btnNone : { id: 'notification_purge.btn_none', defaultMessage: 'Select\nnone' },
@ -53,7 +53,7 @@ class NotificationPurgeButtons extends ImmutablePureComponent {
        </button>

        <button onClick={this.props.onDeleteMarked} className='column-header__button'>
-          <Icon id='trash' /><br />{intl.formatMessage(messages.btnApply)}
+          <Icon id='trash' icon={DeleteIcon} /><br />{intl.formatMessage(messages.btnApply)}
        </button>
      </div>
    );
--- a/app/javascript/flavours/glitch/components/permalink.jsx
+++ b/app/javascript/flavours/glitch/components/permalink.jsx
@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { withOptionalRouter, WithOptionalRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
-class Permalink extends PureComponent {
-
-  static propTypes = {
-    className: PropTypes.string,
-    href: PropTypes.string.isRequired,
-    to: PropTypes.string.isRequired,
-    children: PropTypes.node,
-    onInterceptClick: PropTypes.func,
-    ...WithOptionalRouterPropTypes,
-  };
-
-  handleClick = (e) => {
-    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      if (this.props.onInterceptClick && this.props.onInterceptClick()) {
-        e.preventDefault();
-        return;
-      }
-
-      if (this.props.history) {
-        e.preventDefault();
-        this.props.history.push(this.props.to);
-      }
-    }
-  };
-
-  render () {
-    const {
-      children,
-      className,
-      href,
-      to,
-      onInterceptClick,
-      ...other
-    } = this.props;
-
-    return (
-      <a target='_blank' href={href} onClick={this.handleClick} {...other} className={`permalink${className ? ' ' + className : ''}`}>
-        {children}
-      </a>
-    );
-  }
-
-}
-
-export default withOptionalRouter(Permalink);
--- a/app/javascript/flavours/glitch/components/permalink.tsx
+++ b/app/javascript/flavours/glitch/components/permalink.tsx
@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+
+import { useAppHistory } from './router';
+
+interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  to: string;
+}
+
+export const Permalink: React.FC<Props> = ({
+  className,
+  href,
+  to,
+  children,
+  ...props
+}) => {
+  const history = useAppHistory();
+
+  const handleClick = useCallback<React.MouseEventHandler<HTMLAnchorElement>>(
+    (e) => {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- history can actually be undefined as the component can be mounted outside a router context
+      if (e.button === 0 && !(e.ctrlKey || e.metaKey) && history) {
+        e.preventDefault();
+        history.push(to);
+      }
+    },
+    [history, to],
+  );
+
+  return (
+    <a
+      target='_blank'
+      rel='noreferrer'
+      href={href}
+      onClick={handleClick}
+      className={`permalink${className ? ' ' + className : ''}`}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+};
--- a/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx
+++ b/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx
@ -5,6 +5,8 @@ import { FormattedMessage } from 'react-intl';

 import { connect } from 'react-redux';

+
+import CancelPresentationIcon from '@/material-icons/400-24px/cancel_presentation.svg?react';
 import { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
 import { Icon }  from 'flavours/glitch/components/icon';

@ -22,7 +24,7 @@ class PictureInPicturePlaceholder extends PureComponent {
  render () {
    return (
      <div className='picture-in-picture-placeholder' role='button' tabIndex={0} onClick={this.handleClick}>
-        <Icon id='window-restore' />
+        <Icon id='window-restore' icon={CancelPresentationIcon} />
        <FormattedMessage id='picture_in_picture.restore' defaultMessage='Put it back' />
      </div>
    );
--- a/app/javascript/flavours/glitch/components/poll.jsx
+++ b/app/javascript/flavours/glitch/components/poll.jsx
@ -10,6 +10,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import escapeTextContentForBrowser from 'escape-html';
 import spring from 'react-motion/lib/spring';

+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 import emojify from 'flavours/glitch/features/emoji/emoji';
 import Motion from 'flavours/glitch/features/ui/util/optional_motion';
@ -192,7 +193,7 @@ class Poll extends ImmutablePureComponent {
          />

          {!!voted && <span className='poll__voted'>
-            <Icon id='check' className='poll__voted__mark' title={intl.formatMessage(messages.voted)} />
+            <Icon id='check' icon={CheckIcon} className='poll__voted__mark' title={intl.formatMessage(messages.voted)} />
          </span>}
        </label>

--- a/app/javascript/flavours/glitch/components/router.tsx
+++ b/app/javascript/flavours/glitch/components/router.tsx
@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';

-import { Router as OriginalRouter } from 'react-router';
+import { Router as OriginalRouter, useHistory } from 'react-router';

 import type {
  LocationDescriptor,
@ -11,23 +11,29 @@ import type {
 import { createBrowserHistory } from 'history';

 import { layoutFromWindow } from 'flavours/glitch/is_mobile';
+import { isDevelopment } from 'flavours/glitch/utils/environment';

 interface MastodonLocationState {
  fromMastodon?: boolean;
  mastodonModalKey?: string;
 }
-type HistoryPath = Path | LocationDescriptor<MastodonLocationState>;

-const browserHistory = createBrowserHistory<
-  MastodonLocationState | undefined
->();
+type LocationState = MastodonLocationState | null | undefined;
+
+type HistoryPath = Path | LocationDescriptor<LocationState>;
+
+const browserHistory = createBrowserHistory<LocationState>();
 const originalPush = browserHistory.push.bind(browserHistory);
 const originalReplace = browserHistory.replace.bind(browserHistory);

+export function useAppHistory() {
+  return useHistory<LocationState>();
+}
+
 function normalizePath(
  path: HistoryPath,
-  state?: MastodonLocationState,
-): LocationDescriptorObject<MastodonLocationState> {
+  state?: LocationState,
+): LocationDescriptorObject<LocationState> {
  const location = typeof path === 'string' ? { pathname: path } : { ...path };

  if (location.state === undefined && state !== undefined) {
@ -35,7 +41,7 @@ function normalizePath(
  } else if (
    location.state !== undefined &&
    state !== undefined &&
-    process.env.NODE_ENV === 'development'
+    isDevelopment()
  ) {
    // eslint-disable-next-line no-console
    console.log(
--- a/app/javascript/flavours/glitch/components/status_action_bar.jsx
+++ b/app/javascript/flavours/glitch/components/status_action_bar.jsx
@ -8,6 +8,17 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

+import BookmarkIcon from '@/material-icons/400-24px/bookmark-fill.svg?react';
+import BookmarkBorderIcon from '@/material-icons/400-24px/bookmark.svg?react';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
+import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
+import StarBorderIcon from '@/material-icons/400-24px/star.svg?react';
+import VisibilityIcon from '@/material-icons/400-24px/visibility.svg?react';
+import RepeatDisabledIcon from '@/svg-icons/repeat_disabled.svg';
+import RepeatPrivateIcon from '@/svg-icons/repeat_private.svg';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'flavours/glitch/permissions';
 import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
@ -220,6 +231,7 @@ class StatusActionBar extends ImmutablePureComponent {
    let menu = [];
    let reblogIcon = 'retweet';
    let replyIcon;
+    let replyIconComponent;
    let replyTitle;

    menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen });
@ -289,27 +301,34 @@ class StatusActionBar extends ImmutablePureComponent {

    if (status.get('in_reply_to_id', null) === null) {
      replyIcon = 'reply';
+      replyIconComponent = ReplyIcon;
      replyTitle = intl.formatMessage(messages.reply);
    } else {
      replyIcon = 'reply-all';
+      replyIconComponent = ReplyAllIcon;
      replyTitle = intl.formatMessage(messages.replyAll);
    }

    const reblogPrivate = status.getIn(['account', 'id']) === me && status.get('visibility') === 'private';

-    let reblogTitle = '';
+    let reblogTitle, reblogIconComponent;
+
    if (status.get('reblogged')) {
      reblogTitle = intl.formatMessage(messages.cancel_reblog_private);
+      reblogIconComponent = publicStatus ? RepeatIcon : RepeatPrivateIcon;
    } else if (publicStatus) {
      reblogTitle = intl.formatMessage(messages.reblog);
+      reblogIconComponent = RepeatIcon;
    } else if (reblogPrivate) {
      reblogTitle = intl.formatMessage(messages.reblog_private);
+      reblogIconComponent = RepeatPrivateIcon;
    } else {
      reblogTitle = intl.formatMessage(messages.cannot_reblog);
+      reblogIconComponent = RepeatDisabledIcon;
    }

    const filterButton = this.props.onFilter && (
-      <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
+      <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' iconComponent={VisibilityIcon} onClick={this.handleHideClick} />
    );

    const canReact = permissions && status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
@ -329,32 +348,32 @@ class StatusActionBar extends ImmutablePureComponent {
          className='status__action-bar-button'
          title={replyTitle}
          icon={replyIcon}
+          iconComponent={replyIconComponent}
          onClick={this.handleReplyClick}
          counter={showReplyCount ? status.get('replies_count') : undefined}
          obfuscateCount
        />
-        <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={reblogIcon} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
-        <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
+        <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={reblogIcon} iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
+        <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
        {
          permissions
            ? <EmojiPickerDropdown className='status__action-bar-button' onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
            : reactButton
        }
-        <IconButton className='status__action-bar-button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
+        <IconButton className='status__action-bar-button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />

        {filterButton}

-        <div className='status__action-bar-dropdown'>
-          <DropdownMenuContainer
-            scrollKey={scrollKey}
-            status={status}
-            items={menu}
-            icon='ellipsis-h'
-            size={18}
-            direction='right'
-            ariaLabel={intl.formatMessage(messages.more)}
-          />
-        </div>
+        <DropdownMenuContainer
+          scrollKey={scrollKey}
+          status={status}
+          items={menu}
+          icon='ellipsis-h'
+          size={18}
+          iconComponent={MoreHorizIcon}
+          direction='right'
+          ariaLabel={intl.formatMessage(messages.more)}
+        />

        <div className='status__action-bar-spacer' />
        <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'>
--- a/app/javascript/flavours/glitch/components/status_content.jsx
+++ b/app/javascript/flavours/glitch/components/status_content.jsx
@ -9,11 +9,17 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';

+import ImageIcon from '@/material-icons/400-24px/image.svg?react';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
+import LinkIcon from '@/material-icons/400-24px/link.svg?react';
+import MovieIcon from '@/material-icons/400-24px/movie.svg?react';
+import MusicNoteIcon from '@/material-icons/400-24px/music_note.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
 import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';

-import Permalink from './permalink';
+
+import { Permalink } from './permalink';

 const textMatchesTarget = (text, origin, host) => {
  return (text === origin || text === host
@ -381,12 +387,21 @@ class StatusContent extends PureComponent {
          />,
        ];
        if (mediaIcons) {
+          const mediaComponents = {
+            'link': LinkIcon,
+            'picture-o': ImageIcon,
+            'tasks': InsertChartIcon,
+            'video-camera': MovieIcon,
+            'music': MusicNoteIcon,
+          };
+
          mediaIcons.forEach((mediaIcon, idx) => {
            toggleText.push(
              <Icon
                fixedWidth
                className='status__content__spoiler-icon'
                id={mediaIcon}
+                icon={mediaComponents[mediaIcon]}
                aria-hidden='true'
                key={`icon-${idx}`}
              />,
--- a/app/javascript/flavours/glitch/components/status_icons.jsx
+++ b/app/javascript/flavours/glitch/components/status_icons.jsx
@ -6,15 +6,21 @@ import { defineMessages, injectIntl } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';

-
-//  Mastodon imports.
+import ExpandLessIcon from '@/material-icons/400-24px/expand_less.svg?react';
+import ForumIcon from '@/material-icons/400-24px/forum.svg?react';
+import HomeIcon from '@/material-icons/400-24px/home.svg?react';
+import ImageIcon from '@/material-icons/400-24px/image.svg?react';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
+import LinkIcon from '@/material-icons/400-24px/link.svg?react';
+import MovieIcon from '@/material-icons/400-24px/movie.svg?react';
+import MusicNoteIcon from '@/material-icons/400-24px/music_note.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
 import { languages } from 'flavours/glitch/initial_state';

-import { IconButton } from './icon_button';
-import VisibilityIcon from './status_visibility_icon';

-//  Messages for use with internationalization stuff.
+import { IconButton } from './icon_button';
+import { VisibilityIcon } from './visibility_icon';
+
 const messages = defineMessages({
  collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
  uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
@ -65,34 +71,47 @@ class StatusIcons extends PureComponent {
    }
  };

-  mediaIconTitleText (mediaIcon) {
+  renderIcon (mediaIcon) {
    const { intl } = this.props;

-    const message = {
-      'link': messages.previewCard,
-      'picture-o': messages.pictures,
-      'tasks': messages.poll,
-      'video-camera': messages.video,
-      'music': messages.audio,
-    }[mediaIcon];
+    let title, iconComponent;

-    return message && intl.formatMessage(message);
-  }
+    switch (mediaIcon) {
+    case 'link':
+      title = messages.previewCard;
+      iconComponent = LinkIcon;
+      break;
+    case 'picture-o':
+      title = messages.pictures;
+      iconComponent = ImageIcon;
+      break;
+    case 'tasks':
+      title = messages.poll;
+      iconComponent = InsertChartIcon;
+      break;
+    case 'video-camera':
+      title = messages.video;
+      iconComponent = MovieIcon;
+      break;
+    case 'music':
+      title = messages.audio;
+      iconComponent = MusicNoteIcon;
+      break;
+    }

-  renderIcon (mediaIcon) {
    return (
      <Icon
        fixedWidth
        className='status__media-icon'
        key={`media-icon--${mediaIcon}`}
        id={mediaIcon}
+        icon={iconComponent}
        aria-hidden='true'
-        title={this.mediaIconTitleText(mediaIcon)}
+        title={title && intl.formatMessage(title)}
      />
    );
  }

-  //  Rendering.
  render () {
    const {
      status,
@ -109,16 +128,16 @@ class StatusIcons extends PureComponent {
        {settings.get('reply') && status.get('in_reply_to_id', null) !== null ? (
          <Icon
            className='status__reply-icon'
-            fixedWidth
            id='comment'
+            icon={ForumIcon}
            aria-hidden='true'
            title={intl.formatMessage(messages.inReplyTo)}
          />
        ) : null}
        {settings.get('local_only') && status.get('local_only') &&
          <Icon
-            fixedWidth
            id='home'
+            icon={HomeIcon}
            aria-hidden='true'
            title={intl.formatMessage(messages.localOnly)}
          />}
@ -135,6 +154,7 @@ class StatusIcons extends PureComponent {
                intl.formatMessage(messages.collapse)
            }
            icon='angle-double-up'
+            iconComponent={ExpandLessIcon}
            onClick={this.handleCollapsedClick}
          />
        )}
--- a/app/javascript/flavours/glitch/components/status_prepend.jsx
+++ b/app/javascript/flavours/glitch/components/status_prepend.jsx
@ -6,9 +6,16 @@ import { FormattedMessage } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';

+import EditIcon from '@/material-icons/400-24px/edit.svg?react';
+import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
+import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
+import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
+import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
 import { me } from 'flavours/glitch/initial_state';

+
 export default class StatusPrepend extends PureComponent {

  static propTypes = {
@ -115,30 +122,36 @@ export default class StatusPrepend extends PureComponent {
    const { Message } = this;
    const { type } = this.props;

-    let iconId;
+    let iconId, iconComponent;

    switch(type) {
    case 'favourite':
      iconId = 'star';
+      iconComponent = StarIcon;
      break;
    case 'reaction':
      iconId = 'plus';
      break;
    case 'featured':
      iconId = 'thumb-tack';
+      iconComponent = PushPinIcon;
      break;
    case 'poll':
      iconId = 'tasks';
+      iconComponent = InsertChartIcon;
      break;
    case 'reblog':
    case 'reblogged_by':
      iconId = 'retweet';
+      iconComponent = RepeatIcon;
      break;
    case 'status':
      iconId = 'bell';
+      iconComponent = HomeIcon;
      break;
    case 'update':
      iconId = 'pencil';
+      iconComponent = EditIcon;
      break;
    }

@ -148,6 +161,7 @@ export default class StatusPrepend extends PureComponent {
          <Icon
            className={`status__prepend-icon ${type === 'favourite' ? 'star-icon' : ''}`}
            id={iconId}
+            icon={iconComponent}
          />
        </div>
        <Message />
--- a/app/javascript/flavours/glitch/components/status_visibility_icon.jsx
+++ b/app/javascript/flavours/glitch/components/status_visibility_icon.jsx
@ -1,54 +0,0 @@
-//  Package imports  //
-import PropTypes from 'prop-types';
-
-import { defineMessages, injectIntl } from 'react-intl';
-
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import { Icon } from 'flavours/glitch/components/icon';
-
-const messages = defineMessages({
-  public: { id: 'privacy.public.short', defaultMessage: 'Public' },
-  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
-  private: { id: 'privacy.private.short', defaultMessage: 'Followers only' },
-  direct: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' },
-});
-
-class VisibilityIcon extends ImmutablePureComponent {
-
-  static propTypes = {
-    visibility: PropTypes.string,
-    intl: PropTypes.object.isRequired,
-    withLabel: PropTypes.bool,
-  };
-
-  render() {
-    const { withLabel, visibility, intl } = this.props;
-
-    const visibilityIcon = {
-      public: 'globe',
-      unlisted: 'unlock',
-      private: 'lock',
-      direct: 'envelope',
-    }[visibility];
-
-    const label = intl.formatMessage(messages[visibility]);
-
-    const icon = (<Icon
-      className='status__visibility-icon'
-      fixedWidth
-      id={visibilityIcon}
-      title={label}
-      aria-hidden='true'
-    />);
-
-    if (withLabel) {
-      return (<span style={{ whiteSpace: 'nowrap' }}>{icon} {label}</span>);
-    } else {
-      return icon;
-    }
-  }
-
-}
-
-export default injectIntl(VisibilityIcon);
--- a/app/javascript/flavours/glitch/components/verified_badge.tsx
+++ b/app/javascript/flavours/glitch/components/verified_badge.tsx
@ -1,3 +1,5 @@
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
+
 import { Icon } from './icon';

 const domParser = new DOMParser();
@ -21,7 +23,7 @@ interface Props {
 }
 export const VerifiedBadge: React.FC<Props> = ({ link }) => (
  <span className='verified-badge'>
-    <Icon id='check' className='verified-badge__mark' />
+    <Icon id='check' icon={CheckIcon} className='verified-badge__mark' />
    <span dangerouslySetInnerHTML={stripRelMe(link)} />
  </span>
 );
--- a/app/javascript/flavours/glitch/components/visibility_icon.tsx
+++ b/app/javascript/flavours/glitch/components/visibility_icon.tsx
@ -0,0 +1,63 @@
+import { defineMessages, useIntl } from 'react-intl';
+
+import LockIcon from '@/material-icons/400-24px/lock.svg?react';
+import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
+import MailIcon from '@/material-icons/400-24px/mail.svg?react';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
+
+import { Icon } from './icon';
+
+type Visibility = 'public' | 'unlisted' | 'private' | 'direct';
+
+const messages = defineMessages({
+  public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+  private_short: {
+    id: 'privacy.private.short',
+    defaultMessage: 'Followers only',
+  },
+  direct_short: {
+    id: 'privacy.direct.short',
+    defaultMessage: 'Mentioned people only',
+  },
+});
+
+export const VisibilityIcon: React.FC<{ visibility: Visibility }> = ({
+  visibility,
+}) => {
+  const intl = useIntl();
+
+  const visibilityIconInfo = {
+    public: {
+      icon: 'globe',
+      iconComponent: PublicIcon,
+      text: intl.formatMessage(messages.public_short),
+    },
+    unlisted: {
+      icon: 'unlock',
+      iconComponent: LockOpenIcon,
+      text: intl.formatMessage(messages.unlisted_short),
+    },
+    private: {
+      icon: 'lock',
+      iconComponent: LockIcon,
+      text: intl.formatMessage(messages.private_short),
+    },
+    direct: {
+      icon: 'envelope',
+      iconComponent: MailIcon,
+      text: intl.formatMessage(messages.direct_short),
+    },
+  };
+
+  const visibilityIcon = visibilityIconInfo[visibility];
+
+  return (
+    <Icon
+      id={visibilityIcon.icon}
+      icon={visibilityIcon.iconComponent}
+      title={visibilityIcon.text}
+      className={'status__visibility-icon'}
+    />
+  );
+};
--- a/app/javascript/flavours/glitch/containers/mastodon.jsx
+++ b/app/javascript/flavours/glitch/containers/mastodon.jsx
@ -18,8 +18,9 @@ import UI from 'flavours/glitch/features/ui';
 import initialState, { title as siteTitle } from 'flavours/glitch/initial_state';
 import { IntlProvider } from 'flavours/glitch/locales';
 import { store } from 'flavours/glitch/store';
+import { isProduction } from 'flavours/glitch/utils/environment';

-const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`;
+const title = isProduction() ? siteTitle : `${siteTitle} (Dev)`;

 const hydrateAction = hydrateStore(initialState);

--- a/app/javascript/flavours/glitch/features/about/index.jsx
+++ b/app/javascript/flavours/glitch/features/about/index.jsx
@ -10,6 +10,9 @@ import { List as ImmutableList } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';

+
+import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
+import ExpandMoreIcon from '@/material-icons/400-24px/expand_more.svg?react';
 import { fetchServer, fetchExtendedDescription, fetchDomainBlocks  } from 'flavours/glitch/actions/server';
 import Column from 'flavours/glitch/components/column';
 import { Icon  }  from 'flavours/glitch/components/icon';
@ -73,7 +76,7 @@ class Section extends PureComponent {
    return (
      <div className={classNames('about__section', { active: !collapsed })}>
        <div className='about__section__title' role='button' tabIndex={0} onClick={this.handleClick}>
-          <Icon id={collapsed ? 'chevron-right' : 'chevron-down'} fixedWidth /> {title}
+          <Icon id={collapsed ? 'chevron-right' : 'chevron-down'} icon={collapsed ? ChevronRightIcon : ExpandMoreIcon} /> {title}
        </div>

        {!collapsed && (
--- a/app/javascript/flavours/glitch/features/account/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/action_bar.jsx
@ -6,8 +6,10 @@ import { NavLink } from 'react-router-dom';

 import ImmutablePropTypes from 'react-immutable-proptypes';

+import InfoIcon from '@/material-icons/400-24px/info.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';

+
 class ActionBar extends PureComponent {

  static propTypes = {
@ -28,7 +30,8 @@ class ActionBar extends PureComponent {
      return (
        <div>
          <div className='account__disclaimer'>
-            <Icon id='info-circle' fixedWidth /> <FormattedMessage
+            <Icon id='info-circle' icon={InfoIcon} />
+            <FormattedMessage
              id='account.suspended_disclaimer_full'
              defaultMessage='This user has been suspended by a moderator.'
            />
@ -42,14 +45,17 @@ class ActionBar extends PureComponent {
    if (account.get('acct') !== account.get('username')) {
      extraInfo = (
        <div className='account__disclaimer'>
-          <Icon id='info-circle' fixedWidth /> <FormattedMessage
-            id='account.disclaimer_full'
-            defaultMessage="Information below may reflect the user's profile incompletely."
-          />
-          {' '}
-          <a target='_blank' rel='noopener' href={account.get('url')}>
-            <FormattedMessage id='account.view_full_profile' defaultMessage='View full profile' />
-          </a>
+          <Icon id='info-circle' icon={InfoIcon} />
+          <div>
+            <FormattedMessage
+              id='account.disclaimer_full'
+              defaultMessage="Information below may reflect the user's profile incompletely."
+            />
+            {' '}
+            <a target='_blank' rel='noopener' href={account.get('url')}>
+              <FormattedMessage id='account.view_full_profile' defaultMessage='View full profile' />
+            </a>
+          </div>
        </div>
      );
    }
--- a/app/javascript/flavours/glitch/features/account/components/featured_tags.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/featured_tags.jsx
@ -5,7 +5,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

-import Hashtag from 'flavours/glitch/components/hashtag';
+import { Hashtag } from 'flavours/glitch/components/hashtag';

 const messages = defineMessages({
  lastStatusAt: { id: 'account.featured_tags.last_status_at', defaultMessage: 'Last post on {date}' },
--- a/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx
@ -3,7 +3,10 @@ import { FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

-import { Icon } from 'flavours/glitch/components/icon';
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import { Icon }  from 'flavours/glitch/components/icon';
+

 export default class FollowRequestNote extends ImmutablePureComponent {

@ -22,12 +25,12 @@ export default class FollowRequestNote extends ImmutablePureComponent {

        <div className='follow-request-banner__action'>
          <button type='button' className='button button-tertiary button--confirmation' onClick={onAuthorize}>
-            <Icon id='check' fixedWidth />
+            <Icon id='check' icon={CheckIcon} />
            <FormattedMessage id='follow_request.authorize' defaultMessage='Authorize' />
          </button>

          <button type='button' className='button button-tertiary button--destructive' onClick={onReject}>
-            <Icon id='times' fixedWidth />
+            <Icon id='times' icon={CloseIcon} />
            <FormattedMessage id='follow_request.reject' defaultMessage='Reject' />
          </button>
        </div>
--- a/app/javascript/flavours/glitch/features/account/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/header.jsx
@ -9,7 +9,14 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

+
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
+import LockIcon from '@/material-icons/400-24px/lock.svg?react';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
+import NotificationsActiveIcon from '@/material-icons/400-24px/notifications_active-fill.svg?react';
 import { Avatar } from 'flavours/glitch/components/avatar';
+import { Badge, AutomatedBadge, GroupBadge } from 'flavours/glitch/components/badge';
 import { Button } from 'flavours/glitch/components/button';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { IconButton } from 'flavours/glitch/components/icon_button';
@ -188,7 +195,7 @@ class Header extends ImmutablePureComponent {
    }

    if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) {
-      bellBtn = <IconButton icon={account.getIn(['relationship', 'notifying']) ? 'bell' : 'bell-o'} size={24} active={account.getIn(['relationship', 'notifying'])} title={intl.formatMessage(account.getIn(['relationship', 'notifying']) ? messages.disableNotifications : messages.enableNotifications, { name: account.get('username') })} onClick={this.props.onNotifyToggle} />;
+      bellBtn = <IconButton icon={account.getIn(['relationship', 'notifying']) ? 'bell' : 'bell-o'} iconComponent={account.getIn(['relationship', 'notifying']) ? NotificationsActiveIcon : NotificationsIcon} active={account.getIn(['relationship', 'notifying'])} title={intl.formatMessage(account.getIn(['relationship', 'notifying']) ? messages.disableNotifications : messages.enableNotifications, { name: account.get('username') })} onClick={this.props.onNotifyToggle} />;
    }

    if (me !== account.get('id')) {
@ -214,7 +221,7 @@ class Header extends ImmutablePureComponent {
    }

    if (account.get('locked')) {
-      lockedIcon = <Icon id='lock' title={intl.formatMessage(messages.account_locked)} />;
+      lockedIcon = <Icon id='lock' icon={LockIcon} title={intl.formatMessage(messages.account_locked)} />;
    }

    if (signedIn && account.get('id') !== me && !account.get('suspended')) {
@ -308,20 +315,17 @@ class Header extends ImmutablePureComponent {
    const acct            = isLocal && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
    const isIndexable     = !account.get('noindex');

-    let badge;
+    const badges = [];

    if (account.get('bot')) {
-      badge = (<div className='account-role bot'><FormattedMessage id='account.badges.bot' defaultMessage='Automated' /></div>);
+      badges.push(<AutomatedBadge key='bot-badge' />);
    } else if (account.get('group')) {
-      badge = (<div className='account-role group'><FormattedMessage id='account.badges.group' defaultMessage='Group' /></div>);
-    } else {
-      badge = null;
+      badges.push(<GroupBadge key='group-badge' />);
    }

-    let role = null;
-    if (account.getIn(['roles', 0])) {
-      role = (<div key='role' className={`account-role user-role-${account.getIn(['roles', 0, 'id'])}`}>{account.getIn(['roles', 0, 'name'])}</div>);
-    }
+    account.get('roles', []).forEach((role) => {
+      badges.push(<Badge key={`role-badge-${role.get('id')}`} label={<span>{role.get('name')}</span>} domain={domain} />);
+    });

    return (
      <div className={classNames('account__header', { inactive: !!account.get('moved') })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
@ -339,7 +343,6 @@ class Header extends ImmutablePureComponent {
          <div className='account__header__tabs'>
            <a className='avatar' href={account.get('avatar')} rel='noopener noreferrer' target='_blank' onClick={this.handleAvatarClick}>
              <Avatar account={suspended || hidden ? undefined : account} size={90} />
-              {role}
            </a>

            <div className='account__header__tabs__buttons'>
@ -350,19 +353,25 @@ class Header extends ImmutablePureComponent {
                </>
              )}

-              <DropdownMenuContainer disabled={menu.length === 0} items={menu} icon='ellipsis-v' size={24} direction='right' />
+              <DropdownMenuContainer disabled={menu.length === 0} items={menu} icon='ellipsis-v' iconComponent={MoreHorizIcon} size={24} direction='right' />
            </div>
          </div>

          <div className='account__header__tabs__name'>
            <h1>
-              <span dangerouslySetInnerHTML={displayNameHtml} /> {badge}
+              <span dangerouslySetInnerHTML={displayNameHtml} />
              <small>
                <span>@{acct}</span> {lockedIcon}
              </small>
            </h1>
          </div>

+          {badges.length > 0 && (
+            <div className='account__header__badges'>
+              {badges}
+            </div>
+          )}
+
          {signedIn && <AccountNoteContainer account={account} />}

          {!(suspended || hidden) && (
@ -375,7 +384,7 @@ class Header extends ImmutablePureComponent {
                        <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />

                        <dd className={pair.get('verified_at') && 'verified'} title={pair.get('value_plain')}>
-                          {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} className='translate' />
+                          {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' icon={CheckIcon} className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} className='translate' />
                        </dd>
                      </dl>
                    ))}
--- a/app/javascript/flavours/glitch/features/account/components/profile_column_header.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/profile_column_header.jsx
@ -3,6 +3,8 @@ import { PureComponent } from 'react';

 import { injectIntl, defineMessages } from 'react-intl';

+import PersonIcon from '@/material-icons/400-24px/person.svg?react';
+
 import ColumnHeader from '../../../components/column_header';

 const messages = defineMessages({
@ -23,6 +25,7 @@ class ProfileColumnHeader extends PureComponent {
    return (
      <ColumnHeader
        icon='user-circle'
+        iconComponent={PersonIcon}
        title={intl.formatMessage(messages.profile)}
        onClick={onClick}
        showBackButton
--- a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx
+++ b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx
@ -5,10 +5,14 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

+import AudiotrackIcon from '@/material-icons/400-24px/music_note.svg?react';
+import PlayArrowIcon from '@/material-icons/400-24px/play_arrow.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
 import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state';

+
 export default class MediaItem extends ImmutablePureComponent {

  static propTypes = {
@ -69,7 +73,7 @@ export default class MediaItem extends ImmutablePureComponent {
    if (!visible) {
      icon = (
        <span className='account-gallery__item__icons'>
-          <Icon id='eye-slash' />
+          <Icon id='eye-slash' icon={VisibilityOffIcon} />
        </span>
      );
    } else {
@ -84,9 +88,9 @@ export default class MediaItem extends ImmutablePureComponent {
        );

        if (attachment.get('type') === 'audio') {
-          label = <Icon id='music' />;
+          label = <Icon id='music' icon={AudiotrackIcon} />;
        } else {
-          label = <Icon id='play' />;
+          label = <Icon id='play' icon={PlayArrowIcon} />;
        }
      } else if (attachment.get('type') === 'image') {
        const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;
--- a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx
@ -5,6 +5,8 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

+
+import TripIcon from '@/material-icons/400-24px/trip.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';

@ -35,7 +37,7 @@ class MovedNote extends ImmutablePureComponent {
    return (
      <div className='account__moved-note'>
        <div className='account__moved-note__message'>
-          <div className='account__moved-note__icon-wrapper'><Icon id='suitcase' className='account__moved-note__icon' fixedWidth /></div>
+          <div className='account__moved-note__icon-wrapper'><Icon id='suitcase' className='account__moved-note__icon' icon={TripIcon} /></div>
          <FormattedMessage id='account.moved_to' defaultMessage='{name} has indicated that their new account is now:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
        </div>

--- a/app/javascript/flavours/glitch/features/audio/index.jsx
+++ b/app/javascript/flavours/glitch/features/audio/index.jsx
@ -9,9 +9,16 @@ import { is } from 'immutable';

 import { throttle, debounce } from 'lodash';

+import DownloadIcon from '@/material-icons/400-24px/download.svg?react';
+import PauseIcon from '@/material-icons/400-24px/pause.svg?react';
+import PlayArrowIcon from '@/material-icons/400-24px/play_arrow-fill.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
+import VolumeOffIcon from '@/material-icons/400-24px/volume_off-fill.svg?react';
+import VolumeUpIcon from '@/material-icons/400-24px/volume_up-fill.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { formatTime, getPointerPosition, fileNameFromURL } from 'flavours/glitch/features/video';

+
 import { Blurhash } from '../../components/blurhash';
 import { displayMedia, useBlurhash } from '../../initial_state';

@ -560,8 +567,8 @@ class Audio extends PureComponent {
        <div className='video-player__controls active'>
          <div className='video-player__buttons-bar'>
            <div className='video-player__buttons left'>
-              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
-              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
+              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} icon={paused ? PlayArrowIcon : PauseIcon} /></button>
+              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} icon={muted ? VolumeOffIcon : VolumeUpIcon} /></button>

              <div className={classNames('video-player__volume', { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
                <div className='video-player__volume__current' style={{ width: `${muted ? 0 : volume * 100}%`, backgroundColor: this._getAccentColor() }} />
@ -581,9 +588,9 @@ class Audio extends PureComponent {
            </div>

            <div className='video-player__buttons right'>
-              {!editable && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
+              {!editable && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' icon={VisibilityOffIcon} /></button>}
              <a title={intl.formatMessage(messages.download)} aria-label={intl.formatMessage(messages.download)} className='video-player__download__icon player-button' href={this.props.src} download>
-                <Icon id={'download'} fixedWidth />
+                <Icon id={'download'} icon={DownloadIcon} />
              </a>
            </div>
          </div>
--- a/app/javascript/flavours/glitch/features/blocks/index.jsx
+++ b/app/javascript/flavours/glitch/features/blocks/index.jsx
@ -8,8 +8,9 @@ import { connect } from 'react-redux';

 import { debounce } from 'lodash';

+import BlockIcon from '@/material-icons/400-24px/block-fill.svg?react';
+
 import { fetchBlocks, expandBlocks } from '../../actions/blocks';
-import ColumnBackButtonSlim from '../../components/column_back_button_slim';
 import { LoadingIndicator } from '../../components/loading_indicator';
 import ScrollableList from '../../components/scrollable_list';
 import AccountContainer from '../../containers/account_container';
@ -59,8 +60,7 @@ class Blocks extends ImmutablePureComponent {
    const emptyMessage = <FormattedMessage id='empty_column.blocks' defaultMessage="You haven't blocked any users yet." />;

    return (
-      <Column bindToDocument={!multiColumn} icon='ban' heading={intl.formatMessage(messages.heading)}>
-        <ColumnBackButtonSlim />
+      <Column bindToDocument={!multiColumn} icon='ban' iconComponent={BlockIcon} heading={intl.formatMessage(messages.heading)} alwaysShowBackButton>
        <ScrollableList
          scrollKey='blocks'
          onLoadMore={this.handleLoadMore}
--- a/app/javascript/flavours/glitch/features/bookmarked_statuses/index.jsx
+++ b/app/javascript/flavours/glitch/features/bookmarked_statuses/index.jsx
@ -10,6 +10,7 @@ import { connect } from 'react-redux';

 import { debounce } from 'lodash';

+import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
 import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'flavours/glitch/actions/bookmarks';
 import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
 import ColumnHeader from 'flavours/glitch/components/column_header';
@ -79,7 +80,8 @@ class Bookmarks extends ImmutablePureComponent {
    return (
      <Column bindToDocument={!multiColumn} ref={this.setRef}>
        <ColumnHeader
-          icon='bookmark'
+          icon='bookmarks'
+          iconComponent={BookmarksIcon}
          title={intl.formatMessage(messages.heading)}
          onPin={this.handlePin}
          onMove={this.handleMove}
--- a/app/javascript/flavours/glitch/features/community_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/community_timeline/index.jsx
@ -7,6 +7,8 @@ import { Helmet } from 'react-helmet';

 import { connect } from 'react-redux';

+
+import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
 import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
 import { domain } from 'flavours/glitch/initial_state';

@ -131,6 +133,7 @@ class CommunityTimeline extends PureComponent {
      <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
        <ColumnHeader
          icon='users'
+          iconComponent={PeopleIcon}
          active={hasUnread}
          title={intl.formatMessage(messages.title)}
          onPin={this.handlePin}
--- a/app/javascript/flavours/glitch/features/compose/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/action_bar.jsx
@ -5,8 +5,10 @@ import { defineMessages, injectIntl } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';

+import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
 import { preferencesLink, profileLink } from 'flavours/glitch/utils/backend_links';

+
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';

 const messages = defineMessages({
@ -62,7 +64,7 @@ class ActionBar extends PureComponent {
    return (
      <div className='compose__action-bar'>
        <div className='compose__action-bar-dropdown'>
-          <DropdownMenuContainer items={menu} icon='bars' size={18} direction='right' />
+          <DropdownMenuContainer items={menu} icon='bars' iconComponent={MenuIcon} size={24} direction='right' />
        </div>
      </div>
    );
--- a/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx
@ -18,8 +18,10 @@ export default class ComposerOptionsDropdown extends PureComponent {
    isUserTouching: PropTypes.func,
    disabled: PropTypes.bool,
    icon: PropTypes.string,
+    iconComponent: PropTypes.func,
    items: PropTypes.arrayOf(PropTypes.shape({
      icon: PropTypes.string,
+      iconComponent: PropTypes.func,
      meta: PropTypes.string,
      name: PropTypes.string.isRequired,
      text: PropTypes.string,
@ -174,6 +176,7 @@ export default class ComposerOptionsDropdown extends PureComponent {
      disabled,
      title,
      icon,
+      iconComponent,
      items,
      onChange,
      value,
@ -183,33 +186,30 @@ export default class ComposerOptionsDropdown extends PureComponent {
    } = this.props;
    const { open, placement } = this.state;

-    const active = value && items.findIndex(({ name }) => name === value) === (placement === 'bottom' ? 0 : (items.length - 1));
-
    return (
      <div
        className={classNames('privacy-dropdown', placement, { active: open })}
        onKeyDown={this.handleKeyDown}
        ref={this.setTargetRef}
      >
-        <div className={classNames('privacy-dropdown__value', { active })}>
-          <IconButton
-            active={open}
-            className='privacy-dropdown__value-icon'
-            disabled={disabled}
-            icon={icon}
-            inverted
-            onClick={this.handleToggle}
-            onMouseDown={this.handleMouseDown}
-            onKeyDown={this.handleButtonKeyDown}
-            onKeyPress={this.handleKeyPress}
-            size={18}
-            style={{
-              height: null,
-              lineHeight: '27px',
-            }}
-            title={title}
-          />
-        </div>
+        <IconButton
+          active={open}
+          className='privacy-dropdown__value-icon'
+          disabled={disabled}
+          icon={icon}
+          iconComponent={iconComponent}
+          inverted
+          onClick={this.handleToggle}
+          onMouseDown={this.handleMouseDown}
+          onKeyDown={this.handleButtonKeyDown}
+          onKeyPress={this.handleKeyPress}
+          size={18}
+          style={{
+            height: null,
+            lineHeight: '27px',
+          }}
+          title={title}
+        />

        <Overlay
          containerPadding={20}
--- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
@ -17,6 +17,7 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
  static propTypes = {
    items: PropTypes.arrayOf(PropTypes.shape({
      icon: PropTypes.string,
+      iconComponent: PropTypes.func,
      meta: PropTypes.node,
      name: PropTypes.string.isRequired,
      text: PropTypes.node,
@ -144,7 +145,7 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
  };

  renderItem = (item, i) => {
-    const { name, icon, meta, text } = item;
+    const { name, icon, iconComponent, meta, text } = item;

    const active = (name === (this.props.value || this.state.value));

@ -155,7 +156,7 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
    if (!contents) {
      contents = (
        <>
-          {icon && <Icon className='icon' fixedWidth id={icon} />}
+          {icon && <Icon className='icon' id={icon} icon={iconComponent} />}

          <div className='privacy-dropdown__option__content'>
            <strong>{text}</strong>
--- a/app/javascript/flavours/glitch/features/compose/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/header.jsx
@ -7,10 +7,18 @@ import { Link } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

+import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
+import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
+import LogoutIcon from '@/material-icons/400-24px/logout.svg?react';
+import ManufacturingIcon from '@/material-icons/400-24px/manufacturing.svg?react';
+import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
+import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
 import { signOutLink } from 'flavours/glitch/utils/backend_links';
 import { conditionalRender } from 'flavours/glitch/utils/react_helpers';

+
 const messages = defineMessages({
  community: {
    defaultMessage: 'Local timeline',
@ -79,22 +87,25 @@ class Header extends ImmutablePureComponent {
          aria-label={intl.formatMessage(messages.start)}
          title={intl.formatMessage(messages.start)}
          to='/getting-started'
-        ><Icon id='asterisk' /></Link>
+          className='drawer__tab'
+        ><Icon id='bars' icon={MenuIcon} /></Link>
        {renderForColumn('HOME', (
          <Link
            aria-label={intl.formatMessage(messages.home_timeline)}
            title={intl.formatMessage(messages.home_timeline)}
            to='/home'
-          ><Icon id='home' /></Link>
+            className='drawer__tab'
+          ><Icon id='home' icon={HomeIcon} /></Link>
        ))}
        {renderForColumn('NOTIFICATIONS', (
          <Link
            aria-label={intl.formatMessage(messages.notifications)}
            title={intl.formatMessage(messages.notifications)}
            to='/notifications'
+            className='drawer__tab'
          >
            <span className='icon-badge-wrapper'>
-              <Icon id='bell' />
+              <Icon id='bell' icon={NotificationsIcon} />
              { showNotificationsBadge && unreadNotifications > 0 && <div className='icon-badge' />}
            </span>
          </Link>
@ -104,27 +115,31 @@ class Header extends ImmutablePureComponent {
            aria-label={intl.formatMessage(messages.community)}
            title={intl.formatMessage(messages.community)}
            to='/public/local'
-          ><Icon id='users' /></Link>
+            className='drawer__tab'
+          ><Icon id='users' icon={PeopleIcon} /></Link>
        ))}
        {renderForColumn('PUBLIC', (
          <Link
            aria-label={intl.formatMessage(messages.public)}
            title={intl.formatMessage(messages.public)}
            to='/public'
-          ><Icon id='globe' /></Link>
+            className='drawer__tab'
+          ><Icon id='globe' icon={PublicIcon} /></Link>
        ))}
        <a
          aria-label={intl.formatMessage(messages.settings)}
          onClick={onSettingsClick}
          href='/settings/preferences'
          title={intl.formatMessage(messages.settings)}
-        ><Icon id='cogs' /></a>
+          className='drawer__tab'
+        ><Icon id='cogs' icon={ManufacturingIcon} /></a>
        <a
          aria-label={intl.formatMessage(messages.logout)}
          onClick={this.handleLogoutClick}
          href={signOutLink}
          title={intl.formatMessage(messages.logout)}
-        ><Icon id='sign-out' /></a>
+          className='drawer__tab'
+        ><Icon id='sign-out' icon={LogoutIcon} /></a>
      </nav>
    );
  }
--- a/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx
@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

-import Permalink from 'flavours/glitch/components/permalink';
+import { Permalink } from 'flavours/glitch/components/permalink';
 import { profileLink } from 'flavours/glitch/utils/backend_links';

 import { Avatar } from '../../../components/avatar';
--- a/app/javascript/flavours/glitch/features/compose/components/options.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/options.jsx
@ -8,9 +8,18 @@ import { connect } from 'react-redux';

 import Toggle from 'react-toggle';

+import AttachFileIcon from '@/material-icons/400-24px/attach_file.svg?react';
+import BrushIcon from '@/material-icons/400-24px/brush.svg?react';
+import CodeIcon from '@/material-icons/400-24px/code.svg?react';
+import DescriptionIcon from '@/material-icons/400-24px/description.svg?react';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
+import MarkdownIcon from '@/material-icons/400-24px/markdown.svg?react';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import UploadFileIcon from '@/material-icons/400-24px/upload_file.svg?react';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import { pollLimits } from 'flavours/glitch/initial_state';

+
 import DropdownContainer from '../containers/dropdown_container';
 import LanguageDropdown from '../containers/language_dropdown_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
@ -195,16 +204,19 @@ class ComposerOptions extends ImmutablePureComponent {
    const contentTypeItems = {
      plain: {
        icon: 'file-text',
+        iconComponent: DescriptionIcon,
        name: 'text/plain',
        text: formatMessage(messages.plain),
      },
      html: {
        icon: 'code',
+        iconComponent: CodeIcon,
        name: 'text/html',
        text: formatMessage(messages.html),
      },
      markdown: {
        icon: 'arrow-circle-down',
+        iconComponent: MarkdownIcon,
        name: 'text/markdown',
        text: formatMessage(messages.markdown),
      },
@ -226,14 +238,17 @@ class ComposerOptions extends ImmutablePureComponent {
        <DropdownContainer
          disabled={disabled || !allowMedia}
          icon='paperclip'
+          iconComponent={AttachFileIcon}
          items={[
            {
              icon: 'cloud-upload',
+              iconComponent: UploadFileIcon,
              name: 'upload',
              text: formatMessage(messages.upload),
            },
            {
              icon: 'paint-brush',
+              iconComponent: BrushIcon,
              name: 'doodle',
              text: formatMessage(messages.doodle),
            },
@ -246,6 +261,7 @@ class ComposerOptions extends ImmutablePureComponent {
            active={hasPoll}
            disabled={disabled || !allowPoll}
            icon='tasks'
+            iconComponent={InsertChartIcon}
            inverted
            onClick={onTogglePoll}
            size={18}
@ -256,12 +272,12 @@ class ComposerOptions extends ImmutablePureComponent {
            title={formatMessage(hasPoll ? messages.remove_poll : messages.add_poll)}
          />
        )}
-        <hr />
        <PrivacyDropdownContainer disabled={disabled || isEditing} />
        {showContentTypeChoice && (
          <DropdownContainer
            disabled={disabled}
            icon={(contentTypeItems[contentType.split('/')[1]] || {}).icon}
+            iconComponent={(contentTypeItems[contentType.split('/')[1]] || {}).iconComponent}
            items={[
              contentTypeItems.plain,
              contentTypeItems.html,
@ -285,6 +301,7 @@ class ComposerOptions extends ImmutablePureComponent {
        <DropdownContainer
          disabled={disabled || isEditing}
          icon='ellipsis-h'
+          iconComponent={MoreHorizIcon}
          items={advancedOptions ? [
            {
              meta: formatMessage(messages.local_only_long),
--- a/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx
@ -8,6 +8,9 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

+
+import AddIcon from '@/material-icons/400-24px/add.svg?react';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import AutosuggestInput from 'flavours/glitch/components/autosuggest_input';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { IconButton } from 'flavours/glitch/components/icon_button';
@ -87,7 +90,7 @@ class OptionIntl extends PureComponent {
        </label>

        <div className='poll__cancel'>
-          <IconButton disabled={index <= 1} title={intl.formatMessage(messages.remove_option)} icon='times' onClick={this.handleOptionRemove} />
+          <IconButton disabled={index <= 1} title={intl.formatMessage(messages.remove_option)} icon='times' iconComponent={CloseIcon} onClick={this.handleOptionRemove} />
        </div>
      </li>
    );
@ -143,7 +146,7 @@ class PollForm extends ImmutablePureComponent {
          {options.size < pollLimits.max_options && (
            <label className='poll__text editable'>
              <span className={classNames('poll__input')} style={{ opacity: 0 }} />
-              <button className='button button-secondary' onClick={this.handleAddOption} type='button'><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button>
+              <button className='button button-secondary' onClick={this.handleAddOption} type='button'><Icon id='plus' icon={AddIcon} /> <FormattedMessage {...messages.add_option} /></button>
            </label>
          )}
        </ul>
--- a/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx
@ -3,6 +3,11 @@ import { PureComponent } from 'react';

 import { injectIntl, defineMessages } from 'react-intl';

+import LockIcon from '@/material-icons/400-24px/lock.svg?react';
+import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
+import MailIcon from '@/material-icons/400-24px/mail.svg?react';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
+
 import Dropdown from './dropdown';

 const messages = defineMessages({
@ -39,24 +44,28 @@ class PrivacyDropdown extends PureComponent {
    const privacyItems = {
      direct: {
        icon: 'envelope',
+        iconComponent: MailIcon,
        meta: formatMessage(messages.direct_long),
        name: 'direct',
        text: formatMessage(messages.direct_short),
      },
      private: {
        icon: 'lock',
+        iconComponent: LockIcon,
        meta: formatMessage(messages.private_long),
        name: 'private',
        text: formatMessage(messages.private_short),
      },
      public: {
        icon: 'globe',
+        iconComponent: PublicIcon,
        meta: formatMessage(messages.public_long),
        name: 'public',
        text: formatMessage(messages.public_short),
      },
      unlisted: {
        icon: 'unlock',
+        iconComponent: LockOpenIcon,
        meta: formatMessage(messages.unlisted_long),
        name: 'unlisted',
        text: formatMessage(messages.unlisted_short),
@ -73,6 +82,7 @@ class PrivacyDropdown extends PureComponent {
      <Dropdown
        disabled={disabled}
        icon={(privacyItems[value] || {}).icon}
+        iconComponent={(privacyItems[value] || {}).iconComponent}
        items={items}
        onChange={onChange}
        isUserTouching={isUserTouching}
--- a/app/javascript/flavours/glitch/features/compose/components/publisher.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/publisher.jsx
@ -4,9 +4,14 @@ import { defineMessages, injectIntl } from 'react-intl';

 import ImmutablePureComponent from 'react-immutable-pure-component';

+import LockIcon from '@/material-icons/400-24px/lock.svg?react';
+import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
+import MailIcon from '@/material-icons/400-24px/mail.svg?react';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 import { Button } from 'flavours/glitch/components/button';
 import { Icon } from 'flavours/glitch/components/icon';

+
 const messages = defineMessages({
  publish: {
    defaultMessage: 'Publish',
@ -37,16 +42,33 @@ class Publisher extends ImmutablePureComponent {
  render () {
    const { disabled, intl, onSecondarySubmit, privacy, sideArm, isEditing } = this.props;

-    const privacyIcons = { direct: 'envelope', private: 'lock', public: 'globe', unlisted: 'unlock' };
+    const privacyIcons = {
+      direct: {
+        id: 'envelope',
+        icon: MailIcon,
+      },
+      private: {
+        id: 'lock',
+        icon: LockIcon,
+      },
+      public: {
+        id: 'globe',
+        icon: PublicIcon,
+      },
+      unlisted: {
+        id: 'unlock',
+        icon: LockOpenIcon,
+      },
+    };

    let publishText;
    if (isEditing) {
      publishText = intl.formatMessage(messages.saveChanges);
    } else if (privacy === 'private' || privacy === 'direct') {
-      const iconId = privacyIcons[privacy];
+      const icon = privacyIcons[privacy];
      publishText = (
        <span>
-          <Icon id={iconId} /> {intl.formatMessage(messages.publish)}
+          <Icon {...icon} /> {intl.formatMessage(messages.publish)}
        </span>
      );
    } else {
@ -69,7 +91,7 @@ class Publisher extends ImmutablePureComponent {
              disabled={disabled}
              onClick={onSecondarySubmit}
              style={{ padding: null }}
-              text={<Icon id={privacyIcons[sideArm]} />}
+              text={<Icon {...privacyIcons[sideArm]} />}
              title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[sideArm])}`}
            />
          </div>
--- a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
@ -5,6 +5,8 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

+
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import { WithOptionalRouterPropTypes, withOptionalRouter } from 'flavours/glitch/utils/react_router';

@ -48,7 +50,7 @@ class ReplyIndicator extends ImmutablePureComponent {
    return (
      <div className='reply-indicator'>
        <div className='reply-indicator__header'>
-          <div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} inverted /></div>
+          <div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' iconComponent={CloseIcon} onClick={this.handleClick} inverted /></div>

          <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name' target='_blank' rel='noopener noreferrer'>
            <div className='reply-indicator__display-avatar'><Avatar account={status.get('account')} size={24} /></div>
--- a/app/javascript/flavours/glitch/features/compose/components/search.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/search.jsx
@ -8,6 +8,10 @@ import { withRouter } from 'react-router-dom';

 import ImmutablePropTypes from 'react-immutable-proptypes';

+
+import CancelIcon from '@/material-icons/400-24px/cancel-fill.svg?react';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import SearchIcon from '@/material-icons/400-24px/search.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { domain, searchEnabled } from 'flavours/glitch/initial_state';
 import { HASHTAG_REGEX } from 'flavours/glitch/utils/hashtags';
@ -333,8 +337,8 @@ class Search extends PureComponent {
        />

        <div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>
-          <Icon id='search' className={hasValue ? '' : 'active'} />
-          <Icon id='times-circle' className={hasValue ? 'active' : ''} />
+          <Icon id='search' icon={SearchIcon}  className={hasValue ? '' : 'active'} />
+          <Icon id='times-circle' icon={CancelIcon} className={hasValue ? 'active' : ''} />
        </div>

        <div className='search__popout'>
@ -346,7 +350,7 @@ class Search extends PureComponent {
                {recent.size > 0 ? this._getOptions().map(({ label, action, forget }, i) => (
                  <button key={label} onMouseDown={action} className={classNames('search__popout__menu__item search__popout__menu__item--flex', { selected: selectedOption === i })}>
                    <span>{label}</span>
-                    <button className='icon-button' onMouseDown={forget}><Icon id='times' /></button>
+                    <button className='icon-button' onMouseDown={forget}><Icon id='times' icon={CloseIcon} /></button>
                  </button>
                )) : (
                  <div className='search__popout__menu__message'>
--- a/Show More
+++ b/Show More
 @ -1 +1 @@
 .9
 .11