Merge remote-tracking branch 'parent/main' into upstream-20240115

.prettierignore

@@ -73,3 +73,5 @@ app/javascript/styles/mastodon/reset.scss
 
 # Ignore the generated AUTHORS.md
 AUTHORS.md
+
+!lint-staged.config.js

.rubocop.yml

@@ -115,6 +115,12 @@ Rails/Exit:
     - 'config/boot.rb'
     - 'lib/mastodon/cli/*.rb'
 
+# Reason: Conflicts with `Lint/UselessMethodDefinition` for inherited controller actions
+# https://docs.rubocop.org/rubocop-rails/cops_rails.html#railslexicallyscopedactionfilter
+Rails/LexicallyScopedActionFilter:
+  Exclude:
+    - 'app/controllers/auth/*'
+
 Rails/SkipsModelValidations:
   Exclude:
     - 'db/*migrate/**/*'

.rubocop_todo.yml

@@ -59,11 +59,6 @@ RSpec/MultipleMemoizedHelpers:
 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:
@@ -72,13 +67,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'

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
@@ -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)
@@ -896,7 +890,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/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/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

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/mastodon/components/attachment_list.jsx

@@ -7,8 +7,7 @@ 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 'mastodon/../material-icons/400-24px/link.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 
 const filename = url => url.split('/').pop().split('#')[0].split('?')[0];

