Merge pull request #2573 from ClearlyClaire/glitch-soc/merge-upstream

Merge upstream changes up to 01b6c83c36

.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

.devcontainer/docker-compose.yml

@@ -70,7 +70,7 @@ services:
         hard: -1
 
   libretranslate:
-    image: libretranslate/libretranslate:v1.5.3
+    image: libretranslate/libretranslate:v1.5.4
     restart: unless-stopped
     volumes:
       - lt-data:/home/libretranslate/.local

.rubocop.yml

@@ -103,9 +103,16 @@ 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: 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.

.rubocop_todo.yml

@@ -64,13 +64,6 @@ Rails/HasAndBelongsToMany:
     - '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'
@@ -87,41 +80,6 @@ Rails/RakeEnvironment:
     - '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:

Gemfile

@@ -39,8 +39,7 @@ end
 
 gem 'net-ldap', '~> 0.18'
 
-# TODO: Point back at released omniauth-cas gem when new version is released
+gem 'omniauth-cas', '~> 3.0.0.beta.1'
-gem 'omniauth-cas', github: 'dlindahl/omniauth-cas', ref: '9d9d3a91b316c55d49ab6e621977f2067010c5bf'
 gem 'omniauth-saml', '~> 2.0'
 gem 'omniauth_openid_connect', '~> 0.6.1'
 gem 'omniauth', '~> 2.0'

Gemfile.lock

@@ -7,16 +7,6 @@ GIT
       hkdf (~> 0.2)
       jwt (~> 2.0)
 
-GIT
-  remote: https://github.com/dlindahl/omniauth-cas.git
-  revision: 9d9d3a91b316c55d49ab6e621977f2067010c5bf
-  ref: 9d9d3a91b316c55d49ab6e621977f2067010c5bf
-  specs:
-    omniauth-cas (3.0.0)
-      addressable (~> 2.8)
-      nokogiri (~> 1.12)
-      omniauth (~> 2.1)
-
 GIT
   remote: https://github.com/jhawthorn/nsa.git
   revision: e020fcc3a54d993ab45b7194d89ab720296c111b
@@ -165,7 +155,7 @@ 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.1)
       racc
@@ -267,7 +257,7 @@ GEM
       tzinfo
     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)
@@ -484,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)
@@ -736,7 +730,7 @@ 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)
@@ -894,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)

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

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

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

app/javascript/__mocks__/svg.js

@@ -1,3 +1,3 @@
-// eslint-disable-next-line import/no-anonymous-default-export
+const ReactComponent = 'div';
-export default 'SvgrURL';
+
-export const ReactComponent = 'div';
+export default ReactComponent;

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';

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

app/javascript/flavours/glitch/components/attachment_list.jsx

@@ -7,10 +7,10 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as LinkIcon } from '@material-symbols/svg-600/outlined/link.svg';
+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];
 
 export default class AttachmentList extends ImmutablePureComponent {

app/javascript/flavours/glitch/components/badge.jsx

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 
 import { FormattedMessage } from 'react-intl';
 
-import { ReactComponent as GroupsIcon } from '@material-symbols/svg-600/outlined/group.svg';
+import GroupsIcon from '@/material-icons/400-24px/group.svg?react';
-import { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person.svg';
+import PersonIcon from '@/material-icons/400-24px/person.svg?react';
-import { ReactComponent as SmartToyIcon } from '@material-symbols/svg-600/outlined/smart_toy.svg';
+import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
 
 
 export const Badge = ({ icon, label, domain }) => (

app/javascript/flavours/glitch/components/column_back_button.tsx

@@ -2,8 +2,7 @@ import { useCallback } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg';
+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';
 

app/javascript/flavours/glitch/components/column_header.jsx

@@ -6,17 +6,17 @@ import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import classNames from 'classnames';
 import { withRouter } from 'react-router-dom';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
+import AddIcon from '@/material-icons/400-24px/add.svg?react';
-import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg';
+import ArrowBackIcon from '@/material-icons/400-24px/arrow_back.svg?react';
-import { ReactComponent as ChevronLeftIcon } from '@material-symbols/svg-600/outlined/chevron_left.svg';
+import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
-import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
+import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import { ReactComponent as TuneIcon } from '@material-symbols/svg-600/outlined/tune.svg';
+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({

app/javascript/flavours/glitch/components/dismissable_banner.tsx

@@ -8,8 +8,7 @@ import { useCallback, useState, useEffect } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+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';

app/javascript/flavours/glitch/components/domain.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
+import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
 
 import { IconButton } from './icon_button';
 

app/javascript/flavours/glitch/components/dropdown_menu.jsx

@@ -6,10 +6,10 @@ import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
 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';
 

app/javascript/flavours/glitch/components/edited_timestamp/index.jsx

@@ -5,8 +5,8 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as ArrowDropDownIcon } from '@material-symbols/svg-600/outlined/arrow_drop_down.svg';
 
+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';

app/javascript/flavours/glitch/components/icon.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 
-import { ReactComponent as CheckBoxOutlineBlankIcon } from '@material-symbols/svg-600/outlined/check_box_outline_blank.svg';
+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> {

app/javascript/flavours/glitch/components/load_gap.tsx

@@ -2,8 +2,7 @@ import { useCallback } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-
 import { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({

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'>

app/javascript/flavours/glitch/components/media_gallery.jsx

@@ -8,9 +8,9 @@ import classNames from 'classnames';
 import { is } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
 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';

app/javascript/flavours/glitch/components/notification_purge_buttons.jsx

@@ -12,10 +12,10 @@ import classNames from 'classnames';
 
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as DeleteIcon } from '@material-symbols/svg-600/outlined/delete.svg';
+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' },

app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx

@@ -5,8 +5,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as CancelPresentationIcon } from '@material-symbols/svg-600/outlined/cancel_presentation.svg';
 
+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';
 

app/javascript/flavours/glitch/components/poll.jsx

@@ -7,10 +7,10 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
 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';

app/javascript/flavours/glitch/components/status_action_bar.jsx

@@ -8,21 +8,20 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as BookmarkIcon } from '@material-symbols/svg-600/outlined/bookmark-fill.svg';
+import BookmarkIcon from '@/material-icons/400-24px/bookmark-fill.svg?react';
-import { ReactComponent as BookmarkBorderIcon } from '@material-symbols/svg-600/outlined/bookmark.svg';
+import BookmarkBorderIcon from '@/material-icons/400-24px/bookmark.svg?react';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
+import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
-import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg';
+import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
+import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
-import { ReactComponent as StarBorderIcon } from '@material-symbols/svg-600/outlined/star.svg';
+import StarBorderIcon from '@/material-icons/400-24px/star.svg?react';
-import { ReactComponent as VisibilityIcon } from '@material-symbols/svg-600/outlined/visibility.svg';
+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';
-import { ReactComponent as RepeatDisabledIcon } from 'mastodon/../svg-icons/repeat_disabled.svg';
-import { ReactComponent as RepeatPrivateIcon } from 'mastodon/../svg-icons/repeat_private.svg';
 
 import DropdownMenuContainer from '../containers/dropdown_menu_container';
 import { me } from '../initial_state';

app/javascript/flavours/glitch/components/status_content.jsx

@@ -9,16 +9,16 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as ImageIcon } from '@material-symbols/svg-600/outlined/image.svg';
+import ImageIcon from '@/material-icons/400-24px/image.svg?react';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
-import { ReactComponent as LinkIcon } from '@material-symbols/svg-600/outlined/link.svg';
+import LinkIcon from '@/material-icons/400-24px/link.svg?react';
-import { ReactComponent as MovieIcon } from '@material-symbols/svg-600/outlined/movie.svg';
+import MovieIcon from '@/material-icons/400-24px/movie.svg?react';
-import { ReactComponent as MusicNoteIcon } from '@material-symbols/svg-600/outlined/music_note.svg';
+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';
 
 const textMatchesTarget = (text, origin, host) => {

app/javascript/flavours/glitch/components/status_icons.jsx

@@ -6,18 +6,18 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as ExpandLessIcon } from '@material-symbols/svg-600/outlined/expand_less.svg';
+import ExpandLessIcon from '@/material-icons/400-24px/expand_less.svg?react';
-import { ReactComponent as ForumIcon } from '@material-symbols/svg-600/outlined/forum.svg';
+import ForumIcon from '@/material-icons/400-24px/forum.svg?react';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home.svg';
+import HomeIcon from '@/material-icons/400-24px/home.svg?react';
-import { ReactComponent as ImageIcon } from '@material-symbols/svg-600/outlined/image.svg';
+import ImageIcon from '@/material-icons/400-24px/image.svg?react';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
-import { ReactComponent as LinkIcon } from '@material-symbols/svg-600/outlined/link.svg';
+import LinkIcon from '@/material-icons/400-24px/link.svg?react';
-import { ReactComponent as MovieIcon } from '@material-symbols/svg-600/outlined/movie.svg';
+import MovieIcon from '@/material-icons/400-24px/movie.svg?react';
-import { ReactComponent as MusicNoteIcon } from '@material-symbols/svg-600/outlined/music_note.svg';
+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 './visibility_icon';
 

app/javascript/flavours/glitch/components/status_prepend.jsx

@@ -6,16 +6,16 @@ import { FormattedMessage } from 'react-intl';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
+import EditIcon from '@/material-icons/400-24px/edit.svg?react';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
-import { ReactComponent as PushPinIcon } from '@material-symbols/svg-600/outlined/push_pin.svg';
+import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
+import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
+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 = {

app/javascript/flavours/glitch/components/verified_badge.tsx

@@ -1,4 +1,4 @@
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 
 import { Icon } from './icon';
 

app/javascript/flavours/glitch/components/visibility_icon.tsx

@@ -1,9 +1,9 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
+import LockIcon from '@/material-icons/400-24px/lock.svg?react';
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
+import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
-import { ReactComponent as MailIcon } from '@material-symbols/svg-600/outlined/mail.svg';
+import MailIcon from '@/material-icons/400-24px/mail.svg?react';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 
 import { Icon } from './icon';
 

app/javascript/flavours/glitch/features/about/index.jsx

@@ -10,9 +10,9 @@ import { List as ImmutableList } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
-import { ReactComponent as ExpandMoreIcon } from '@material-symbols/svg-600/outlined/expand_more.svg';
 
+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';

app/javascript/flavours/glitch/features/account/components/action_bar.jsx

@@ -6,10 +6,10 @@ import { NavLink } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as InfoIcon } from '@material-symbols/svg-600/outlined/info.svg';
+import InfoIcon from '@/material-icons/400-24px/info.svg?react';
-
 import { Icon } from 'flavours/glitch/components/icon';
 
+
 class ActionBar extends PureComponent {
 
   static propTypes = {
@@ -30,7 +30,8 @@ class ActionBar extends PureComponent {
       return (
         <div>
           <div className='account__disclaimer'>
-            <Icon id='info-circle' icon={InfoIcon} /> <FormattedMessage
+            <Icon id='info-circle' icon={InfoIcon} />
+            <FormattedMessage
               id='account.suspended_disclaimer_full'
               defaultMessage='This user has been suspended by a moderator.'
             />
@@ -44,7 +45,9 @@ class ActionBar extends PureComponent {
     if (account.get('acct') !== account.get('username')) {
       extraInfo = (
         <div className='account__disclaimer'>
-          <Icon id='info-circle' icon={InfoIcon} /> <FormattedMessage
+          <Icon id='info-circle' icon={InfoIcon} />
+          <div>
+            <FormattedMessage
               id='account.disclaimer_full'
               defaultMessage="Information below may reflect the user's profile incompletely."
             />
@@ -53,6 +56,7 @@ class ActionBar extends PureComponent {
               <FormattedMessage id='account.view_full_profile' defaultMessage='View full profile' />
             </a>
           </div>
+        </div>
       );
     }
 

app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx

@@ -3,11 +3,11 @@ import { FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-
 import { Icon }  from 'flavours/glitch/components/icon';
 
+
 export default class FollowRequestNote extends ImmutablePureComponent {
 
   static propTypes = {

app/javascript/flavours/glitch/features/account/components/header.jsx

@@ -9,12 +9,12 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
-import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications.svg';
-import { ReactComponent as NotificationsActiveIcon } from '@material-symbols/svg-600/outlined/notifications_active-fill.svg';
 
+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';

app/javascript/flavours/glitch/features/account/components/profile_column_header.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { injectIntl, defineMessages } from 'react-intl';
 
-import { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person.svg';
+import PersonIcon from '@/material-icons/400-24px/person.svg?react';
 
 import ColumnHeader from '../../../components/column_header';
 

app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx

@@ -5,14 +5,14 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as AudiotrackIcon } from '@material-symbols/svg-600/outlined/music_note.svg';
+import AudiotrackIcon from '@/material-icons/400-24px/music_note.svg?react';
-import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow.svg';
+import PlayArrowIcon from '@/material-icons/400-24px/play_arrow.svg?react';
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
+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 = {

app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx

@@ -5,8 +5,8 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as TripIcon } from '@material-symbols/svg-600/outlined/trip.svg';
 
+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';
 

app/javascript/flavours/glitch/features/audio/index.jsx

@@ -7,17 +7,18 @@ import classNames from 'classnames';
 
 import { is } from 'immutable';
 
-import { ReactComponent as DownloadIcon } from '@material-symbols/svg-600/outlined/download.svg';
-import { ReactComponent as PauseIcon } from '@material-symbols/svg-600/outlined/pause.svg';
-import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow-fill.svg';
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
-import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off-fill.svg';
-import { ReactComponent as VolumeUpIcon } from '@material-symbols/svg-600/outlined/volume_up-fill.svg';
 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';
 

app/javascript/flavours/glitch/features/blocks/index.jsx

@@ -6,9 +6,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as BlockIcon } from '@material-symbols/svg-600/outlined/block-fill.svg';
 import { debounce } from 'lodash';
 
+import BlockIcon from '@/material-icons/400-24px/block-fill.svg?react';
+
 import { fetchBlocks, expandBlocks } from '../../actions/blocks';
 import { LoadingIndicator } from '../../components/loading_indicator';
 import ScrollableList from '../../components/scrollable_list';

app/javascript/flavours/glitch/features/bookmarked_statuses/index.jsx

@@ -8,9 +8,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as BookmarksIcon } from '@material-symbols/svg-600/outlined/bookmarks-fill.svg';
 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';

app/javascript/flavours/glitch/features/community_timeline/index.jsx

@@ -7,8 +7,8 @@ import { Helmet } from 'react-helmet';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
 
+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';
 

app/javascript/flavours/glitch/features/compose/components/action_bar.jsx

@@ -5,10 +5,10 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg';
+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({

app/javascript/flavours/glitch/features/compose/components/header.jsx

@@ -7,18 +7,18 @@ import { Link } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
+import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
-import { ReactComponent as LogoutIcon } from '@material-symbols/svg-600/outlined/logout.svg';
+import LogoutIcon from '@/material-icons/400-24px/logout.svg?react';
-import { ReactComponent as ManufacturingIcon } from '@material-symbols/svg-600/outlined/manufacturing.svg';
+import ManufacturingIcon from '@/material-icons/400-24px/manufacturing.svg?react';
-import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg';
+import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
-import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg';
+import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+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',

app/javascript/flavours/glitch/features/compose/components/options.jsx

@@ -6,19 +6,20 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as AttachFileIcon } from '@material-symbols/svg-600/outlined/attach_file.svg';
-import { ReactComponent as BrushIcon } from '@material-symbols/svg-600/outlined/brush.svg';
-import { ReactComponent as CodeIcon } from '@material-symbols/svg-600/outlined/code.svg';
-import { ReactComponent as DescriptionIcon } from '@material-symbols/svg-600/outlined/description.svg';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
-import { ReactComponent as MarkdownIcon } from '@material-symbols/svg-600/outlined/markdown.svg';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
-import { ReactComponent as UploadFileIcon } from '@material-symbols/svg-600/outlined/upload_file.svg';
 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';

app/javascript/flavours/glitch/features/compose/components/poll_form.jsx

@@ -8,9 +8,9 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
 
+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';

app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx

@@ -3,10 +3,10 @@ import { PureComponent } from 'react';
 
 import { injectIntl, defineMessages } from 'react-intl';
 
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
+import LockIcon from '@/material-icons/400-24px/lock.svg?react';
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
+import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
-import { ReactComponent as MailIcon } from '@material-symbols/svg-600/outlined/mail.svg';
+import MailIcon from '@/material-icons/400-24px/mail.svg?react';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 
 import Dropdown from './dropdown';
 

app/javascript/flavours/glitch/features/compose/components/publisher.jsx

@@ -4,14 +4,14 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
+import LockIcon from '@/material-icons/400-24px/lock.svg?react';
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
+import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
-import { ReactComponent as MailIcon } from '@material-symbols/svg-600/outlined/mail.svg';
+import MailIcon from '@/material-icons/400-24px/mail.svg?react';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+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',

app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx

@@ -5,8 +5,8 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
 
+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';
 

app/javascript/flavours/glitch/features/compose/components/search.jsx

@@ -8,10 +8,10 @@ import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as CancelIcon } from '@material-symbols/svg-600/outlined/cancel-fill.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
 
+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';

app/javascript/flavours/glitch/features/compose/components/search_results.jsx

@@ -5,15 +5,15 @@ import { FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as FindInPageIcon } from '@material-symbols/svg-600/outlined/find_in_page.svg';
+import FindInPageIcon from '@/material-icons/400-24px/find_in_page.svg?react';
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
+import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
+import SearchIcon from '@/material-icons/400-24px/search.svg?react';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import TagIcon from '@/material-icons/400-24px/tag.svg?react';
-
 import { Icon }  from 'flavours/glitch/components/icon';
 import { LoadMore } from 'flavours/glitch/components/load_more';
 import { SearchSection } from 'flavours/glitch/features/explore/components/search_section';
 
+
 import { ImmutableHashtag as Hashtag } from '../../../components/hashtag';
 import AccountContainer from '../../../containers/account_container';
 import StatusContainer from '../../../containers/status_container';

app/javascript/flavours/glitch/features/compose/components/textarea_icons.jsx

@@ -5,11 +5,11 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as ForumIcon } from '@material-symbols/svg-600/outlined/forum.svg';
+import ForumIcon from '@/material-icons/400-24px/forum.svg?react';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
-
 import { Icon } from 'flavours/glitch/components/icon';
 
+
 const messages = defineMessages({
   localOnly: {
     defaultMessage: 'This post is local-only',

app/javascript/flavours/glitch/features/compose/components/upload.jsx

@@ -5,13 +5,14 @@ import { FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
-import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
-import { ReactComponent as InfoIcon } from '@material-symbols/svg-600/outlined/info.svg';
 import spring from 'react-motion/lib/spring';
 
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import EditIcon from '@/material-icons/400-24px/edit.svg?react';
+import InfoIcon from '@/material-icons/400-24px/info.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 
+
 import Motion from '../../ui/util/optional_motion';
 
 export default class Upload extends ImmutablePureComponent {

app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx

@@ -3,9 +3,9 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { ReactComponent as UploadFileIcon } from '@material-symbols/svg-600/outlined/upload_file.svg';
 import spring from 'react-motion/lib/spring';
 
+import UploadFileIcon from '@/material-icons/400-24px/upload_file.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 
 import Motion from '../../ui/util/optional_motion';

app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx

@@ -8,10 +8,10 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
 import { HotKeys } from 'react-hotkeys';
 
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import AvatarComposite from 'flavours/glitch/components/avatar_composite';
 import { IconButton } from 'flavours/glitch/components/icon_button';

app/javascript/flavours/glitch/features/direct_timeline/index.jsx

@@ -7,8 +7,8 @@ import { Helmet } from 'react-helmet';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as MailIcon } from '@material-symbols/svg-600/outlined/mail.svg';
 
+import MailIcon from '@/material-icons/400-24px/mail.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
 import { mountConversations, unmountConversations, expandConversations } from 'flavours/glitch/actions/conversations';
 import { connectDirectStream } from 'flavours/glitch/actions/streaming';

app/javascript/flavours/glitch/features/directory/index.jsx

@@ -9,8 +9,8 @@ import { List as ImmutableList } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
 
+import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
 import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'flavours/glitch/actions/columns';
 import { fetchDirectory, expandDirectory } from 'flavours/glitch/actions/directory';
 import Column from 'flavours/glitch/components/column';

app/javascript/flavours/glitch/features/domain_blocks/index.jsx

@@ -8,9 +8,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as BlockIcon } from '@material-symbols/svg-600/outlined/block-fill.svg';
 import { debounce } from 'lodash';
 
+import BlockIcon from '@/material-icons/400-24px/block-fill.svg?react';
+
 import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks';
 import { LoadingIndicator } from '../../components/loading_indicator';
 import ScrollableList from '../../components/scrollable_list';

app/javascript/flavours/glitch/features/explore/index.jsx

@@ -8,9 +8,9 @@ import { NavLink, Switch, Route } from 'react-router-dom';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
 
+import SearchIcon from '@/material-icons/400-24px/search.svg?react';
+import TagIcon from '@/material-icons/400-24px/tag.svg?react';
 import Column from 'flavours/glitch/components/column';
 import ColumnHeader from 'flavours/glitch/components/column_header';
 import Search from 'flavours/glitch/features/compose/containers/search_container';

app/javascript/flavours/glitch/features/explore/results.jsx

@@ -9,10 +9,10 @@ import { List as ImmutableList } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as FindInPageIcon } from '@material-symbols/svg-600/outlined/find_in_page.svg';
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
 
+import FindInPageIcon from '@/material-icons/400-24px/find_in_page.svg?react';
+import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
+import TagIcon from '@/material-icons/400-24px/tag.svg?react';
 import { submitSearch, expandSearch } from 'flavours/glitch/actions/search';
 import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag';
 import { Icon } from 'flavours/glitch/components/icon';

app/javascript/flavours/glitch/features/favourited_statuses/index.jsx

@@ -8,9 +8,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
 import { debounce } from 'lodash';
 
+import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
 import { fetchFavouritedStatuses, expandFavouritedStatuses } from 'flavours/glitch/actions/favourites';
 import ColumnHeader from 'flavours/glitch/components/column_header';

app/javascript/flavours/glitch/features/favourites/index.jsx

@@ -8,10 +8,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as RefreshIcon } from '@material-symbols/svg-600/outlined/refresh.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
 import { debounce } from 'lodash';
 
+import RefreshIcon from '@/material-icons/400-24px/refresh.svg?react';
+import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import { fetchFavourites, expandFavourites } from 'flavours/glitch/actions/interactions';
 import ColumnHeader from 'flavours/glitch/components/column_header';
 import { Icon }  from 'flavours/glitch/components/icon';

app/javascript/flavours/glitch/features/filters/select_filter.jsx

@@ -5,9 +5,9 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
 import fuzzysort from 'fuzzysort';
 
+import AddIcon from '@/material-icons/400-24px/add.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { toServerSideType } from 'flavours/glitch/utils/filters';
 import { loupeIcon, deleteIcon } from 'flavours/glitch/utils/icons';

app/javascript/flavours/glitch/features/firehose/index.jsx

@@ -6,8 +6,8 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { Helmet } from 'react-helmet';
 import { NavLink } from 'react-router-dom';
 
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
 
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 import { addColumn } from 'flavours/glitch/actions/columns';
 import { changeSetting } from 'flavours/glitch/actions/settings';
 import { connectPublicStream, connectCommunityStream } from 'flavours/glitch/actions/streaming';

app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx

@@ -5,8 +5,8 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 
 import { Avatar } from '../../../components/avatar';
 import { DisplayName } from '../../../components/display_name';

app/javascript/flavours/glitch/features/follow_requests/index.jsx

@@ -8,9 +8,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
 import { debounce } from 'lodash';
 
+import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
+
 import { fetchFollowRequests, expandFollowRequests } from '../../actions/accounts';
 import ScrollableList from '../../components/scrollable_list';
 import { me } from '../../initial_state';

app/javascript/flavours/glitch/features/followed_tags/index.jsx

@@ -8,9 +8,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
 import { debounce } from 'lodash';
 
+import TagIcon from '@/material-icons/400-24px/tag.svg?react';
 import { expandFollowedHashtags, fetchFollowedHashtags } from 'flavours/glitch/actions/tags';
 import ColumnHeader from 'flavours/glitch/components/column_header';
 import { Hashtag } from 'flavours/glitch/components/hashtag';

app/javascript/flavours/glitch/features/getting_started/components/announcements.jsx

@@ -9,13 +9,14 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
-import { ReactComponent as ChevronLeftIcon } from '@material-symbols/svg-600/outlined/chevron_left.svg';
-import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import spring from 'react-motion/lib/spring';
 import ReactSwipeableViews from 'react-swipeable-views';
 
+import elephantUIPlane from '@/images/elephant_ui_plane.svg';
+import AddIcon from '@/material-icons/400-24px/add.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 { AnimatedNumber } from 'flavours/glitch/components/animated_number';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { IconButton } from 'flavours/glitch/components/icon_button';
@@ -24,7 +25,6 @@ import { unicodeMapping } from 'flavours/glitch/features/emoji/emoji_unicode_map
 import { autoPlayGif, reduceMotion, disableSwiping, mascot } from 'flavours/glitch/initial_state';
 import { assetHost } from 'flavours/glitch/utils/config';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },

app/javascript/flavours/glitch/features/getting_started/index.jsx

@@ -10,20 +10,19 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as BookmarksIcon } from '@material-symbols/svg-600/outlined/bookmarks-fill.svg';
+import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
+import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
+import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
-import { ReactComponent as MailIcon } from '@material-symbols/svg-600/outlined/mail.svg';
+import MailIcon from '@/material-icons/400-24px/mail.svg?react';
-import { ReactComponent as ManufacturingIcon } from '@material-symbols/svg-600/outlined/manufacturing.svg';
+import ManufacturingIcon from '@/material-icons/400-24px/manufacturing.svg?react';
-import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg';
+import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications.svg';
+import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
+import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
-import { ReactComponent as SettingsIcon } from '@material-symbols/svg-600/outlined/settings-fill.svg';
+import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import TagIcon from '@/material-icons/400-24px/tag.svg?react';
-
 import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
 import { fetchLists } from 'flavours/glitch/actions/lists';
 import { openModal } from 'flavours/glitch/actions/modal';
@@ -31,6 +30,7 @@ import Column from 'flavours/glitch/features/ui/components/column';
 import LinkFooter from 'flavours/glitch/features/ui/components/link_footer';
 import { preferencesLink } from 'flavours/glitch/utils/backend_links';
 
+
 import { me, showTrends } from '../../initial_state';
 import NavigationBar from '../compose/components/navigation_bar';
 import ColumnLink from '../ui/components/column_link';

app/javascript/flavours/glitch/features/getting_started_misc/index.jsx

@@ -5,18 +5,18 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as BlockIcon } from '@material-symbols/svg-600/outlined/block.svg';
+import BlockIcon from '@/material-icons/400-24px/block.svg?react';
-import { ReactComponent as InfoIcon } from '@material-symbols/svg-600/outlined/info.svg';
+import InfoIcon from '@/material-icons/400-24px/info.svg?react';
-import { ReactComponent as PersonCheckIcon } from '@material-symbols/svg-600/outlined/person_check.svg';
+import PersonCheckIcon from '@/material-icons/400-24px/person_check.svg?react';
-import { ReactComponent as PushPinIcon } from '@material-symbols/svg-600/outlined/push_pin.svg';
+import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
+import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
-import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off.svg';
+import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
-
 import { openModal } from 'flavours/glitch/actions/modal';
 import Column from 'flavours/glitch/features/ui/components/column';
 import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
 import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading';
 
+
 const messages = defineMessages({
   heading: { id: 'column.heading', defaultMessage: 'Misc' },
   subheading: { id: 'column.subheading', defaultMessage: 'Miscellaneous options' },

app/javascript/flavours/glitch/features/hashtag_timeline/index.jsx

@@ -8,9 +8,9 @@ import { Helmet } from 'react-helmet';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
 import { isEqual } from 'lodash';
 
+import TagIcon from '@/material-icons/400-24px/tag.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
 import { connectHashtagStream } from 'flavours/glitch/actions/streaming';
 import { fetchHashtag, followHashtag, unfollowHashtag } from 'flavours/glitch/actions/tags';

app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.tsx

@@ -2,8 +2,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { Link } from 'react-router-dom';
 
+import background from '@/images/friends-cropped.png';
 import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
-import background from 'mastodon/../images/friends-cropped.png';
 
 export const ExplorePrompt = () => (
   <DismissableBanner id='home.explore_prompt'>

app/javascript/flavours/glitch/features/home_timeline/index.jsx

@@ -10,9 +10,9 @@ import { createSelector } from '@reduxjs/toolkit';
 import { List as ImmutableList } from 'immutable';
 import { connect } from 'react-redux';
 
-import { ReactComponent as CampaignIcon } from '@material-symbols/svg-600/outlined/campaign.svg';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
 
+import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
+import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
 import { fetchAnnouncements, toggleShowAnnouncements } from 'flavours/glitch/actions/announcements';
 import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge';
 import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator';

app/javascript/flavours/glitch/features/interaction_modal/index.jsx

@@ -7,12 +7,12 @@ import classNames from 'classnames';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg';
 import { throttle, escapeRegExp } from 'lodash';
 
+import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
+import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import StarIcon from '@/material-icons/400-24px/star.svg?react';
 import { openModal, closeModal } from 'flavours/glitch/actions/modal';
 import api from 'flavours/glitch/api';
 import { Button } from 'flavours/glitch/components/button';

app/javascript/flavours/glitch/features/keyboard_shortcuts/index.jsx

@@ -7,8 +7,8 @@ import { Helmet } from 'react-helmet';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as InfoIcon } from '@material-symbols/svg-600/outlined/info.svg';
 
+import InfoIcon from '@/material-icons/400-24px/info.svg?react';
 import Column from 'flavours/glitch/components/column';
 import ColumnHeader from 'flavours/glitch/components/column_header';
 

app/javascript/flavours/glitch/features/list_adder/components/list.jsx

@@ -6,12 +6,12 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
+import AddIcon from '@/material-icons/400-24px/add.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
+import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
-
 import { Icon }  from 'flavours/glitch/components/icon';
 
+
 import { removeFromListAdder, addToListAdder } from '../../../actions/lists';
 import { IconButton }  from '../../../components/icon_button';
 

app/javascript/flavours/glitch/features/list_editor/components/account.jsx

@@ -6,8 +6,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
+import AddIcon from '@/material-icons/400-24px/add.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 
 import { removeFromListEditor, addToListEditor } from '../../../actions/lists';
 import { Avatar } from '../../../components/avatar';

app/javascript/flavours/glitch/features/list_editor/components/edit_list_form.jsx

@@ -5,7 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 
 import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
 import { IconButton } from '../../../components/icon_button';

app/javascript/flavours/glitch/features/list_editor/components/search.jsx

@@ -7,11 +7,11 @@ import classNames from 'classnames';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as CancelIcon } from '@material-symbols/svg-600/outlined/cancel.svg';
+import CancelIcon from '@/material-icons/400-24px/cancel.svg?react';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
+import SearchIcon from '@/material-icons/400-24px/search.svg?react';
-
 import { Icon }  from 'flavours/glitch/components/icon';
 
+
 import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists';
 
 const messages = defineMessages({

app/javascript/flavours/glitch/features/list_timeline/index.jsx

@@ -9,11 +9,11 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as DeleteIcon } from '@material-symbols/svg-600/outlined/delete.svg';
-import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
 import Toggle from 'react-toggle';
 
+import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
+import EditIcon from '@/material-icons/400-24px/edit.svg?react';
+import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
 import { fetchList, deleteList, updateList } from 'flavours/glitch/actions/lists';
 import { openModal } from 'flavours/glitch/actions/modal';

app/javascript/flavours/glitch/features/lists/index.jsx

@@ -9,8 +9,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
 
+import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import { fetchLists } from 'flavours/glitch/actions/lists';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';

app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx

@@ -4,15 +4,15 @@ import { PureComponent } from 'react';
 
 import { injectIntl, defineMessages } from 'react-intl';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
+import EditIcon from '@/material-icons/400-24px/edit.svg?react';
-import { ReactComponent as ExpandLessIcon } from '@material-symbols/svg-600/outlined/expand_less.svg';
+import ExpandLessIcon from '@/material-icons/400-24px/expand_less.svg?react';
-import { ReactComponent as ImageIcon } from '@material-symbols/svg-600/outlined/image.svg';
+import ImageIcon from '@/material-icons/400-24px/image.svg?react';
-import { ReactComponent as ManufacturingIcon } from '@material-symbols/svg-600/outlined/manufacturing.svg';
+import ManufacturingIcon from '@/material-icons/400-24px/manufacturing.svg?react';
-import { ReactComponent as SettingsIcon } from '@material-symbols/svg-600/outlined/settings-fill.svg';
+import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react';
-
 import { preferencesLink } from 'flavours/glitch/utils/backend_links';
 
+
 import LocalSettingsNavigationItem from './item';
 
 const messages = defineMessages({

app/javascript/flavours/glitch/features/mutes/index.jsx

@@ -8,9 +8,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off.svg';
 import { debounce } from 'lodash';
 
+import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
+
 import { fetchMutes, expandMutes } from '../../actions/mutes';
 import { LoadingIndicator } from '../../components/loading_indicator';
 import ScrollableList from '../../components/scrollable_list';

app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx

@@ -8,9 +8,9 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as FlagIcon } from '@material-symbols/svg-600/outlined/flag-fill.svg';
 import { HotKeys } from 'react-hotkeys';
 
+import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
 import { Permalink } from 'flavours/glitch/components/permalink';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';

app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx

@@ -8,9 +8,9 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add-fill.svg';
 import { HotKeys } from 'react-hotkeys';
 
+import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
 import { Permalink } from 'flavours/glitch/components/permalink';
 import AccountContainer from 'flavours/glitch/containers/account_container';

app/javascript/flavours/glitch/features/notifications/components/clear_column_button.jsx

@@ -3,10 +3,10 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { ReactComponent as DeleteForeverIcon } from '@material-symbols/svg-600/outlined/delete_forever.svg';
+import DeleteForeverIcon from '@/material-icons/400-24px/delete_forever.svg?react';
-
 import { Icon }  from 'flavours/glitch/components/icon';
 
+
 export default class ClearColumnButton extends PureComponent {
 
   static propTypes = {

app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx

@@ -3,15 +3,15 @@ import { PureComponent } from 'react';
 
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
+import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
+import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg';
+import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg';
+import StarIcon from '@/material-icons/400-24px/star.svg?react';
-
 import { Icon }  from 'flavours/glitch/components/icon';
 
+
 const tooltips = defineMessages({
   mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
   favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favorites' },

app/javascript/flavours/glitch/features/notifications/components/follow.jsx

@@ -8,9 +8,9 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add-fill.svg';
 import { HotKeys } from 'react-hotkeys';
 
+import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
 import { Permalink } from 'flavours/glitch/components/permalink';
 import AccountContainer from 'flavours/glitch/containers/account_container';

app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx

@@ -8,11 +8,11 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
-import { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person-fill.svg';
 import { HotKeys } from 'react-hotkeys';
 
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import PersonIcon from '@/material-icons/400-24px/person-fill.svg?react';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { DisplayName } from 'flavours/glitch/components/display_name';
 import { Icon } from 'flavours/glitch/components/icon';

app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx

@@ -5,9 +5,9 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
-import { ReactComponent as TuneIcon } from '@material-symbols/svg-600/outlined/tune.svg';
 
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import TuneIcon from '@/material-icons/400-24px/tune.svg?react';
 import { requestBrowserPermission } from 'flavours/glitch/actions/notifications';
 import { changeSetting } from 'flavours/glitch/actions/settings';
 import { Button } from 'flavours/glitch/components/button';

app/javascript/flavours/glitch/features/notifications/components/overlay.jsx

@@ -9,10 +9,10 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
-
 import { Icon } from 'flavours/glitch/components/icon';
 
+
 const messages = defineMessages({
   markForDeletion: { id: 'notification.markForDeletion', defaultMessage: 'Mark for deletion' },
 });

app/javascript/flavours/glitch/features/notifications/index.jsx

@@ -11,11 +11,11 @@ import { List as ImmutableList } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as DeleteForeverIcon } from '@material-symbols/svg-600/outlined/delete_forever.svg';
-import { ReactComponent as DoneAllIcon } from '@material-symbols/svg-600/outlined/done_all.svg';
-import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg';
 import { debounce } from 'lodash';
 
+import DeleteForeverIcon from '@/material-icons/400-24px/delete_forever.svg?react';
+import DoneAllIcon from '@/material-icons/400-24px/done_all.svg?react';
+import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
 import { compareId } from 'flavours/glitch/compare_id';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator';

app/javascript/flavours/glitch/features/onboarding/components/step.jsx

@@ -2,11 +2,11 @@ import PropTypes from 'prop-types';
 
 import { Link } from 'react-router-dom';
 
-import { ReactComponent as ArrowRightAltIcon } from '@material-symbols/svg-600/outlined/arrow_right_alt.svg';
+import ArrowRightAltIcon from '@/material-icons/400-24px/arrow_right_alt.svg?react';
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/done.svg';
+import CheckIcon from '@/material-icons/400-24px/done.svg?react';
-
 import { Icon } from 'flavours/glitch/components/icon';
 
+
 export const Step = ({ label, description, icon, iconComponent, completed, onClick, href, to }) => {
   const content = (
     <>

app/javascript/flavours/glitch/features/onboarding/index.jsx

@@ -8,19 +8,19 @@ import { Link, Switch, Route, useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 
 
-import { ReactComponent as AccountCircleIcon } from '@material-symbols/svg-600/outlined/account_circle.svg';
-import { ReactComponent as ArrowRightAltIcon } from '@material-symbols/svg-600/outlined/arrow_right_alt.svg';
-import { ReactComponent as ContentCopyIcon } from '@material-symbols/svg-600/outlined/content_copy.svg';
-import { ReactComponent as EditNoteIcon } from '@material-symbols/svg-600/outlined/edit_note.svg';
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
 
+import illustration from '@/images/elephant_ui_conversation.svg';
+import AccountCircleIcon from '@/material-icons/400-24px/account_circle.svg?react';
+import ArrowRightAltIcon from '@/material-icons/400-24px/arrow_right_alt.svg?react';
+import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
+import EditNoteIcon from '@/material-icons/400-24px/edit_note.svg?react';
+import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
 import { focusCompose } from 'flavours/glitch/actions/compose';
 import { Icon }  from 'flavours/glitch/components/icon';
 import Column from 'flavours/glitch/features/ui/components/column';
 import { me } from 'flavours/glitch/initial_state';
 import { useAppSelector } from 'flavours/glitch/store';
 import { assetHost } from 'flavours/glitch/utils/config';
-import illustration from 'mastodon/../images/elephant_ui_conversation.svg';
 
 import { Step } from './components/step';
 import { Follows } from './follows';

app/javascript/flavours/glitch/features/onboarding/profile.jsx

@@ -8,10 +8,10 @@ import { useHistory } from 'react-router-dom';
 
 import { useDispatch } from 'react-redux';
 
-import { ReactComponent as AddPhotoAlternateIcon } from '@material-symbols/svg-600/outlined/add_photo_alternate.svg';
-import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
 import Toggle from 'react-toggle';
 
+import AddPhotoAlternateIcon from '@/material-icons/400-24px/add_photo_alternate.svg?react';
+import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import { updateAccount } from 'flavours/glitch/actions/accounts';
 import { Button } from 'flavours/glitch/components/button';
 import { ColumnBackButton } from 'flavours/glitch/components/column_back_button';

app/javascript/flavours/glitch/features/onboarding/share.jsx

@@ -7,10 +7,10 @@ import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 
 
-import { ReactComponent as ArrowRightAltIcon } from '@material-symbols/svg-600/outlined/arrow_right_alt.svg';
-import { ReactComponent as ContentCopyIcon } from '@material-symbols/svg-600/outlined/content_copy.svg';
 import SwipeableViews from 'react-swipeable-views';
 
+import ArrowRightAltIcon from '@/material-icons/400-24px/arrow_right_alt.svg?react';
+import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
 import { ColumnBackButton } from 'flavours/glitch/components/column_back_button';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { me, domain } from 'flavours/glitch/initial_state';

app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx

@@ -9,12 +9,12 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as OpenInNewIcon } from '@material-symbols/svg-600/outlined/open_in_new.svg';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
-import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg';
 
+import OpenInNewIcon from '@/material-icons/400-24px/open_in_new.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.svg?react';
 import { initBoostModal } from 'flavours/glitch/actions/boosts';
 import { replyCompose } from 'flavours/glitch/actions/compose';
 import { reblog, favourite, unreblog, unfavourite } from 'flavours/glitch/actions/interactions';

app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx

@@ -8,8 +8,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
 
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { DisplayName } from 'flavours/glitch/components/display_name';
 import { IconButton } from 'flavours/glitch/components/icon_button';