app/javascript/mastodon/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 'mastodon/../material-icons/400-24px/group.svg?react';
-import { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person.svg';
+import PersonIcon from 'mastodon/../material-icons/400-24px/person.svg?react';
-import { ReactComponent as SmartToyIcon } from '@material-symbols/svg-600/outlined/smart_toy.svg';
+import SmartToyIcon from 'mastodon/../material-icons/400-24px/smart_toy.svg?react';
 
 
 export const Badge = ({ icon, label, domain }) => (
@@ -31,4 +31,4 @@ export const GroupBadge = () => (
 
 export const AutomatedBadge = () => (
   <Badge icon={<SmartToyIcon />} label={<FormattedMessage id='account.badges.bot' defaultMessage='Automated' />} />
-);
+);

app/javascript/mastodon/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 'mastodon/../material-icons/400-24px/arrow_back.svg?react';
-
 import { Icon } from 'mastodon/components/icon';
 import { ButtonInTabsBar } from 'mastodon/features/ui/util/columns_context';
 

app/javascript/mastodon/components/column_header.jsx

@@ -6,13 +6,12 @@ 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 'mastodon/../material-icons/400-24px/add.svg?react';
-import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg';
+import ArrowBackIcon from 'mastodon/../material-icons/400-24px/arrow_back.svg?react';
-import { ReactComponent as ChevronLeftIcon } from '@material-symbols/svg-600/outlined/chevron_left.svg';
+import ChevronLeftIcon from 'mastodon/../material-icons/400-24px/chevron_left.svg?react';
-import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
+import ChevronRightIcon from 'mastodon/../material-icons/400-24px/chevron_right.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
-import { ReactComponent as TuneIcon } from '@material-symbols/svg-600/outlined/tune.svg';
+import TuneIcon from 'mastodon/../material-icons/400-24px/tune.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 import { ButtonInTabsBar, useColumnsContext } from 'mastodon/features/ui/util/columns_context';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';

app/javascript/mastodon/components/copy_icon_button.jsx

@@ -7,8 +7,7 @@ import classNames from 'classnames';
 
 import { useDispatch } from 'react-redux';
 
-import { ReactComponent as ContentCopyIcon } from '@material-symbols/svg-600/outlined/content_copy.svg';
+import ContentCopyIcon from 'mastodon/../material-icons/400-24px/content_copy.svg?react';
-
 import { showAlert } from 'mastodon/actions/alerts';
 import { IconButton } from 'mastodon/components/icon_button';
 

app/javascript/mastodon/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 'mastodon/../material-icons/400-24px/close.svg?react';
-
 import { changeSetting } from 'mastodon/actions/settings';
 import { bannerSettings } from 'mastodon/settings';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';

app/javascript/mastodon/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/no_encryption.svg';
+import LockOpenIcon from 'mastodon/../material-icons/400-24px/no_encryption.svg?react';
 
 import { IconButton } from './icon_button';
 

app/javascript/mastodon/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 'mastodon/../material-icons/400-24px/close.svg?react';
 import { CircularProgress } from 'mastodon/components/circular_progress';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 

app/javascript/mastodon/components/edited_timestamp/index.jsx

@@ -5,8 +5,7 @@ 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 'mastodon/../material-icons/400-24px/arrow_drop_down.svg?react';
-
 import { openModal } from 'mastodon/actions/modal';
 import { Icon }  from 'mastodon/components/icon';
 import InlineAccount from 'mastodon/components/inline_account';

app/javascript/mastodon/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 'mastodon/../material-icons/400-24px/check_box_outline_blank.svg?react';
-
 import { isProduction } from 'mastodon/utils/environment';
 
 interface SVGPropsWithTitle extends React.SVGProps<SVGSVGElement> {

app/javascript/mastodon/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 'mastodon/../material-icons/400-24px/more_horiz.svg?react';
-
 import { Icon } from 'mastodon/components/icon';
 
 const messages = defineMessages({

app/javascript/mastodon/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 'mastodon/../material-icons/400-24px/visibility_off.svg?react';
 import { Blurhash } from 'mastodon/components/blurhash';
 
 import { autoPlayGif, displayMedia, displayMediaExpand, useBlurhash } from '../initial_state';

app/javascript/mastodon/components/picture_in_picture_placeholder.jsx

@@ -5,8 +5,7 @@ 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 'mastodon/../material-icons/400-24px/cancel_presentation.svg?react';
-
 import { removePictureInPicture } from 'mastodon/actions/picture_in_picture';
 import { Icon }  from 'mastodon/components/icon';
 

app/javascript/mastodon/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 'mastodon/../material-icons/400-24px/check.svg?react';
 import { Icon }  from 'mastodon/components/icon';
 import emojify from 'mastodon/features/emoji/emoji';
 import Motion from 'mastodon/features/ui/util/optional_motion';

app/javascript/mastodon/components/searchability_icon.tsx

@@ -1,10 +1,10 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
+import AlternateEmailIcon from 'mastodon/../material-icons/400-24px/alternate_email.svg?react';
-import { ReactComponent as PublicUnlistedIcon } from '@material-symbols/svg-600/outlined/cloud.svg';
+import PublicUnlistedIcon from 'mastodon/../material-icons/400-24px/cloud.svg?react';
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
+import LockIcon from 'mastodon/../material-icons/400-24px/lock.svg?react';
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/no_encryption.svg';
+import LockOpenIcon from 'mastodon/../material-icons/400-24px/no_encryption.svg?react';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import PublicIcon from 'mastodon/../material-icons/400-24px/public.svg?react';
 
 import { Icon } from './icon';
 

app/javascript/mastodon/components/status.jsx

@@ -7,16 +7,16 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
-import { ReactComponent as QuoteIcon } from '@material-symbols/svg-600/outlined/format_quote.svg';
-import { ReactComponent as ReferenceIcon } from '@material-symbols/svg-600/outlined/link.svg';
-import { ReactComponent as PushPinIcon } from '@material-symbols/svg-600/outlined/push_pin.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 LimitedIcon } from '@material-symbols/svg-600/outlined/shield.svg';
-import { ReactComponent as TimerIcon } from '@material-symbols/svg-600/outlined/timer.svg';
 import { HotKeys } from 'react-hotkeys';
 
+import AlternateEmailIcon from 'mastodon/../material-icons/400-24px/alternate_email.svg?react';
+import QuoteIcon from 'mastodon/../material-icons/400-24px/format_quote.svg?react';
+import ReferenceIcon from 'mastodon/../material-icons/400-24px/link.svg?react';
+import PushPinIcon from 'mastodon/../material-icons/400-24px/push_pin.svg?react';
+import RepeatIcon from 'mastodon/../material-icons/400-24px/repeat.svg?react';
+import ReplyIcon from 'mastodon/../material-icons/400-24px/reply.svg?react';
+import LimitedIcon from 'mastodon/../material-icons/400-24px/shield.svg?react';
+import TimerIcon from 'mastodon/../material-icons/400-24px/timer.svg?react';
 import AttachmentList from 'mastodon/components/attachment_list';
 import { Icon }  from 'mastodon/components/icon';
 import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';

app/javascript/mastodon/components/status_action_bar.jsx

@@ -9,19 +9,18 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as BookmarkIcon } from '@material-symbols/svg-600/outlined/bookmark-fill.svg';
+import BookmarkIcon from 'mastodon/../material-icons/400-24px/bookmark-fill.svg';
-import { ReactComponent as BookmarkBorderIcon } from '@material-symbols/svg-600/outlined/bookmark.svg';
+import BookmarkBorderIcon from 'mastodon/../material-icons/400-24px/bookmark.svg?react';
-import { ReactComponent as EmojiReactionIcon } from '@material-symbols/svg-600/outlined/mood.svg';
+import EmojiReactionIcon from 'mastodon/../material-icons/400-24px/mood.svg?react';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
+import MoreHorizIcon from 'mastodon/../material-icons/400-24px/more_horiz.svg?react';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
+import RepeatIcon from 'mastodon/../material-icons/400-24px/repeat.svg?react';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
+import ReplyIcon from 'mastodon/../material-icons/400-24px/reply.svg?react';
-import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg';
+import ReplyAllIcon from 'mastodon/../material-icons/400-24px/reply_all.svg?react';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
+import StarIcon from 'mastodon/../material-icons/400-24px/star-fill.svg?react';
-import { ReactComponent as StarBorderIcon } from '@material-symbols/svg-600/outlined/star.svg';
+import StarBorderIcon from 'mastodon/../material-icons/400-24px/star.svg?react';
-import { ReactComponent as VisibilityIcon } from '@material-symbols/svg-600/outlined/visibility.svg';
+import VisibilityIcon from 'mastodon/../material-icons/400-24px/visibility.svg?react';
-
+import RepeatDisabledIcon from 'mastodon/../svg-icons/repeat_disabled.svg?react';
-import { ReactComponent as RepeatDisabledIcon } from 'mastodon/../svg-icons/repeat_disabled.svg';
+import RepeatPrivateIcon from 'mastodon/../svg-icons/repeat_private.svg?react';
-import { ReactComponent as RepeatPrivateIcon } from 'mastodon/../svg-icons/repeat_private.svg';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 

app/javascript/mastodon/components/status_content.jsx

@@ -9,8 +9,7 @@ import { Link, withRouter } from 'react-router-dom';
 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 ChevronRightIcon from 'mastodon/../material-icons/400-24px/chevron_right.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 import PollContainer from 'mastodon/containers/poll_container';
 import { autoPlayGif, languages as preloadedLanguages } from 'mastodon/initial_state';

app/javascript/mastodon/components/verified_badge.tsx

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

app/javascript/mastodon/components/visibility_icon.tsx

@@ -1,16 +1,16 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { ReactComponent as CircleIcon } from '@material-symbols/svg-600/outlined/account_circle.svg';
+import CircleIcon from 'mastodon/../material-icons/400-24px/account_circle.svg?react';
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
+import AlternateEmailIcon from 'mastodon/../material-icons/400-24px/alternate_email.svg?react';
-import { ReactComponent as PublicUnlistedIcon } from '@material-symbols/svg-600/outlined/cloud.svg';
+import PublicUnlistedIcon from 'mastodon/../material-icons/400-24px/cloud.svg?react';
-import { ReactComponent as MutualIcon } from '@material-symbols/svg-600/outlined/compare_arrows.svg';
+import MutualIcon from 'mastodon/../material-icons/400-24px/compare_arrows.svg?react';
-import { ReactComponent as LoginIcon } from '@material-symbols/svg-600/outlined/key.svg';
+import LoginIcon from 'mastodon/../material-icons/400-24px/key.svg?react';
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
+import LockIcon from 'mastodon/../material-icons/400-24px/lock.svg?react';
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/no_encryption.svg';
+import LockOpenIcon from 'mastodon/../material-icons/400-24px/no_encryption.svg?react';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import PublicIcon from 'mastodon/../material-icons/400-24px/public.svg?react';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
+import ReplyIcon from 'mastodon/../material-icons/400-24px/reply.svg?react';
-import { ReactComponent as LimitedIcon } from '@material-symbols/svg-600/outlined/shield.svg';
+import LimitedIcon from 'mastodon/../material-icons/400-24px/shield.svg?react';
-import { ReactComponent as PersonalIcon } from '@material-symbols/svg-600/outlined/sticky_note.svg';
+import PersonalIcon from 'mastodon/../material-icons/400-24px/sticky_note.svg?react';
 
 import { Icon } from './icon';
 

app/javascript/mastodon/features/about/index.jsx

@@ -10,11 +10,10 @@ 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 ChevronRightIcon from 'mastodon/../material-icons/400-24px/chevron_right.svg?react';
-import { ReactComponent as DisabledIcon } from '@material-symbols/svg-600/outlined/close-fill.svg';
+import DisabledIcon from 'mastodon/../material-icons/400-24px/close-fill.svg?react';
-import { ReactComponent as EnabledIcon } from '@material-symbols/svg-600/outlined/done-fill.svg';
+import EnabledIcon from 'mastodon/../material-icons/400-24px/done-fill.svg?react';
-import { ReactComponent as ExpandMoreIcon } from '@material-symbols/svg-600/outlined/expand_more.svg';
+import ExpandMoreIcon from 'mastodon/../material-icons/400-24px/expand_more.svg?react';
-
 import { fetchServer, fetchExtendedDescription, fetchDomainBlocks  } from 'mastodon/actions/server';
 import Column from 'mastodon/components/column';
 import { Icon  }  from 'mastodon/components/icon';

app/javascript/mastodon/features/account/components/follow_request_note.jsx

@@ -3,9 +3,8 @@ 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 'mastodon/../material-icons/400-24px/check.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 
 export default class FollowRequestNote extends ImmutablePureComponent {

app/javascript/mastodon/features/account/components/header.jsx

@@ -9,13 +9,12 @@ import { NavLink, 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 CheckIcon from 'mastodon/../material-icons/400-24px/check.svg?react';
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
+import LockIcon from 'mastodon/../material-icons/400-24px/lock.svg?react';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
+import MoreHorizIcon from 'mastodon/../material-icons/400-24px/more_horiz.svg?react';
-import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications.svg';
+import NotificationsIcon from 'mastodon/../material-icons/400-24px/notifications.svg?react';
-import { ReactComponent as NotificationsActiveIcon } from '@material-symbols/svg-600/outlined/notifications_active-fill.svg';
+import NotificationsActiveIcon from 'mastodon/../material-icons/400-24px/notifications_active-fill.svg?react';
-import { ReactComponent as ShareIcon } from '@material-symbols/svg-600/outlined/share.svg';
+import ShareIcon from 'mastodon/../material-icons/400-24px/share.svg?react';
-
 import { Avatar } from 'mastodon/components/avatar';
 import { Badge, AutomatedBadge, GroupBadge } from 'mastodon/components/badge';
 import { Button } from 'mastodon/components/button';

app/javascript/mastodon/features/account_gallery/components/media_item.jsx

@@ -5,10 +5,9 @@ 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 'mastodon/../material-icons/400-24px/music_note.svg?react';
-import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow.svg';
+import PlayArrowIcon from 'mastodon/../material-icons/400-24px/play_arrow.svg?react';
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
+import VisibilityOffIcon from 'mastodon/../material-icons/400-24px/visibility_off.svg?react';
-
 import { Blurhash } from 'mastodon/components/blurhash';
 import { Icon }  from 'mastodon/components/icon';
 import { autoPlayGif, displayMedia, useBlurhash } from 'mastodon/initial_state';

app/javascript/mastodon/features/antenna_adder/components/antenna.jsx

@@ -6,10 +6,9 @@ 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 'mastodon/../material-icons/400-24px/add.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
-import { ReactComponent as AntennaIcon } from '@material-symbols/svg-600/outlined/wifi.svg';
+import AntennaIcon from 'mastodon/../material-icons/400-24px/wifi.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 
 import { removeFromAntennaAdder, addToAntennaAdder, removeExcludeFromAntennaAdder, addExcludeToAntennaAdder } from '../../../actions/antennas';

app/javascript/mastodon/features/antenna_editor/components/account.jsx

@@ -7,8 +7,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 'mastodon/../material-icons/400-24px/add.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
 
 import { removeFromAntennaEditor, addToAntennaEditor, removeExcludeFromAntennaEditor, addExcludeToAntennaEditor } from '../../../actions/antennas';
 import { Avatar } from '../../../components/avatar';

app/javascript/mastodon/features/antenna_editor/components/edit_antenna_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 'mastodon/../material-icons/400-24px/check.svg?react';
 
 import { changeAntennaEditorTitle, submitAntennaEditor } from '../../../actions/antennas';
 import { IconButton } from '../../../components/icon_button';

app/javascript/mastodon/features/antenna_editor/components/search.jsx

@@ -7,9 +7,8 @@ import classNames from 'classnames';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as CancelIcon } from '@material-symbols/svg-600/outlined/cancel-fill.svg';
+import CancelIcon from 'mastodon/../material-icons/400-24px/cancel-fill.svg?react';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
+import SearchIcon from 'mastodon/../material-icons/400-24px/search.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 
 import { fetchAntennaSuggestions, clearAntennaSuggestions, changeAntennaSuggestions } from '../../../actions/antennas';

app/javascript/mastodon/features/antenna_setting/components/text_list.jsx

@@ -6,8 +6,7 @@ import { injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as DeleteIcon } from '@material-symbols/svg-600/outlined/delete.svg';
+import DeleteIcon from 'mastodon/../material-icons/400-24px/delete.svg?react';
-
 import { Button } from 'mastodon/components/button';
 import { Icon } from 'mastodon/components/icon';
 import { IconButton } from 'mastodon/components/icon_button';
@@ -16,7 +15,7 @@ class TextListItem extends PureComponent {
 
   static propTypes = {
     icon: PropTypes.string.isRequired,
-    iconComponent: PropTypes.object.isRequired,
+    iconComponent: PropTypes.func.isRequired,
     value: PropTypes.string.isRequired,
     onRemove: PropTypes.func.isRequired,
   };
@@ -47,7 +46,7 @@ class TextList extends PureComponent {
     disabled: PropTypes.bool,
     intl: PropTypes.object.isRequired,
     icon: PropTypes.string.isRequired,
-    iconComponent: PropTypes.object.isRequired,
+    iconComponent: PropTypes.func.isRequired,
     label: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,

app/javascript/mastodon/features/antenna_setting/index.jsx

@@ -11,15 +11,15 @@ import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 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 DomainIcon } from '@material-symbols/svg-600/outlined/dns.svg';
-import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
-import { ReactComponent as HashtagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
-import { ReactComponent as KeywordIcon } from '@material-symbols/svg-600/outlined/title.svg';
-import { ReactComponent as AntennaIcon } from '@material-symbols/svg-600/outlined/wifi.svg';
 import Select, { NonceProvider } from 'react-select';
 import Toggle from 'react-toggle';
 
+import DeleteIcon from 'mastodon/../material-icons/400-24px/delete.svg?react';
+import DomainIcon from 'mastodon/../material-icons/400-24px/dns.svg?react';
+import EditIcon from 'mastodon/../material-icons/400-24px/edit.svg?react';
+import HashtagIcon from 'mastodon/../material-icons/400-24px/tag.svg?react';
+import KeywordIcon from 'mastodon/../material-icons/400-24px/title.svg?react';
+import AntennaIcon from 'mastodon/../material-icons/400-24px/wifi.svg?react';
 import {
   fetchAntenna,
   deleteAntenna,

app/javascript/mastodon/features/antenna_timeline/index.jsx

@@ -10,10 +10,9 @@ 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 DeleteIcon from 'mastodon/../material-icons/400-24px/delete.svg?react';
-import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
+import EditIcon from 'mastodon/../material-icons/400-24px/edit.svg?react';
-import { ReactComponent as AntennaIcon } from '@material-symbols/svg-600/outlined/wifi.svg';
+import AntennaIcon from 'mastodon/../material-icons/400-24px/wifi.svg?react';
-
 import { fetchAntenna, deleteAntenna } from 'mastodon/actions/antennas';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
 import { openModal } from 'mastodon/actions/modal';

app/javascript/mastodon/features/antennas/index.jsx

@@ -9,9 +9,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as AntennaIcon } from '@material-symbols/svg-600/outlined/wifi.svg';
+import AntennaIcon from 'mastodon/../material-icons/400-24px/wifi.svg?react';
-
-
 import { fetchAntennas } from 'mastodon/actions/antennas';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';

app/javascript/mastodon/features/audio/index.jsx

@@ -7,14 +7,14 @@ 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 'mastodon/../material-icons/400-24px/download.svg?react';
+import PauseIcon from 'mastodon/../material-icons/400-24px/pause.svg?react';
+import PlayArrowIcon from 'mastodon/../material-icons/400-24px/play_arrow-fill.svg?react';
+import VisibilityOffIcon from 'mastodon/../material-icons/400-24px/visibility_off.svg?react';
+import VolumeOffIcon from 'mastodon/../material-icons/400-24px/volume_off-fill.svg?react';
+import VolumeUpIcon from 'mastodon/../material-icons/400-24px/volume_up-fill.svg?react';
 import { Icon }  from 'mastodon/components/icon';
 import { formatTime, getPointerPosition, fileNameFromURL } from 'mastodon/features/video';
 

app/javascript/mastodon/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 'mastodon/../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/mastodon/features/bookmark_categories/index.jsx

@@ -10,9 +10,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
 
-import { ReactComponent as BookmarksIcon } from '@material-symbols/svg-600/outlined/bookmark-fill.svg';
+import BookmarkIcon from 'mastodon/../material-icons/400-24px/bookmark-fill.svg';
-import { ReactComponent as BookmarkIcon } from '@material-symbols/svg-600/outlined/bookmark.svg';
+import BookmarksIcon from 'mastodon/../material-icons/400-24px/bookmarks-fill.svg?react';
-
 import { fetchBookmarkCategories } from 'mastodon/actions/bookmark_categories';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';

app/javascript/mastodon/features/bookmark_category_adder/components/bookmark_category.jsx

@@ -7,10 +7,9 @@ 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 'mastodon/../material-icons/400-24px/add.svg?react';
-import { ReactComponent as BookmarkIcon } from '@material-symbols/svg-600/outlined/bookmark-fill.svg';
+import BookmarkIcon from 'mastodon/../material-icons/400-24px/bookmark-fill.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 
 import { removeFromBookmarkCategoryAdder, addToBookmarkCategoryAdder } from '../../../actions/bookmark_categories';

app/javascript/mastodon/features/bookmark_category_statuses/components/edit_bookmark_category_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 'mastodon/../material-icons/400-24px/check.svg?react';
 
 import { changeBookmarkCategoryEditorTitle, submitBookmarkCategoryEditor } from '../../../actions/bookmark_categories';
 import { IconButton } from '../../../components/icon_button';

app/javascript/mastodon/features/bookmark_category_statuses/index.jsx

@@ -11,11 +11,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
 
-import { ReactComponent as BookmarkIcon } from '@material-symbols/svg-600/outlined/bookmark-fill.svg';
-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 { debounce } from 'lodash';
 
+import BookmarkIcon from 'mastodon/../material-icons/400-24px/bookmark-fill.svg';
+import DeleteIcon from 'mastodon/../material-icons/400-24px/delete.svg?react';
+import EditIcon from 'mastodon/../material-icons/400-24px/edit.svg?react';
 import { deleteBookmarkCategory, expandBookmarkCategoryStatuses, fetchBookmarkCategory, fetchBookmarkCategoryStatuses , setupBookmarkCategoryEditor } from 'mastodon/actions/bookmark_categories';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
 import { openModal } from 'mastodon/actions/modal';

app/javascript/mastodon/features/bookmarked_statuses/index.jsx

@@ -10,9 +10,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 'mastodon/../material-icons/400-24px/bookmarks-fill.svg?react';
 import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'mastodon/actions/bookmarks';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
 import Column from 'mastodon/components/column';

app/javascript/mastodon/features/circle_adder/components/circle.jsx

@@ -6,10 +6,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as CircleIcon } from '@material-symbols/svg-600/outlined/account_circle.svg';
+import CircleIcon from 'mastodon/../material-icons/400-24px/account_circle.svg?react';
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
+import AddIcon from 'mastodon/../material-icons/400-24px/add.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 
 import { removeFromCircleAdder, addToCircleAdder } from '../../../actions/circles';

app/javascript/mastodon/features/circle_editor/components/account.jsx

@@ -7,8 +7,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 'mastodon/../material-icons/400-24px/add.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
 
 import { removeFromCircleEditor, addToCircleEditor } from '../../../actions/circles';
 import { Avatar } from '../../../components/avatar';

app/javascript/mastodon/features/circle_editor/components/edit_circle_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 'mastodon/../material-icons/400-24px/check.svg?react';
 
 import { changeCircleEditorTitle, submitCircleEditor } from '../../../actions/circles';
 import { IconButton } from '../../../components/icon_button';

app/javascript/mastodon/features/circle_editor/components/search.jsx

@@ -7,9 +7,8 @@ import classNames from 'classnames';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as CancelIcon } from '@material-symbols/svg-600/outlined/cancel-fill.svg';
+import CancelIcon from 'mastodon/../material-icons/400-24px/cancel-fill.svg?react';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
+import SearchIcon from 'mastodon/../material-icons/400-24px/search.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 
 import { fetchCircleSuggestions, clearCircleSuggestions, changeCircleSuggestions } from '../../../actions/circles';

app/javascript/mastodon/features/circle_statuses/index.jsx

@@ -11,11 +11,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
 
-import { ReactComponent as CircleIcon } from '@material-symbols/svg-600/outlined/account_circle.svg';
-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 { debounce } from 'lodash';
 
+import CircleIcon from 'mastodon/../material-icons/400-24px/account_circle.svg?react';
+import DeleteIcon from 'mastodon/../material-icons/400-24px/delete.svg?react';
+import EditIcon from 'mastodon/../material-icons/400-24px/edit.svg?react';
 import { deleteCircle, expandCircleStatuses, fetchCircle, fetchCircleStatuses } from 'mastodon/actions/circles';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
 import { openModal } from 'mastodon/actions/modal';

app/javascript/mastodon/features/circles/index.jsx

@@ -10,9 +10,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
 
-import { ReactComponent as CirclesIcon } from '@material-symbols/svg-600/outlined/account_circle-fill.svg';
+import CirclesIcon from 'mastodon/../material-icons/400-24px/account_circle-fill.svg?react';
-import { ReactComponent as CircleIcon } from '@material-symbols/svg-600/outlined/account_circle.svg';
+import CircleIcon from 'mastodon/../material-icons/400-24px/account_circle.svg?react';
-
 import { fetchCircles, deleteCircle } from 'mastodon/actions/circles';
 import { openModal } from 'mastodon/actions/modal';
 import Column from 'mastodon/components/column';

app/javascript/mastodon/features/community_timeline/index.jsx

@@ -7,8 +7,7 @@ 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 'mastodon/../material-icons/400-24px/group.svg?react';
-
 import { DismissableBanner } from 'mastodon/components/dismissable_banner';
 import { domain } from 'mastodon/initial_state';
 

app/javascript/mastodon/features/compose/components/action_bar.jsx

@@ -5,7 +5,7 @@ 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 'mastodon/../material-icons/400-24px/menu.svg?react';
 
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 

app/javascript/mastodon/features/compose/components/compose_form.jsx

@@ -8,10 +8,10 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
-import { ReactComponent as LimitedIcon } from '@material-symbols/svg-600/outlined/shield.svg';
 import { length } from 'stringz';
 
+import LockIcon from 'mastodon/../material-icons/400-24px/lock.svg?react';
+import LimitedIcon from 'mastodon/../material-icons/400-24px/shield.svg?react';
 import { Icon }  from 'mastodon/components/icon';
 import { WithOptionalRouterPropTypes, withOptionalRouter } from 'mastodon/utils/react_router';
 

app/javascript/mastodon/features/compose/components/expiration_dropdown.jsx

@@ -5,10 +5,11 @@ import { injectIntl, defineMessages } from 'react-intl';
 
 import classNames from 'classnames';
 
-import { ReactComponent as TimerIcon } from '@material-symbols/svg-600/outlined/timer.svg';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Overlay from 'react-overlays/Overlay';
 
+import TimerIcon from 'mastodon/../material-icons/400-24px/timer.svg?react';
+
 import { IconButton } from '../../../components/icon_button';
 
 const messages = defineMessages({

app/javascript/mastodon/features/compose/components/poll_button.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import InsertChartIcon from 'mastodon/../material-icons/400-24px/insert_chart.svg?react';
 
 import { IconButton } from '../../../components/icon_button';
 

app/javascript/mastodon/features/compose/components/poll_form.jsx

@@ -8,9 +8,8 @@ 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 AddIcon from 'mastodon/../material-icons/400-24px/add.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
-
 import AutosuggestInput from 'mastodon/components/autosuggest_input';
 import { Icon }  from 'mastodon/components/icon';
 import { IconButton } from 'mastodon/components/icon_button';

app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx

@@ -6,19 +6,18 @@ import { injectIntl, defineMessages } from 'react-intl';
 import classNames from 'classnames';
 
 
-import { ReactComponent as CircleIcon } from '@material-symbols/svg-600/outlined/account_circle.svg';
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
-import { ReactComponent as PublicUnlistedIcon } from '@material-symbols/svg-600/outlined/cloud.svg';
-import { ReactComponent as MutualIcon } from '@material-symbols/svg-600/outlined/compare_arrows.svg';
-import { ReactComponent as LoginIcon } from '@material-symbols/svg-600/outlined/key.svg';
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/no_encryption.svg';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Overlay from 'react-overlays/Overlay';
 
-
+import CircleIcon from 'mastodon/../material-icons/400-24px/account_circle.svg?react';
+import ReplyIcon from 'mastodon/../material-icons/400-24px/alternate_email.svg?react';
+import AlternateEmailIcon from 'mastodon/../material-icons/400-24px/alternate_email.svg?react';
+import PublicUnlistedIcon from 'mastodon/../material-icons/400-24px/cloud.svg?react';
+import MutualIcon from 'mastodon/../material-icons/400-24px/compare_arrows.svg?react';
+import LoginIcon from 'mastodon/../material-icons/400-24px/key.svg?react';
+import LockIcon from 'mastodon/../material-icons/400-24px/lock.svg?react';
+import LockOpenIcon from 'mastodon/../material-icons/400-24px/no_encryption.svg?react';
+import PublicIcon from 'mastodon/../material-icons/400-24px/public.svg?react';
 import { Icon }  from 'mastodon/components/icon';
 import { enableLoginPrivacy, enableLocalPrivacy } from 'mastodon/initial_state';
 

app/javascript/mastodon/features/compose/components/reply_indicator.jsx

@@ -5,8 +5,7 @@ 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 'mastodon/../material-icons/400-24px/close.svg?react';
-
 import AttachmentList from 'mastodon/components/attachment_list';
 import { WithOptionalRouterPropTypes, withOptionalRouter } from 'mastodon/utils/react_router';
 

app/javascript/mastodon/features/compose/components/search.jsx

@@ -8,10 +8,9 @@ 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 CancelIcon from 'mastodon/../material-icons/400-24px/cancel-fill.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
+import SearchIcon from 'mastodon/../material-icons/400-24px/search.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 import { domain, searchEnabled } from 'mastodon/initial_state';
 import { HASHTAG_REGEX } from 'mastodon/utils/hashtags';

app/javascript/mastodon/features/compose/components/search_results.jsx

@@ -5,11 +5,10 @@ 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 'mastodon/../material-icons/400-24px/find_in_page.svg?react';
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
+import PeopleIcon from 'mastodon/../material-icons/400-24px/group.svg?react';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
+import SearchIcon from 'mastodon/../material-icons/400-24px/search.svg?react';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import TagIcon from 'mastodon/../material-icons/400-24px/tag.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 import { LoadMore } from 'mastodon/components/load_more';
 import { SearchSection } from 'mastodon/features/explore/components/search_section';

app/javascript/mastodon/features/compose/components/searchability_dropdown.jsx

@@ -5,15 +5,15 @@ import { injectIntl, defineMessages } from 'react-intl';
 
 import classNames from 'classnames';
 
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
-import { ReactComponent as PublicUnlistedIcon } from '@material-symbols/svg-600/outlined/cloud.svg';
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/no_encryption.svg';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Overlay from 'react-overlays/Overlay';
 
+import AlternateEmailIcon from 'mastodon/../material-icons/400-24px/alternate_email.svg?react';
+import PublicUnlistedIcon from 'mastodon/../material-icons/400-24px/cloud.svg?react';
+import LockIcon from 'mastodon/../material-icons/400-24px/lock.svg?react';
+import LockOpenIcon from 'mastodon/../material-icons/400-24px/no_encryption.svg?react';
+import PublicIcon from 'mastodon/../material-icons/400-24px/public.svg?react';
+import SearchIcon from 'mastodon/../material-icons/400-24px/search.svg?react';
 import { Icon }  from 'mastodon/components/icon';
 import { enableLocalPrivacy } from 'mastodon/initial_state';
 

app/javascript/mastodon/features/compose/components/upload.jsx

@@ -5,11 +5,11 @@ 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 'mastodon/../material-icons/400-24px/close.svg?react';
+import EditIcon from 'mastodon/../material-icons/400-24px/edit.svg?react';
+import InfoIcon from 'mastodon/../material-icons/400-24px/info.svg?react';
 import { Icon }  from 'mastodon/components/icon';
 
 import Motion from '../../ui/util/optional_motion';

app/javascript/mastodon/features/compose/components/upload_button.jsx

@@ -6,7 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as AddPhotoAlternateIcon } from '@material-symbols/svg-600/outlined/add_photo_alternate.svg';
+import AddPhotoAlternateIcon from 'mastodon/../material-icons/400-24px/add_photo_alternate.svg?react';
 
 import { IconButton } from '../../../components/icon_button';
 

app/javascript/mastodon/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 'mastodon/../material-icons/400-24px/upload_file.svg?react';
 import { Icon }  from 'mastodon/components/icon';
 
 import Motion from '../../ui/util/optional_motion';

app/javascript/mastodon/features/compose/index.jsx

@@ -9,15 +9,15 @@ import { Link } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
-import { ReactComponent as LogoutIcon } from '@material-symbols/svg-600/outlined/logout.svg';
-import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg';
-import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
-import { ReactComponent as SettingsIcon } from '@material-symbols/svg-600/outlined/settings-fill.svg';
 import spring from 'react-motion/lib/spring';
 
+import PeopleIcon from 'mastodon/../material-icons/400-24px/group.svg?react';
+import HomeIcon from 'mastodon/../material-icons/400-24px/home-fill.svg?react';
+import LogoutIcon from 'mastodon/../material-icons/400-24px/logout.svg?react';
+import MenuIcon from 'mastodon/../material-icons/400-24px/menu.svg?react';
+import NotificationsIcon from 'mastodon/../material-icons/400-24px/notifications-fill.svg?react';
+import PublicIcon from 'mastodon/../material-icons/400-24px/public.svg?react';
+import SettingsIcon from 'mastodon/../material-icons/400-24px/settings-fill.svg?react';
 import { openModal } from 'mastodon/actions/modal';
 import Column from 'mastodon/components/column';
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/features/direct_timeline/components/conversation.jsx

@@ -8,10 +8,10 @@ import { Link, 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 'mastodon/../material-icons/400-24px/more_horiz.svg?react';
+import ReplyIcon from 'mastodon/../material-icons/400-24px/reply.svg?react';
 import AttachmentList from 'mastodon/components/attachment_list';
 import AvatarComposite from 'mastodon/components/avatar_composite';
 import { IconButton } from 'mastodon/components/icon_button';

app/javascript/mastodon/features/direct_timeline/index.jsx

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

app/javascript/mastodon/features/directory/index.jsx

@@ -9,8 +9,7 @@ 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 'mastodon/../material-icons/400-24px/group.svg?react';
-
 import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'mastodon/actions/columns';
 import { fetchDirectory, expandDirectory } from 'mastodon/actions/directory';
 import Column from 'mastodon/components/column';

app/javascript/mastodon/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 'mastodon/../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/mastodon/features/emoji_reacted_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 EmojiReactionIcon } from '@material-symbols/svg-600/outlined/mood.svg';
 import { debounce } from 'lodash';
 
+import EmojiReactionIcon from 'mastodon/../material-icons/400-24px/mood.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
 import { fetchEmojiReactedStatuses, expandEmojiReactedStatuses } from 'mastodon/actions/emoji_reactions';
 import Column from 'mastodon/components/column';

app/javascript/mastodon/features/emoji_reactions/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 RefreshIcon } from '@material-symbols/svg-600/outlined/refresh.svg';
 import { debounce } from 'lodash';
 
+import RefreshIcon from 'mastodon/../material-icons/400-24px/refresh.svg?react';
 import { fetchEmojiReactions, expandEmojiReactions } from 'mastodon/actions/interactions';
 import ColumnHeader from 'mastodon/components/column_header';
 import { Icon } from 'mastodon/components/icon';

app/javascript/mastodon/features/explore/index.jsx

@@ -8,9 +8,8 @@ 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 SearchIcon from 'mastodon/../material-icons/400-24px/search.svg?react';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import TagIcon from 'mastodon/../material-icons/400-24px/tag.svg?react';
-
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
 import Search from 'mastodon/features/compose/containers/search_container';

app/javascript/mastodon/features/explore/results.jsx

@@ -9,10 +9,9 @@ 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 FindInPageIcon from 'mastodon/../material-icons/400-24px/find_in_page.svg?react';
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
+import PeopleIcon from 'mastodon/../material-icons/400-24px/group.svg?react';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import TagIcon from 'mastodon/../material-icons/400-24px/tag.svg?react';
-
 import { submitSearch, expandSearch } from 'mastodon/actions/search';
 import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag';
 import { Icon } from 'mastodon/components/icon';

app/javascript/mastodon/features/favourited_statuses/index.jsx

@@ -10,9 +10,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 'mastodon/../material-icons/400-24px/star-fill.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
 import { fetchFavouritedStatuses, expandFavouritedStatuses } from 'mastodon/actions/favourites';
 import Column from 'mastodon/components/column';

app/javascript/mastodon/features/favourites/index.jsx

@@ -10,9 +10,9 @@ 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 { debounce } from 'lodash';
 
+import RefreshIcon from 'mastodon/../material-icons/400-24px/refresh.svg?react';
 import { fetchFavourites, expandFavourites } from 'mastodon/actions/interactions';
 import ColumnHeader from 'mastodon/components/column_header';
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/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 'mastodon/../material-icons/400-24px/add.svg?react';
 import { Icon }  from 'mastodon/components/icon';
 import { toServerSideType } from 'mastodon/utils/filters';
 import { loupeIcon, deleteIcon } from 'mastodon/utils/icons';

app/javascript/mastodon/features/firehose/index.jsx

@@ -6,8 +6,7 @@ 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 'mastodon/../material-icons/400-24px/public.svg?react';
-
 import { addColumn } from 'mastodon/actions/columns';
 import { changeSetting } from 'mastodon/actions/settings';
 import { connectPublicStream, connectCommunityStream } from 'mastodon/actions/streaming';

app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx

@@ -7,8 +7,8 @@ import { Link } 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 CheckIcon from 'mastodon/../material-icons/400-24px/check.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
 
 import { Avatar } from '../../../components/avatar';
 import { DisplayName } from '../../../components/display_name';

app/javascript/mastodon/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 'mastodon/../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/mastodon/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 'mastodon/../material-icons/400-24px/tag.svg?react';
 import { expandFollowedHashtags, fetchFollowedHashtags } from 'mastodon/actions/tags';
 import ColumnHeader from 'mastodon/components/column_header';
 import { Hashtag } from 'mastodon/components/hashtag';

app/javascript/mastodon/features/getting_started/components/announcements.jsx

@@ -9,14 +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 'mastodon/../images/elephant_ui_plane.svg';
+import AddIcon from 'mastodon/../material-icons/400-24px/add.svg?react';
+import ChevronLeftIcon from 'mastodon/../material-icons/400-24px/chevron_left.svg?react';
+import ChevronRightIcon from 'mastodon/../material-icons/400-24px/chevron_right.svg?react';
 import { AnimatedNumber } from 'mastodon/components/animated_number';
 import { Icon }  from 'mastodon/components/icon';
 import { IconButton } from 'mastodon/components/icon_button';

app/javascript/mastodon/features/getting_started/index.jsx

@@ -9,20 +9,19 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as CirclesIcon } from '@material-symbols/svg-600/outlined/account_circle-fill.svg';
+import CirclesIcon from 'mastodon/../material-icons/400-24px/account_circle-fill.svg?react';
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
+import AlternateEmailIcon from 'mastodon/../material-icons/400-24px/alternate_email.svg?react';
-import { ReactComponent as BookmarksIcon } from '@material-symbols/svg-600/outlined/bookmarks-fill.svg';
+import BookmarksIcon from 'mastodon/../material-icons/400-24px/bookmarks-fill.svg?react';
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
+import PeopleIcon from 'mastodon/../material-icons/400-24px/group.svg?react';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import HomeIcon from 'mastodon/../material-icons/400-24px/home-fill.svg?react';
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
+import ListAltIcon from 'mastodon/../material-icons/400-24px/list_alt.svg?react';
-import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg';
+import MenuIcon from 'mastodon/../material-icons/400-24px/menu.svg?react';
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
+import PersonAddIcon from 'mastodon/../material-icons/400-24px/person_add.svg?react';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import PublicIcon from 'mastodon/../material-icons/400-24px/public.svg?react';
-import { ReactComponent as SettingsIcon } from '@material-symbols/svg-600/outlined/settings-fill.svg';
+import SettingsIcon from 'mastodon/../material-icons/400-24px/settings-fill.svg?react';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg';
+import StarIcon from 'mastodon/../material-icons/400-24px/star.svg?react';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import TagIcon from 'mastodon/../material-icons/400-24px/tag.svg?react';
-import { ReactComponent as AntennaIcon } from '@material-symbols/svg-600/outlined/wifi.svg';
+import AntennaIcon from 'mastodon/../material-icons/400-24px/wifi.svg?react';
-
 import { fetchFollowRequests } from 'mastodon/actions/accounts';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';

app/javascript/mastodon/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 'mastodon/../material-icons/400-24px/tag.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
 import { connectHashtagStream } from 'mastodon/actions/streaming';
 import { fetchHashtag, followHashtag, unfollowHashtag } from 'mastodon/actions/tags';

app/javascript/mastodon/features/home_timeline/index.jsx

@@ -10,9 +10,8 @@ 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 CampaignIcon from 'mastodon/../material-icons/400-24px/campaign.svg?react';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import HomeIcon from 'mastodon/../material-icons/400-24px/home-fill.svg?react';
-
 import { fetchAnnouncements, toggleShowAnnouncements } from 'mastodon/actions/announcements';
 import { IconWithBadge } from 'mastodon/components/icon_with_badge';
 import { NotSignedInIndicator } from 'mastodon/components/not_signed_in_indicator';

app/javascript/mastodon/features/interaction_modal/index.jsx

@@ -7,13 +7,13 @@ import classNames from 'classnames';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as EmojiReactionIcon } from '@material-symbols/svg-600/outlined/mood.svg';
-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 EmojiReactionIcon from 'mastodon/../material-icons/400-24px/mood.svg?react';
+import PersonAddIcon from 'mastodon/../material-icons/400-24px/person_add.svg?react';
+import RepeatIcon from 'mastodon/../material-icons/400-24px/repeat.svg?react';
+import ReplyIcon from 'mastodon/../material-icons/400-24px/reply.svg?react';
+import StarIcon from 'mastodon/../material-icons/400-24px/star.svg?react';
 import { openModal, closeModal } from 'mastodon/actions/modal';
 import api from 'mastodon/api';
 import { Button } from 'mastodon/components/button';

app/javascript/mastodon/features/keyboard_shortcuts/index.jsx

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

app/javascript/mastodon/features/list_adder/components/list.jsx

@@ -8,11 +8,10 @@ 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 'mastodon/../material-icons/400-24px/add.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
+import ListAltIcon from 'mastodon/../material-icons/400-24px/list_alt.svg?react';
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
+import VisibilityOffIcon from 'mastodon/../material-icons/400-24px/visibility_off.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 
 import { removeFromListAdder, addToListAdder } from '../../../actions/lists';

app/javascript/mastodon/features/list_editor/components/account.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 AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
+import AddIcon from 'mastodon/../material-icons/400-24px/add.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
 
 import { removeFromListEditor, addToListEditor } from '../../../actions/lists';
 import { Avatar } from '../../../components/avatar';

app/javascript/mastodon/features/list_editor/components/edit_list_form.jsx

@@ -7,7 +7,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 'mastodon/../material-icons/400-24px/check.svg?react';
 
 import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
 import { IconButton } from '../../../components/icon_button';

app/javascript/mastodon/features/list_editor/components/search.jsx

@@ -9,9 +9,8 @@ import classNames from 'classnames';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as CancelIcon } from '@material-symbols/svg-600/outlined/cancel.svg';
+import CancelIcon from 'mastodon/../material-icons/400-24px/cancel.svg?react';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
+import SearchIcon from 'mastodon/../material-icons/400-24px/search.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 
 import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists';

app/javascript/mastodon/features/list_timeline/index.jsx

@@ -11,11 +11,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 'mastodon/../material-icons/400-24px/delete.svg?react';
+import EditIcon from 'mastodon/../material-icons/400-24px/edit.svg?react';
+import ListAltIcon from 'mastodon/../material-icons/400-24px/list_alt.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
 import { fetchList, deleteList, updateList } from 'mastodon/actions/lists';
 import { openModal } from 'mastodon/actions/modal';

app/javascript/mastodon/features/lists/index.jsx

@@ -11,8 +11,7 @@ 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 'mastodon/../material-icons/400-24px/list_alt.svg?react';
-
 import { fetchLists } from 'mastodon/actions/lists';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';

app/javascript/mastodon/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 'mastodon/../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/mastodon/features/notifications/components/clear_column_button.jsx

@@ -3,8 +3,7 @@ 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 'mastodon/../material-icons/400-24px/delete_forever.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 
 export default class ClearColumnButton extends PureComponent {

app/javascript/mastodon/features/notifications/components/filter_bar.jsx

@@ -3,15 +3,14 @@ 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 'mastodon/../material-icons/400-24px/home-fill.svg?react';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import InsertChartIcon from 'mastodon/../material-icons/400-24px/insert_chart.svg?react';
-import { ReactComponent as ReferenceIcon } from '@material-symbols/svg-600/outlined/link.svg';
+import ReferenceIcon from 'mastodon/../material-icons/400-24px/link.svg?react';
-import { ReactComponent as EmojiReactionIcon } from '@material-symbols/svg-600/outlined/mood.svg';
+import EmojiReactionIcon from 'mastodon/../material-icons/400-24px/mood.svg?react';
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
+import PersonAddIcon from 'mastodon/../material-icons/400-24px/person_add.svg?react';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
+import RepeatIcon from 'mastodon/../material-icons/400-24px/repeat.svg?react';
-import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg';
+import ReplyAllIcon from 'mastodon/../material-icons/400-24px/reply_all.svg?react';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg';
+import StarIcon from 'mastodon/../material-icons/400-24px/star.svg?react';
-
 import { Icon }  from 'mastodon/components/icon';
 
 const tooltips = defineMessages({

app/javascript/mastodon/features/notifications/components/follow_request.jsx

@@ -7,9 +7,8 @@ import { Link } 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 CheckIcon from 'mastodon/../material-icons/400-24px/check.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react';
-
 import { Avatar } from 'mastodon/components/avatar';
 import { DisplayName } from 'mastodon/components/display_name';
 import { IconButton } from 'mastodon/components/icon_button';

app/javascript/mastodon/features/notifications/components/notification.jsx

@@ -8,18 +8,18 @@ import { Link, withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
-import { ReactComponent as FlagIcon } from '@material-symbols/svg-600/outlined/flag-fill.svg';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
-import { ReactComponent as ReferenceIcon } from '@material-symbols/svg-600/outlined/link.svg';
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
-import { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person-fill.svg';
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add-fill.svg';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
 import { HotKeys } from 'react-hotkeys';
 
+import EditIcon from 'mastodon/../material-icons/400-24px/edit.svg?react';
+import FlagIcon from 'mastodon/../material-icons/400-24px/flag-fill.svg?react';
+import HomeIcon from 'mastodon/../material-icons/400-24px/home-fill.svg?react';
+import InsertChartIcon from 'mastodon/../material-icons/400-24px/insert_chart.svg?react';
+import ListAltIcon from 'mastodon/../material-icons/400-24px/insert_chart.svg?react';
+import ReferenceIcon from 'mastodon/../material-icons/400-24px/link.svg?react';
+import PersonIcon from 'mastodon/../material-icons/400-24px/person-fill.svg?react';
+import PersonAddIcon from 'mastodon/../material-icons/400-24px/person_add-fill.svg?react';
+import RepeatIcon from 'mastodon/../material-icons/400-24px/repeat.svg?react';
+import StarIcon from 'mastodon/../material-icons/400-24px/star-fill.svg?react';
 import EmojiView from 'mastodon/components/emoji_view';
 import { Icon }  from 'mastodon/components/icon';
 import AccountContainer from 'mastodon/containers/account_container';