diff --git a/app/javascript/__mocks__/svg.js b/app/javascript/__mocks__/svg.js
index e725dc2da6d8d3b381ef6799f05457fac220be5b..762bc165d04558ab294339b9051b357880067f41 100644
--- a/app/javascript/__mocks__/svg.js
+++ b/app/javascript/__mocks__/svg.js
@@ -1,3 +1,3 @@
-// eslint-disable-next-line import/no-anonymous-default-export
-export default 'SvgrURL';
-export const ReactComponent = 'div';
+const ReactComponent = 'div';
+
+export default ReactComponent;
diff --git a/app/javascript/mastodon/components/attachment_list.jsx b/app/javascript/mastodon/components/attachment_list.jsx
index ebf092b83df00154e2b46689eb86cfa0fbf43a89..e912d515cd546e23e23c31fe631e782cf10adde5 100644
--- a/app/javascript/mastodon/components/attachment_list.jsx
+++ b/app/javascript/mastodon/components/attachment_list.jsx
@@ -7,7 +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 '@material-symbols/svg-600/outlined/link.svg?react';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/components/badge.jsx b/app/javascript/mastodon/components/badge.jsx
index 2f762fed5fb80a7263ead119d01648ed5e0769d0..e716421710970127e351291e0c135e20c5ff3279 100644
--- a/app/javascript/mastodon/components/badge.jsx
+++ b/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 { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person.svg';
-import { ReactComponent as SmartToyIcon } from '@material-symbols/svg-600/outlined/smart_toy.svg';
+import GroupsIcon from '@material-symbols/svg-600/outlined/group.svg?react';
+import PersonIcon from '@material-symbols/svg-600/outlined/person.svg?react';
+import SmartToyIcon from '@material-symbols/svg-600/outlined/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' />} />
-);
\ No newline at end of file
+);
diff --git a/app/javascript/mastodon/components/column_back_button.tsx b/app/javascript/mastodon/components/column_back_button.tsx
index b835e9e6ad315436dcfe3a6f205eebd1c9f9245d..7a23c4e1080b2c6ca05d8939e836ec666bda7b73 100644
--- a/app/javascript/mastodon/components/column_back_button.tsx
+++ b/app/javascript/mastodon/components/column_back_button.tsx
@@ -2,7 +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-symbols/svg-600/outlined/arrow_back.svg?react';
import { Icon } from 'mastodon/components/icon';
import { ButtonInTabsBar } from 'mastodon/features/ui/util/columns_context';
diff --git a/app/javascript/mastodon/components/column_header.jsx b/app/javascript/mastodon/components/column_header.jsx
index b78bd9a8ef4aaa1b14f93cc7456873788113b148..a0ce10bf17f299705b1c471aae8da2e078cae367 100644
--- a/app/javascript/mastodon/components/column_header.jsx
+++ b/app/javascript/mastodon/components/column_header.jsx
@@ -6,12 +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 { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.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 { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
-import { ReactComponent as TuneIcon } from '@material-symbols/svg-600/outlined/tune.svg';
+import AddIcon from '@material-symbols/svg-600/outlined/add.svg?react';
+import ArrowBackIcon from '@material-symbols/svg-600/outlined/arrow_back.svg?react';
+import ChevronLeftIcon from '@material-symbols/svg-600/outlined/chevron_left.svg?react';
+import ChevronRightIcon from '@material-symbols/svg-600/outlined/chevron_right.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
+import TuneIcon from '@material-symbols/svg-600/outlined/tune.svg?react';
import { Icon } from 'mastodon/components/icon';
import { ButtonInTabsBar, useColumnsContext } from 'mastodon/features/ui/util/columns_context';
diff --git a/app/javascript/mastodon/components/copy_icon_button.jsx b/app/javascript/mastodon/components/copy_icon_button.jsx
index 9b1a36d83ab0da6d5586574d57324c112ee28951..0c250a7632aac44fceeef713546a0a86414578cb 100644
--- a/app/javascript/mastodon/components/copy_icon_button.jsx
+++ b/app/javascript/mastodon/components/copy_icon_button.jsx
@@ -7,7 +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 '@material-symbols/svg-600/outlined/content_copy.svg?react';
import { showAlert } from 'mastodon/actions/alerts';
import { IconButton } from 'mastodon/components/icon_button';
diff --git a/app/javascript/mastodon/components/dismissable_banner.tsx b/app/javascript/mastodon/components/dismissable_banner.tsx
index 4e6d3bb9a76730981996fb50d34ed90864f6db95..c35fec983dd253193dc24ee181e1a2ef53cdc7c1 100644
--- a/app/javascript/mastodon/components/dismissable_banner.tsx
+++ b/app/javascript/mastodon/components/dismissable_banner.tsx
@@ -8,7 +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-symbols/svg-600/outlined/close.svg?react';
import { changeSetting } from 'mastodon/actions/settings';
import { bannerSettings } from 'mastodon/settings';
diff --git a/app/javascript/mastodon/components/domain.tsx b/app/javascript/mastodon/components/domain.tsx
index 34c376f530535be8c7eb6aea3c6c8f5c9be40fb5..26cc77604e47fcd570c4494145f7012fe504d9bb 100644
--- a/app/javascript/mastodon/components/domain.tsx
+++ b/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/lock_open.svg';
+import LockOpenIcon from '@material-symbols/svg-600/outlined/lock_open.svg?react';
import { IconButton } from './icon_button';
diff --git a/app/javascript/mastodon/components/dropdown_menu.jsx b/app/javascript/mastodon/components/dropdown_menu.jsx
index d9cbcc32e5d706efcd5907728df53273d05c3c0d..1cb5c03150b1e9a137a553aff88e0ffc598864d3 100644
--- a/app/javascript/mastodon/components/dropdown_menu.jsx
+++ b/app/javascript/mastodon/components/dropdown_menu.jsx
@@ -6,7 +6,7 @@ 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 CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
import { supportsPassiveEvents } from 'detect-passive-events';
import Overlay from 'react-overlays/Overlay';
diff --git a/app/javascript/mastodon/components/edited_timestamp/index.jsx b/app/javascript/mastodon/components/edited_timestamp/index.jsx
index 4375166bcd4fbd41b1610fd18b7ac96a1146b95f..de4c641cfb4ab32200d1b374777d7c705bfb4571 100644
--- a/app/javascript/mastodon/components/edited_timestamp/index.jsx
+++ b/app/javascript/mastodon/components/edited_timestamp/index.jsx
@@ -5,7 +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 '@material-symbols/svg-600/outlined/arrow_drop_down.svg?react';
import { openModal } from 'mastodon/actions/modal';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/components/icon.tsx b/app/javascript/mastodon/components/icon.tsx
index f0af11f7f69f5f1626869cc3735e58ce991b473d..4b17f063b996b7c6a73f7351389e874692d5ebd4 100644
--- a/app/javascript/mastodon/components/icon.tsx
+++ b/app/javascript/mastodon/components/icon.tsx
@@ -1,6 +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-symbols/svg-600/outlined/check_box_outline_blank.svg?react';
import { isProduction } from 'mastodon/utils/environment';
diff --git a/app/javascript/mastodon/components/load_gap.tsx b/app/javascript/mastodon/components/load_gap.tsx
index 27ca6648c39c1685e9c5f023d26679624a812f79..ea97c3eb570b14eba21c45c8da9f86e453b4f234 100644
--- a/app/javascript/mastodon/components/load_gap.tsx
+++ b/app/javascript/mastodon/components/load_gap.tsx
@@ -2,7 +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-symbols/svg-600/outlined/more_horiz.svg?react';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx
index 668c2a2a8af2bfb4f43ec7184b076cc67f6a7486..72daeea5a09e5ee559e57a686be28c1a487380f0 100644
--- a/app/javascript/mastodon/components/media_gallery.jsx
+++ b/app/javascript/mastodon/components/media_gallery.jsx
@@ -8,7 +8,7 @@ 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 VisibilityOffIcon from '@material-symbols/svg-600/outlined/visibility_off.svg?react';
import { debounce } from 'lodash';
import { Blurhash } from 'mastodon/components/blurhash';
diff --git a/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx b/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx
index 08a599cd427283bffc92a6fc25b1298d21e398ae..3ce5ea5a74f59259f66a7fcebd8352896a155834 100644
--- a/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx
+++ b/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx
@@ -5,7 +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 '@material-symbols/svg-600/outlined/cancel_presentation.svg?react';
import { removePictureInPicture } from 'mastodon/actions/picture_in_picture';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/components/poll.jsx b/app/javascript/mastodon/components/poll.jsx
index 7cf2c57b783e0157ae55f3df13f12b9b34e6e4f1..b8f64464099b7018e681cb9b86184d2ef3a2c3f7 100644
--- a/app/javascript/mastodon/components/poll.jsx
+++ b/app/javascript/mastodon/components/poll.jsx
@@ -7,7 +7,7 @@ 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 CheckIcon from '@material-symbols/svg-600/outlined/check.svg?react';
import escapeTextContentForBrowser from 'escape-html';
import spring from 'react-motion/lib/spring';
diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx
index c141ee2da3ef19e4d01a9a3372ae9a6974973167..f1ea369610aafa29b216f9028b4193a445c5d300 100644
--- a/app/javascript/mastodon/components/status.jsx
+++ b/app/javascript/mastodon/components/status.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 AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.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 AlternateEmailIcon from '@material-symbols/svg-600/outlined/alternate_email.svg?react';
+import PushPinIcon from '@material-symbols/svg-600/outlined/push_pin.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import ReplyIcon from '@material-symbols/svg-600/outlined/reply.svg?react';
import { HotKeys } from 'react-hotkeys';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/components/status_action_bar.jsx b/app/javascript/mastodon/components/status_action_bar.jsx
index 25eab91fe38e68a44984d8ef78389e40b8d120f6..536ea350ae987de0e3b809fcfdde77bffdee8eca 100644
--- a/app/javascript/mastodon/components/status_action_bar.jsx
+++ b/app/javascript/mastodon/components/status_action_bar.jsx
@@ -9,18 +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 { ReactComponent as BookmarkBorderIcon } from '@material-symbols/svg-600/outlined/bookmark.svg';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.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-fill.svg';
-import { ReactComponent as StarBorderIcon } from '@material-symbols/svg-600/outlined/star.svg';
-import { ReactComponent as VisibilityIcon } from '@material-symbols/svg-600/outlined/visibility.svg';
-
-import { ReactComponent as RepeatDisabledIcon } from 'mastodon/../svg-icons/repeat_disabled.svg';
-import { ReactComponent as RepeatPrivateIcon } from 'mastodon/../svg-icons/repeat_private.svg';
+import BookmarkIcon from '@material-symbols/svg-600/outlined/bookmark-fill.svg';
+import BookmarkBorderIcon from '@material-symbols/svg-600/outlined/bookmark.svg?react';
+import MoreHorizIcon from '@material-symbols/svg-600/outlined/more_horiz.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import ReplyIcon from '@material-symbols/svg-600/outlined/reply.svg?react';
+import ReplyAllIcon from '@material-symbols/svg-600/outlined/reply_all.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star-fill.svg?react';
+import StarBorderIcon from '@material-symbols/svg-600/outlined/star.svg?react';
+import VisibilityIcon from '@material-symbols/svg-600/outlined/visibility.svg?react';
+
+import RepeatDisabledIcon from 'mastodon/../svg-icons/repeat_disabled.svg?react';
+import RepeatPrivateIcon from 'mastodon/../svg-icons/repeat_private.svg?react';
import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions';
import { WithRouterPropTypes } from 'mastodon/utils/react_router';
diff --git a/app/javascript/mastodon/components/status_content.jsx b/app/javascript/mastodon/components/status_content.jsx
index d1f50fc8d771cf3ca905cbb75d8be11de7e7050e..f8ca0b304345ab158a80a598733a5fd552572b72 100644
--- a/app/javascript/mastodon/components/status_content.jsx
+++ b/app/javascript/mastodon/components/status_content.jsx
@@ -9,7 +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 '@material-symbols/svg-600/outlined/chevron_right.svg?react';
import { Icon } from 'mastodon/components/icon';
import PollContainer from 'mastodon/containers/poll_container';
diff --git a/app/javascript/mastodon/components/verified_badge.tsx b/app/javascript/mastodon/components/verified_badge.tsx
index e96bf8256339df679c0a3afc1ee7084023af1413..add7c7acdf8c72c6009c7ae3861232fd18494521 100644
--- a/app/javascript/mastodon/components/verified_badge.tsx
+++ b/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 '@material-symbols/svg-600/outlined/check.svg?react';
import { Icon } from './icon';
diff --git a/app/javascript/mastodon/components/visibility_icon.tsx b/app/javascript/mastodon/components/visibility_icon.tsx
index 3e9f36dc70d8fa0d9f5ca33c00e3879495f58f0f..e0ef1372f132daccaf50c99f0e51f31324043e0e 100644
--- a/app/javascript/mastodon/components/visibility_icon.tsx
+++ b/app/javascript/mastodon/components/visibility_icon.tsx
@@ -1,9 +1,9 @@
import { defineMessages, useIntl } from 'react-intl';
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import AlternateEmailIcon from '@material-symbols/svg-600/outlined/alternate_email.svg?react';
+import LockIcon from '@material-symbols/svg-600/outlined/lock.svg?react';
+import LockOpenIcon from '@material-symbols/svg-600/outlined/lock_open.svg?react';
+import PublicIcon from '@material-symbols/svg-600/outlined/public.svg?react';
import { Icon } from './icon';
diff --git a/app/javascript/mastodon/features/about/index.jsx b/app/javascript/mastodon/features/about/index.jsx
index 380942b8ee104f97224a1c18d7a8efee333afc03..1e43aaea7be20a076977dea2da62d5fb42a51edb 100644
--- a/app/javascript/mastodon/features/about/index.jsx
+++ b/app/javascript/mastodon/features/about/index.jsx
@@ -10,8 +10,8 @@ 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-symbols/svg-600/outlined/chevron_right.svg?react';
+import ExpandMoreIcon from '@material-symbols/svg-600/outlined/expand_more.svg?react';
import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'mastodon/actions/server';
import Column from 'mastodon/components/column';
diff --git a/app/javascript/mastodon/features/account/components/follow_request_note.jsx b/app/javascript/mastodon/features/account/components/follow_request_note.jsx
index 685c282df27761697d0598892eef0e4e76c2cfaf..da775248cebf1e5bee34d6ca6d456e84f2e8f4ea 100644
--- a/app/javascript/mastodon/features/account/components/follow_request_note.jsx
+++ b/app/javascript/mastodon/features/account/components/follow_request_note.jsx
@@ -3,8 +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 { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CheckIcon from '@material-symbols/svg-600/outlined/check.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/account/components/header.jsx b/app/javascript/mastodon/features/account/components/header.jsx
index 97f68c2217dfef92af9cd290f815dca6f9165f1b..e8b5e72145f0032936d631fc5a24aa0081241a58 100644
--- a/app/javascript/mastodon/features/account/components/header.jsx
+++ b/app/javascript/mastodon/features/account/components/header.jsx
@@ -9,12 +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 { 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 { ReactComponent as ShareIcon } from '@material-symbols/svg-600/outlined/share.svg';
+import CheckIcon from '@material-symbols/svg-600/outlined/check.svg?react';
+import LockIcon from '@material-symbols/svg-600/outlined/lock.svg?react';
+import MoreHorizIcon from '@material-symbols/svg-600/outlined/more_horiz.svg?react';
+import NotificationsIcon from '@material-symbols/svg-600/outlined/notifications.svg?react';
+import NotificationsActiveIcon from '@material-symbols/svg-600/outlined/notifications_active-fill.svg?react';
+import ShareIcon from '@material-symbols/svg-600/outlined/share.svg?react';
import { Avatar } from 'mastodon/components/avatar';
import { Badge, AutomatedBadge, GroupBadge } from 'mastodon/components/badge';
diff --git a/app/javascript/mastodon/features/account_gallery/components/media_item.jsx b/app/javascript/mastodon/features/account_gallery/components/media_item.jsx
index 657b17d43d81b1f380aa48eb0c5ebac134f124da..e4495601f55b046790a26d09e18b5d6dc090d325 100644
--- a/app/javascript/mastodon/features/account_gallery/components/media_item.jsx
+++ b/app/javascript/mastodon/features/account_gallery/components/media_item.jsx
@@ -5,9 +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 { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow.svg';
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
+import AudiotrackIcon from '@material-symbols/svg-600/outlined/music_note.svg?react';
+import PlayArrowIcon from '@material-symbols/svg-600/outlined/play_arrow.svg?react';
+import VisibilityOffIcon from '@material-symbols/svg-600/outlined/visibility_off.svg?react';
import { Blurhash } from 'mastodon/components/blurhash';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/audio/index.jsx b/app/javascript/mastodon/features/audio/index.jsx
index 7a7d0910fa8f70523421da82266d9a57c2414d3c..881e5cef1b11999d9e75b4f3001184de1e1688d0 100644
--- a/app/javascript/mastodon/features/audio/index.jsx
+++ b/app/javascript/mastodon/features/audio/index.jsx
@@ -7,12 +7,12 @@ 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 DownloadIcon from '@material-symbols/svg-600/outlined/download.svg?react';
+import PauseIcon from '@material-symbols/svg-600/outlined/pause.svg?react';
+import PlayArrowIcon from '@material-symbols/svg-600/outlined/play_arrow-fill.svg?react';
+import VisibilityOffIcon from '@material-symbols/svg-600/outlined/visibility_off.svg?react';
+import VolumeOffIcon from '@material-symbols/svg-600/outlined/volume_off-fill.svg?react';
+import VolumeUpIcon from '@material-symbols/svg-600/outlined/volume_up-fill.svg?react';
import { throttle, debounce } from 'lodash';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/blocks/index.jsx b/app/javascript/mastodon/features/blocks/index.jsx
index 615e4c8be22fefd3d021e861d06122ea1717d9d1..7e1eda8aca74554804b12e19c70961da55456014 100644
--- a/app/javascript/mastodon/features/blocks/index.jsx
+++ b/app/javascript/mastodon/features/blocks/index.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 BlockIcon } from '@material-symbols/svg-600/outlined/block-fill.svg';
+import BlockIcon from '@material-symbols/svg-600/outlined/block-fill.svg?react';
import { debounce } from 'lodash';
import { fetchBlocks, expandBlocks } from '../../actions/blocks';
diff --git a/app/javascript/mastodon/features/bookmarked_statuses/index.jsx b/app/javascript/mastodon/features/bookmarked_statuses/index.jsx
index be6110b0da33e0b3f62dbe75224767e306913365..767707755b7769a523d332a59b8c52463141c8c6 100644
--- a/app/javascript/mastodon/features/bookmarked_statuses/index.jsx
+++ b/app/javascript/mastodon/features/bookmarked_statuses/index.jsx
@@ -8,7 +8,7 @@ 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-symbols/svg-600/outlined/bookmarks-fill.svg?react';
import { debounce } from 'lodash';
import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'mastodon/actions/bookmarks';
diff --git a/app/javascript/mastodon/features/community_timeline/index.jsx b/app/javascript/mastodon/features/community_timeline/index.jsx
index 60f036a628b8084bcbb098cfdfcdd8f38f5923ce..1862cdf902cc100220efe3b16c023a6be6d5c731 100644
--- a/app/javascript/mastodon/features/community_timeline/index.jsx
+++ b/app/javascript/mastodon/features/community_timeline/index.jsx
@@ -7,7 +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 '@material-symbols/svg-600/outlined/group.svg?react';
import { DismissableBanner } from 'mastodon/components/dismissable_banner';
import { domain } from 'mastodon/initial_state';
diff --git a/app/javascript/mastodon/features/compose/components/action_bar.jsx b/app/javascript/mastodon/features/compose/components/action_bar.jsx
index 3e2109092576f7a25716cc0b23f23547d257feb9..42ed78578a3035c59134ad84e84d17656c60923e 100644
--- a/app/javascript/mastodon/features/compose/components/action_bar.jsx
+++ b/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 '@material-symbols/svg-600/outlined/menu.svg?react';
import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.jsx b/app/javascript/mastodon/features/compose/components/compose_form.jsx
index b15fe2909b7047630386352f33744cca161be163..1570bd4d067908787ce6a5a2f813d463c0e492ed 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.jsx
+++ b/app/javascript/mastodon/features/compose/components/compose_form.jsx
@@ -8,7 +8,7 @@ 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 LockIcon from '@material-symbols/svg-600/outlined/lock.svg?react';
import { length } from 'stringz';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/compose/components/poll_button.jsx b/app/javascript/mastodon/features/compose/components/poll_button.jsx
index f722815b511706cfcf73e71cc8d3232f5b14a20c..a5025a0f402f6811d7f8cd89fc036d327db2623f 100644
--- a/app/javascript/mastodon/features/compose/components/poll_button.jsx
+++ b/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 '@material-symbols/svg-600/outlined/insert_chart.svg?react';
import { IconButton } from '../../../components/icon_button';
diff --git a/app/javascript/mastodon/features/compose/components/poll_form.jsx b/app/javascript/mastodon/features/compose/components/poll_form.jsx
index d909a22a09439c186b465e018797d3603532ded6..89596815eca06ec9546a61c25637cd9e0ec2b1ef 100644
--- a/app/javascript/mastodon/features/compose/components/poll_form.jsx
+++ b/app/javascript/mastodon/features/compose/components/poll_form.jsx
@@ -8,8 +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 { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import AddIcon from '@material-symbols/svg-600/outlined/add.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
import AutosuggestInput from 'mastodon/components/autosuggest_input';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx b/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx
index 060eb6767cf8ed0093d3c8e3e7cd3e002fde8340..0dbbcbc256124c50be767cfe2a1ad33059ff82a4 100644
--- a/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx
+++ b/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx
@@ -6,10 +6,10 @@ 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 LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import AlternateEmailIcon from '@material-symbols/svg-600/outlined/alternate_email.svg?react';
+import LockIcon from '@material-symbols/svg-600/outlined/lock.svg?react';
+import LockOpenIcon from '@material-symbols/svg-600/outlined/lock_open.svg?react';
+import PublicIcon from '@material-symbols/svg-600/outlined/public.svg?react';
import { supportsPassiveEvents } from 'detect-passive-events';
import Overlay from 'react-overlays/Overlay';
diff --git a/app/javascript/mastodon/features/compose/components/reply_indicator.jsx b/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
index af7a9b6be5d982e14b59da02b00b9261cd54df7e..40e79cafaa0261369645cd099420d90094cd2872 100644
--- a/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
+++ b/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
@@ -5,7 +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 '@material-symbols/svg-600/outlined/close.svg?react';
import AttachmentList from 'mastodon/components/attachment_list';
import { WithOptionalRouterPropTypes, withOptionalRouter } from 'mastodon/utils/react_router';
diff --git a/app/javascript/mastodon/features/compose/components/search.jsx b/app/javascript/mastodon/features/compose/components/search.jsx
index 5d55330dcb30649de6c5d697cd9037a251510719..8dbbb0383debf6dc273cd8b1d085f67033974baa 100644
--- a/app/javascript/mastodon/features/compose/components/search.jsx
+++ b/app/javascript/mastodon/features/compose/components/search.jsx
@@ -8,9 +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 { 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-symbols/svg-600/outlined/cancel-fill.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
+import SearchIcon from '@material-symbols/svg-600/outlined/search.svg?react';
import { Icon } from 'mastodon/components/icon';
import { domain, searchEnabled } from 'mastodon/initial_state';
diff --git a/app/javascript/mastodon/features/compose/components/search_results.jsx b/app/javascript/mastodon/features/compose/components/search_results.jsx
index 2667ed543777847354970ac8a5233cc2b8f4ddd0..00d4dc53292c3ff837df5bb30641ecb7100482e7 100644
--- a/app/javascript/mastodon/features/compose/components/search_results.jsx
+++ b/app/javascript/mastodon/features/compose/components/search_results.jsx
@@ -5,10 +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 { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
-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 FindInPageIcon from '@material-symbols/svg-600/outlined/find_in_page.svg?react';
+import PeopleIcon from '@material-symbols/svg-600/outlined/group.svg?react';
+import SearchIcon from '@material-symbols/svg-600/outlined/search.svg?react';
+import TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
import { Icon } from 'mastodon/components/icon';
import { LoadMore } from 'mastodon/components/load_more';
diff --git a/app/javascript/mastodon/features/compose/components/upload.jsx b/app/javascript/mastodon/features/compose/components/upload.jsx
index a443741d5cf54ddc6c7629a25a572d936ec05ece..88d6f68b54dcd183c05c6fbb0de8c2edba425460 100644
--- a/app/javascript/mastodon/features/compose/components/upload.jsx
+++ b/app/javascript/mastodon/features/compose/components/upload.jsx
@@ -5,9 +5,9 @@ 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 CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
+import EditIcon from '@material-symbols/svg-600/outlined/edit.svg?react';
+import InfoIcon from '@material-symbols/svg-600/outlined/info.svg?react';
import spring from 'react-motion/lib/spring';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/compose/components/upload_button.jsx b/app/javascript/mastodon/features/compose/components/upload_button.jsx
index dda8a42ab082c9f4c3b1a1ab846dfe9f8b9dedb5..201b1b8983c2556f106bbcb9c9b0f88f3902075f 100644
--- a/app/javascript/mastodon/features/compose/components/upload_button.jsx
+++ b/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 '@material-symbols/svg-600/outlined/add_photo_alternate.svg?react';
import { IconButton } from '../../../components/icon_button';
diff --git a/app/javascript/mastodon/features/compose/components/upload_progress.jsx b/app/javascript/mastodon/features/compose/components/upload_progress.jsx
index 90c5142e24dd349c5619b1e7540b6d6b86d79933..2c44ac6364d81407aeba27873da8bdca4b53e152 100644
--- a/app/javascript/mastodon/features/compose/components/upload_progress.jsx
+++ b/app/javascript/mastodon/features/compose/components/upload_progress.jsx
@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl';
-import { ReactComponent as UploadFileIcon } from '@material-symbols/svg-600/outlined/upload_file.svg';
+import UploadFileIcon from '@material-symbols/svg-600/outlined/upload_file.svg?react';
import spring from 'react-motion/lib/spring';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/compose/index.jsx b/app/javascript/mastodon/features/compose/index.jsx
index 65650ffe0223042dedaf129c87246a05d8d966e3..0b9fa65fe13f7f63f6fc836f6da3a045f2d96d11 100644
--- a/app/javascript/mastodon/features/compose/index.jsx
+++ b/app/javascript/mastodon/features/compose/index.jsx
@@ -9,13 +9,13 @@ 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 PeopleIcon from '@material-symbols/svg-600/outlined/group.svg?react';
+import HomeIcon from '@material-symbols/svg-600/outlined/home-fill.svg?react';
+import LogoutIcon from '@material-symbols/svg-600/outlined/logout.svg?react';
+import MenuIcon from '@material-symbols/svg-600/outlined/menu.svg?react';
+import NotificationsIcon from '@material-symbols/svg-600/outlined/notifications-fill.svg?react';
+import PublicIcon from '@material-symbols/svg-600/outlined/public.svg?react';
+import SettingsIcon from '@material-symbols/svg-600/outlined/settings-fill.svg?react';
import spring from 'react-motion/lib/spring';
import { openModal } from 'mastodon/actions/modal';
diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
index 005edc5c2b152291a1c18ce9429105521ee69dea..0aeec1e3b0770cd85e70a222683b30f9f9372399 100644
--- a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
+++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
@@ -8,8 +8,8 @@ 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 MoreHorizIcon from '@material-symbols/svg-600/outlined/more_horiz.svg?react';
+import ReplyIcon from '@material-symbols/svg-600/outlined/reply.svg?react';
import { HotKeys } from 'react-hotkeys';
import AttachmentList from 'mastodon/components/attachment_list';
diff --git a/app/javascript/mastodon/features/direct_timeline/index.jsx b/app/javascript/mastodon/features/direct_timeline/index.jsx
index 4e6d0c3e72ff62624df58a2764a656e9561cada1..1a11520c3b74c7a7ee2a75b9bac8038a41733b51 100644
--- a/app/javascript/mastodon/features/direct_timeline/index.jsx
+++ b/app/javascript/mastodon/features/direct_timeline/index.jsx
@@ -7,7 +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 '@material-symbols/svg-600/outlined/alternate_email.svg?react';
import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
import { mountConversations, unmountConversations, expandConversations } from 'mastodon/actions/conversations';
diff --git a/app/javascript/mastodon/features/directory/index.jsx b/app/javascript/mastodon/features/directory/index.jsx
index 20c84d4df069f3fa90b12fb1303ca87cee0dfe10..0de77164f59344fc61884483cf8be188ff5dde9e 100644
--- a/app/javascript/mastodon/features/directory/index.jsx
+++ b/app/javascript/mastodon/features/directory/index.jsx
@@ -9,7 +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 '@material-symbols/svg-600/outlined/group.svg?react';
import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'mastodon/actions/columns';
import { fetchDirectory, expandDirectory } from 'mastodon/actions/directory';
diff --git a/app/javascript/mastodon/features/domain_blocks/index.jsx b/app/javascript/mastodon/features/domain_blocks/index.jsx
index 142f14bf7166170a97d1c788ad7d4ca5d00cff17..7a57ea126290da8948ec6a03a28bf52a57514726 100644
--- a/app/javascript/mastodon/features/domain_blocks/index.jsx
+++ b/app/javascript/mastodon/features/domain_blocks/index.jsx
@@ -8,7 +8,7 @@ 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 BlockIcon from '@material-symbols/svg-600/outlined/block-fill.svg?react';
import { debounce } from 'lodash';
import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks';
diff --git a/app/javascript/mastodon/features/explore/index.jsx b/app/javascript/mastodon/features/explore/index.jsx
index 80825e456396cbd2bc098d263a2ce479c2a2a5dc..a59830fb8228eaeca5380b9d882d23effe74fef7 100644
--- a/app/javascript/mastodon/features/explore/index.jsx
+++ b/app/javascript/mastodon/features/explore/index.jsx
@@ -8,8 +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 { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import SearchIcon from '@material-symbols/svg-600/outlined/search.svg?react';
+import TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
import Column from 'mastodon/components/column';
import ColumnHeader from 'mastodon/components/column_header';
diff --git a/app/javascript/mastodon/features/explore/results.jsx b/app/javascript/mastodon/features/explore/results.jsx
index 8c172c134a0989eb1b179faf47429059487a1353..665f97f8ffd3a92f2f9ce2a5d603814658e6f580 100644
--- a/app/javascript/mastodon/features/explore/results.jsx
+++ b/app/javascript/mastodon/features/explore/results.jsx
@@ -9,9 +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 { 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-symbols/svg-600/outlined/find_in_page.svg?react';
+import PeopleIcon from '@material-symbols/svg-600/outlined/group.svg?react';
+import TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
import { submitSearch, expandSearch } from 'mastodon/actions/search';
import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag';
diff --git a/app/javascript/mastodon/features/favourited_statuses/index.jsx b/app/javascript/mastodon/features/favourited_statuses/index.jsx
index d3c3cc9f0916980699f0fe09f2a2e2c15b52359c..d4716580d8b252d1c6266c158f359ef42a1d9d8b 100644
--- a/app/javascript/mastodon/features/favourited_statuses/index.jsx
+++ b/app/javascript/mastodon/features/favourited_statuses/index.jsx
@@ -8,7 +8,7 @@ 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 StarIcon from '@material-symbols/svg-600/outlined/star-fill.svg?react';
import { debounce } from 'lodash';
import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
diff --git a/app/javascript/mastodon/features/favourites/index.jsx b/app/javascript/mastodon/features/favourites/index.jsx
index 637a9d6994a1983160a17e2e9865e05b9abfb36f..a26afda892246ecae50e86efac83cd18015c93e3 100644
--- a/app/javascript/mastodon/features/favourites/index.jsx
+++ b/app/javascript/mastodon/features/favourites/index.jsx
@@ -8,7 +8,7 @@ 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 RefreshIcon from '@material-symbols/svg-600/outlined/refresh.svg?react';
import { debounce } from 'lodash';
import { fetchFavourites, expandFavourites } from 'mastodon/actions/interactions';
diff --git a/app/javascript/mastodon/features/filters/select_filter.jsx b/app/javascript/mastodon/features/filters/select_filter.jsx
index 9e8f87e0051a89c32e5520c98042f1ea7ad7c01d..55f2a8c09fb5810db90c5bb531cad666d69a3071 100644
--- a/app/javascript/mastodon/features/filters/select_filter.jsx
+++ b/app/javascript/mastodon/features/filters/select_filter.jsx
@@ -5,7 +5,7 @@ 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 AddIcon from '@material-symbols/svg-600/outlined/add.svg?react';
import fuzzysort from 'fuzzysort';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/firehose/index.jsx b/app/javascript/mastodon/features/firehose/index.jsx
index 0ed8aa11aa6ad38ac4eaf573f621b8b2e7d88c6e..337b9a65b29545ed03a7c71ba83332a7ac649bec 100644
--- a/app/javascript/mastodon/features/firehose/index.jsx
+++ b/app/javascript/mastodon/features/firehose/index.jsx
@@ -6,7 +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 '@material-symbols/svg-600/outlined/public.svg?react';
import { addColumn } from 'mastodon/actions/columns';
import { changeSetting } from 'mastodon/actions/settings';
diff --git a/app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx b/app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx
index ca2b454143a4687c23cd87de87290b1350ad0a26..ed61f2d84131c027d61d28c88390a1eca51819d4 100644
--- a/app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx
+++ b/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 { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CheckIcon from '@material-symbols/svg-600/outlined/check.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
import { Avatar } from '../../../components/avatar';
import { DisplayName } from '../../../components/display_name';
diff --git a/app/javascript/mastodon/features/follow_requests/index.jsx b/app/javascript/mastodon/features/follow_requests/index.jsx
index 3b98791926991aea258cd64c97fb113279c4ffed..9f73d092529efaab6e03e816905646561f85ab8d 100644
--- a/app/javascript/mastodon/features/follow_requests/index.jsx
+++ b/app/javascript/mastodon/features/follow_requests/index.jsx
@@ -8,7 +8,7 @@ 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 PersonAddIcon from '@material-symbols/svg-600/outlined/person_add.svg?react';
import { debounce } from 'lodash';
import { fetchFollowRequests, expandFollowRequests } from '../../actions/accounts';
diff --git a/app/javascript/mastodon/features/followed_tags/index.jsx b/app/javascript/mastodon/features/followed_tags/index.jsx
index dec53f012101075da4b7133f3d4ea8e96b4ed16e..d4b26356b304a9ca09c1ec0a150c720ffc45ae0e 100644
--- a/app/javascript/mastodon/features/followed_tags/index.jsx
+++ b/app/javascript/mastodon/features/followed_tags/index.jsx
@@ -8,7 +8,7 @@ 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 TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
import { debounce } from 'lodash';
import { expandFollowedHashtags, fetchFollowedHashtags } from 'mastodon/actions/tags';
diff --git a/app/javascript/mastodon/features/getting_started/components/announcements.jsx b/app/javascript/mastodon/features/getting_started/components/announcements.jsx
index 1999316a8e776d55669407c241ffe22c70648966..0818da5519e67a554a0293ccafe151188ecc58e7 100644
--- a/app/javascript/mastodon/features/getting_started/components/announcements.jsx
+++ b/app/javascript/mastodon/features/getting_started/components/announcements.jsx
@@ -9,9 +9,9 @@ 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 AddIcon from '@material-symbols/svg-600/outlined/add.svg?react';
+import ChevronLeftIcon from '@material-symbols/svg-600/outlined/chevron_left.svg?react';
+import ChevronRightIcon from '@material-symbols/svg-600/outlined/chevron_right.svg?react';
import TransitionMotion from 'react-motion/lib/TransitionMotion';
import spring from 'react-motion/lib/spring';
import ReactSwipeableViews from 'react-swipeable-views';
diff --git a/app/javascript/mastodon/features/getting_started/index.jsx b/app/javascript/mastodon/features/getting_started/index.jsx
index 5994e88edf91bb597cb17d7e615bb122138bb3b0..29bbfd35f69c2fad4e8038005415885caa07a520 100644
--- a/app/javascript/mastodon/features/getting_started/index.jsx
+++ b/app/javascript/mastodon/features/getting_started/index.jsx
@@ -9,17 +9,17 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
-import { ReactComponent as BookmarksIcon } from '@material-symbols/svg-600/outlined/bookmarks-fill.svg';
-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 ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
-import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg';
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.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 { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import AlternateEmailIcon from '@material-symbols/svg-600/outlined/alternate_email.svg?react';
+import BookmarksIcon from '@material-symbols/svg-600/outlined/bookmarks-fill.svg?react';
+import PeopleIcon from '@material-symbols/svg-600/outlined/group.svg?react';
+import HomeIcon from '@material-symbols/svg-600/outlined/home-fill.svg?react';
+import ListAltIcon from '@material-symbols/svg-600/outlined/list_alt.svg?react';
+import MenuIcon from '@material-symbols/svg-600/outlined/menu.svg?react';
+import PersonAddIcon from '@material-symbols/svg-600/outlined/person_add.svg?react';
+import PublicIcon from '@material-symbols/svg-600/outlined/public.svg?react';
+import SettingsIcon from '@material-symbols/svg-600/outlined/settings-fill.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star.svg?react';
+import TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
import { fetchFollowRequests } from 'mastodon/actions/accounts';
import Column from 'mastodon/components/column';
diff --git a/app/javascript/mastodon/features/hashtag_timeline/index.jsx b/app/javascript/mastodon/features/hashtag_timeline/index.jsx
index d39d550a1bef6d6ae27126702b628c7f3a881c89..bdb8da00a57f8272d55841a52064786ef0a2013d 100644
--- a/app/javascript/mastodon/features/hashtag_timeline/index.jsx
+++ b/app/javascript/mastodon/features/hashtag_timeline/index.jsx
@@ -8,7 +8,7 @@ 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 TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
import { isEqual } from 'lodash';
import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
diff --git a/app/javascript/mastodon/features/home_timeline/index.jsx b/app/javascript/mastodon/features/home_timeline/index.jsx
index 613eb4b8966b7dd5c0673e31d45aadd0af52f74d..6fc986393e0eaf4eed8d84ad559552b0bf62d009 100644
--- a/app/javascript/mastodon/features/home_timeline/index.jsx
+++ b/app/javascript/mastodon/features/home_timeline/index.jsx
@@ -10,8 +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 { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import CampaignIcon from '@material-symbols/svg-600/outlined/campaign.svg?react';
+import HomeIcon from '@material-symbols/svg-600/outlined/home-fill.svg?react';
import { fetchAnnouncements, toggleShowAnnouncements } from 'mastodon/actions/announcements';
import { IconWithBadge } from 'mastodon/components/icon_with_badge';
diff --git a/app/javascript/mastodon/features/interaction_modal/index.jsx b/app/javascript/mastodon/features/interaction_modal/index.jsx
index 216c63a7e609a13d18e30e7927f6fb481ecc1da9..527cba5d97a5bf5d59c17b0b8b8bea6eb9fb6f57 100644
--- a/app/javascript/mastodon/features/interaction_modal/index.jsx
+++ b/app/javascript/mastodon/features/interaction_modal/index.jsx
@@ -7,10 +7,10 @@ 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 PersonAddIcon from '@material-symbols/svg-600/outlined/person_add.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import ReplyIcon from '@material-symbols/svg-600/outlined/reply.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star.svg?react';
import { throttle, escapeRegExp } from 'lodash';
import { openModal, closeModal } from 'mastodon/actions/modal';
diff --git a/app/javascript/mastodon/features/keyboard_shortcuts/index.jsx b/app/javascript/mastodon/features/keyboard_shortcuts/index.jsx
index 7552e1799b4ec8b14e3a983ac232be474b21c0b6..054797d18f03d8cda524f4cf0620993e38b105a3 100644
--- a/app/javascript/mastodon/features/keyboard_shortcuts/index.jsx
+++ b/app/javascript/mastodon/features/keyboard_shortcuts/index.jsx
@@ -6,7 +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 '@material-symbols/svg-600/outlined/info.svg?react';
import Column from 'mastodon/components/column';
import ColumnHeader from 'mastodon/components/column_header';
diff --git a/app/javascript/mastodon/features/list_adder/components/list.jsx b/app/javascript/mastodon/features/list_adder/components/list.jsx
index 6c5aab85da7fff1dfad1bddfe7be6bacf6f82aab..14e320e00bf1fb567de1c379f6d75a271e98d70e 100644
--- a/app/javascript/mastodon/features/list_adder/components/list.jsx
+++ b/app/javascript/mastodon/features/list_adder/components/list.jsx
@@ -6,9 +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 { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
+import AddIcon from '@material-symbols/svg-600/outlined/add.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
+import ListAltIcon from '@material-symbols/svg-600/outlined/list_alt.svg?react';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/list_editor/components/account.jsx b/app/javascript/mastodon/features/list_editor/components/account.jsx
index 18d5e905cbc0b756bdf54b5cf324568f5b485bf7..30595ebc8b24eb96746ea87188052857e8789d34 100644
--- a/app/javascript/mastodon/features/list_editor/components/account.jsx
+++ b/app/javascript/mastodon/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 { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import AddIcon from '@material-symbols/svg-600/outlined/add.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
import { removeFromListEditor, addToListEditor } from '../../../actions/lists';
import { Avatar } from '../../../components/avatar';
diff --git a/app/javascript/mastodon/features/list_editor/components/edit_list_form.jsx b/app/javascript/mastodon/features/list_editor/components/edit_list_form.jsx
index 1e2446f92b81fe142c3a278a80c6428d30c27307..db89611db22e69f28e4d4dccbdef6f3395a4db33 100644
--- a/app/javascript/mastodon/features/list_editor/components/edit_list_form.jsx
+++ b/app/javascript/mastodon/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-symbols/svg-600/outlined/check.svg?react';
import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
import { IconButton } from '../../../components/icon_button';
diff --git a/app/javascript/mastodon/features/list_editor/components/search.jsx b/app/javascript/mastodon/features/list_editor/components/search.jsx
index 093af5cd4e2cebeb1bad8de46fdbe185ba2437f1..1971fd2f7678d464c9df85665effe152c4245e79 100644
--- a/app/javascript/mastodon/features/list_editor/components/search.jsx
+++ b/app/javascript/mastodon/features/list_editor/components/search.jsx
@@ -7,8 +7,8 @@ import classNames from 'classnames';
import { connect } from 'react-redux';
-import { ReactComponent as CancelIcon } from '@material-symbols/svg-600/outlined/cancel.svg';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
+import CancelIcon from '@material-symbols/svg-600/outlined/cancel.svg?react';
+import SearchIcon from '@material-symbols/svg-600/outlined/search.svg?react';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/list_timeline/index.jsx b/app/javascript/mastodon/features/list_timeline/index.jsx
index 55579c2fd1fcf73a463af86f7e58aa7decb849e9..4ea794bdd4e5b9d103c29bd734666aaea8109798 100644
--- a/app/javascript/mastodon/features/list_timeline/index.jsx
+++ b/app/javascript/mastodon/features/list_timeline/index.jsx
@@ -9,9 +9,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 { 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 DeleteIcon from '@material-symbols/svg-600/outlined/delete.svg?react';
+import EditIcon from '@material-symbols/svg-600/outlined/edit.svg?react';
+import ListAltIcon from '@material-symbols/svg-600/outlined/list_alt.svg?react';
import Toggle from 'react-toggle';
import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
diff --git a/app/javascript/mastodon/features/lists/index.jsx b/app/javascript/mastodon/features/lists/index.jsx
index 9014394351ad8fee978eadde148ef6fe0e8b450d..e59a6e413004eeb5d8224f28878f96f1df3bb888 100644
--- a/app/javascript/mastodon/features/lists/index.jsx
+++ b/app/javascript/mastodon/features/lists/index.jsx
@@ -9,7 +9,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 '@material-symbols/svg-600/outlined/list_alt.svg?react';
import { fetchLists } from 'mastodon/actions/lists';
import Column from 'mastodon/components/column';
diff --git a/app/javascript/mastodon/features/mutes/index.jsx b/app/javascript/mastodon/features/mutes/index.jsx
index 7f66edc03dc67c2b0fa25f09583d712fba6ac0af..ab0d30fcd118943af7ac0247705002f47235029d 100644
--- a/app/javascript/mastodon/features/mutes/index.jsx
+++ b/app/javascript/mastodon/features/mutes/index.jsx
@@ -8,7 +8,7 @@ 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 VolumeOffIcon from '@material-symbols/svg-600/outlined/volume_off.svg?react';
import { debounce } from 'lodash';
import { fetchMutes, expandMutes } from '../../actions/mutes';
diff --git a/app/javascript/mastodon/features/notifications/components/clear_column_button.jsx b/app/javascript/mastodon/features/notifications/components/clear_column_button.jsx
index 54fa16fb6704d3f484dae3f875083223d73c2ff2..2e257ed5c3d1c97955f0663b9f324479aa7da9d6 100644
--- a/app/javascript/mastodon/features/notifications/components/clear_column_button.jsx
+++ b/app/javascript/mastodon/features/notifications/components/clear_column_button.jsx
@@ -3,7 +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 '@material-symbols/svg-600/outlined/delete_forever.svg?react';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/notifications/components/filter_bar.jsx b/app/javascript/mastodon/features/notifications/components/filter_bar.jsx
index 84bd4791ca084aa525c6416b4096935236bee81b..56338333b1f70419e9cae7983e63197185f86d85 100644
--- a/app/javascript/mastodon/features/notifications/components/filter_bar.jsx
+++ b/app/javascript/mastodon/features/notifications/components/filter_bar.jsx
@@ -3,12 +3,12 @@ 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 { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.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 ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg';
+import HomeIcon from '@material-symbols/svg-600/outlined/home-fill.svg?react';
+import InsertChartIcon from '@material-symbols/svg-600/outlined/insert_chart.svg?react';
+import PersonAddIcon from '@material-symbols/svg-600/outlined/person_add.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import ReplyAllIcon from '@material-symbols/svg-600/outlined/reply_all.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star.svg?react';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/notifications/components/follow_request.jsx b/app/javascript/mastodon/features/notifications/components/follow_request.jsx
index 03420b6c01e6e88a317905a2be78177b0f74bb2c..904b6048aef61123d6f3f69597b710b22843ba4c 100644
--- a/app/javascript/mastodon/features/notifications/components/follow_request.jsx
+++ b/app/javascript/mastodon/features/notifications/components/follow_request.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 { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CheckIcon from '@material-symbols/svg-600/outlined/check.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
import { Avatar } from 'mastodon/components/avatar';
import { DisplayName } from 'mastodon/components/display_name';
diff --git a/app/javascript/mastodon/features/notifications/components/notification.jsx b/app/javascript/mastodon/features/notifications/components/notification.jsx
index ad7308b26fc6f0cd15d536a5dddcf7ee5dd1c39a..24cead5a591a0567f39037d4cba0a87adf857474 100644
--- a/app/javascript/mastodon/features/notifications/components/notification.jsx
+++ b/app/javascript/mastodon/features/notifications/components/notification.jsx
@@ -8,14 +8,14 @@ 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 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 EditIcon from '@material-symbols/svg-600/outlined/edit.svg?react';
+import FlagIcon from '@material-symbols/svg-600/outlined/flag-fill.svg?react';
+import HomeIcon from '@material-symbols/svg-600/outlined/home-fill.svg?react';
+import InsertChartIcon from '@material-symbols/svg-600/outlined/insert_chart.svg?react';
+import PersonIcon from '@material-symbols/svg-600/outlined/person-fill.svg?react';
+import PersonAddIcon from '@material-symbols/svg-600/outlined/person_add-fill.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star-fill.svg?react';
import { HotKeys } from 'react-hotkeys';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx b/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx
index b7ebb4c4675dcf5c752220b077717af0cd00e155..1c1750f72fead168389a1df36f936f479c7b4ed2 100644
--- a/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx
+++ b/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx
@@ -5,8 +5,8 @@ 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-symbols/svg-600/outlined/close.svg?react';
+import TuneIcon from '@material-symbols/svg-600/outlined/tune.svg?react';
import { requestBrowserPermission } from 'mastodon/actions/notifications';
import { changeSetting } from 'mastodon/actions/settings';
diff --git a/app/javascript/mastodon/features/notifications/index.jsx b/app/javascript/mastodon/features/notifications/index.jsx
index 762c96cccaff8c772d1d0c496ebad302cb8a3e3a..a841f346dd078668ca5890812e34e5406b423782 100644
--- a/app/javascript/mastodon/features/notifications/index.jsx
+++ b/app/javascript/mastodon/features/notifications/index.jsx
@@ -10,8 +10,8 @@ import { List as ImmutableList } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
-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 DoneAllIcon from '@material-symbols/svg-600/outlined/done_all.svg?react';
+import NotificationsIcon from '@material-symbols/svg-600/outlined/notifications-fill.svg?react';
import { debounce } from 'lodash';
import { compareId } from 'mastodon/compare_id';
diff --git a/app/javascript/mastodon/features/onboarding/components/step.jsx b/app/javascript/mastodon/features/onboarding/components/step.jsx
index 1f83f20801632b40ff557cdf098cb79f216fe65c..0eca65615c99ca9cd225611ce929e5458ca15d4c 100644
--- a/app/javascript/mastodon/features/onboarding/components/step.jsx
+++ b/app/javascript/mastodon/features/onboarding/components/step.jsx
@@ -2,8 +2,8 @@ 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 { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/done.svg';
+import ArrowRightAltIcon from '@material-symbols/svg-600/outlined/arrow_right_alt.svg?react';
+import CheckIcon from '@material-symbols/svg-600/outlined/done.svg?react';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/onboarding/index.jsx b/app/javascript/mastodon/features/onboarding/index.jsx
index 51677fbc7a580b0cbd81f192b9f07187594ff170..54699a1349f3fa89b2032c7b5551944992940d69 100644
--- a/app/javascript/mastodon/features/onboarding/index.jsx
+++ b/app/javascript/mastodon/features/onboarding/index.jsx
@@ -8,11 +8,11 @@ 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 AccountCircleIcon from '@material-symbols/svg-600/outlined/account_circle.svg?react';
+import ArrowRightAltIcon from '@material-symbols/svg-600/outlined/arrow_right_alt.svg?react';
+import ContentCopyIcon from '@material-symbols/svg-600/outlined/content_copy.svg?react';
+import EditNoteIcon from '@material-symbols/svg-600/outlined/edit_note.svg?react';
+import PersonAddIcon from '@material-symbols/svg-600/outlined/person_add.svg?react';
import illustration from 'mastodon/../images/elephant_ui_conversation.svg';
import { focusCompose } from 'mastodon/actions/compose';
diff --git a/app/javascript/mastodon/features/onboarding/profile.jsx b/app/javascript/mastodon/features/onboarding/profile.jsx
index daaef6065c6b95bc8a82887cd7c50d8f411e1a0a..6765c919e8450d9113b4d6b1c3827c8290a8f0b9 100644
--- a/app/javascript/mastodon/features/onboarding/profile.jsx
+++ b/app/javascript/mastodon/features/onboarding/profile.jsx
@@ -8,8 +8,8 @@ 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 AddPhotoAlternateIcon from '@material-symbols/svg-600/outlined/add_photo_alternate.svg?react';
+import EditIcon from '@material-symbols/svg-600/outlined/edit.svg?react';
import Toggle from 'react-toggle';
import { updateAccount } from 'mastodon/actions/accounts';
diff --git a/app/javascript/mastodon/features/onboarding/share.jsx b/app/javascript/mastodon/features/onboarding/share.jsx
index adc0f9cba3672f063fcad23a9ac4bb8ce3ea4318..657edabd744072640f50f68ef0b2cba17761664a 100644
--- a/app/javascript/mastodon/features/onboarding/share.jsx
+++ b/app/javascript/mastodon/features/onboarding/share.jsx
@@ -7,8 +7,8 @@ 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 ArrowRightAltIcon from '@material-symbols/svg-600/outlined/arrow_right_alt.svg?react';
+import ContentCopyIcon from '@material-symbols/svg-600/outlined/content_copy.svg?react';
import SwipeableViews from 'react-swipeable-views';
import { ColumnBackButton } from 'mastodon/components/column_back_button';
diff --git a/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx b/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx
index ed86d19f5c0a1b1bdd68d6669603b5beaaaee000..d73b6d2adfc9e1ff3f1f8273232125ad4e9a6440 100644
--- a/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx
+++ b/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx
@@ -9,11 +9,11 @@ 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-symbols/svg-600/outlined/open_in_new.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import ReplyIcon from '@material-symbols/svg-600/outlined/reply.svg?react';
+import ReplyAllIcon from '@material-symbols/svg-600/outlined/reply_all.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star.svg?react';
import { initBoostModal } from 'mastodon/actions/boosts';
import { replyCompose } from 'mastodon/actions/compose';
diff --git a/app/javascript/mastodon/features/picture_in_picture/components/header.jsx b/app/javascript/mastodon/features/picture_in_picture/components/header.jsx
index 80a13bd2e35b81388014ff81a807c5b5bfce08b1..608142b988dfba929bc5a58c7cdfe0368ba22929 100644
--- a/app/javascript/mastodon/features/picture_in_picture/components/header.jsx
+++ b/app/javascript/mastodon/features/picture_in_picture/components/header.jsx
@@ -8,7 +8,7 @@ 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-symbols/svg-600/outlined/close.svg?react';
import { Avatar } from 'mastodon/components/avatar';
import { DisplayName } from 'mastodon/components/display_name';
diff --git a/app/javascript/mastodon/features/pinned_statuses/index.jsx b/app/javascript/mastodon/features/pinned_statuses/index.jsx
index 82398ccda93ab04cf60325870712c85b9a6a04dd..2e68336a4f1141c2c5476102d58d87c608641edd 100644
--- a/app/javascript/mastodon/features/pinned_statuses/index.jsx
+++ b/app/javascript/mastodon/features/pinned_statuses/index.jsx
@@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
-import { ReactComponent as PushPinIcon } from '@material-symbols/svg-600/outlined/push_pin.svg';
+import PushPinIcon from '@material-symbols/svg-600/outlined/push_pin.svg?react';
import { getStatusList } from 'mastodon/selectors';
diff --git a/app/javascript/mastodon/features/public_timeline/index.jsx b/app/javascript/mastodon/features/public_timeline/index.jsx
index 09a9f6821f4aa0eb7aa7701cb8a6e477058e01dd..6aa6d27b9ddbd8a6909bc360e6f415c4b1e0deea 100644
--- a/app/javascript/mastodon/features/public_timeline/index.jsx
+++ b/app/javascript/mastodon/features/public_timeline/index.jsx
@@ -7,7 +7,7 @@ import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import PublicIcon from '@material-symbols/svg-600/outlined/public.svg?react';
import { DismissableBanner } from 'mastodon/components/dismissable_banner';
import { domain } from 'mastodon/initial_state';
diff --git a/app/javascript/mastodon/features/reblogs/index.jsx b/app/javascript/mastodon/features/reblogs/index.jsx
index be17668418e09f2d71975fcf9924a0430200deb1..aeba1ecff3fb375ec026ed67299f4a85b1f9f0b5 100644
--- a/app/javascript/mastodon/features/reblogs/index.jsx
+++ b/app/javascript/mastodon/features/reblogs/index.jsx
@@ -8,7 +8,7 @@ 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 RefreshIcon from '@material-symbols/svg-600/outlined/refresh.svg?react';
import { debounce } from 'lodash';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/report/components/option.jsx b/app/javascript/mastodon/features/report/components/option.jsx
index b3602219f5be9b7b80e9f2b200d4934860d1d4b8..9ffe43388c7bcdf8d0bfc154beace68edf16d87e 100644
--- a/app/javascript/mastodon/features/report/components/option.jsx
+++ b/app/javascript/mastodon/features/report/components/option.jsx
@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
import classNames from 'classnames';
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/done.svg';
+import CheckIcon from '@material-symbols/svg-600/outlined/done.svg?react';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/status/components/action_bar.jsx b/app/javascript/mastodon/features/status/components/action_bar.jsx
index 663bce74319004b454cfc81343ed4759a46dc49e..9355cb1f5c9d0d6404f2c8f12b1ebe83f76ad09d 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.jsx
+++ b/app/javascript/mastodon/features/status/components/action_bar.jsx
@@ -9,17 +9,17 @@ import { withRouter } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
-import { ReactComponent as BookmarkIcon } from '@material-symbols/svg-600/outlined/bookmark-fill.svg';
-import { ReactComponent as BookmarkBorderIcon } from '@material-symbols/svg-600/outlined/bookmark.svg';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.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-fill.svg';
-import { ReactComponent as StarBorderIcon } from '@material-symbols/svg-600/outlined/star.svg';
-
-import { ReactComponent as RepeatDisabledIcon } from 'mastodon/../svg-icons/repeat_disabled.svg';
-import { ReactComponent as RepeatPrivateIcon } from 'mastodon/../svg-icons/repeat_private.svg';
+import BookmarkIcon from '@material-symbols/svg-600/outlined/bookmark-fill.svg?react';
+import BookmarkBorderIcon from '@material-symbols/svg-600/outlined/bookmark.svg?react';
+import MoreHorizIcon from '@material-symbols/svg-600/outlined/more_horiz.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import ReplyIcon from '@material-symbols/svg-600/outlined/reply.svg?react';
+import ReplyAllIcon from '@material-symbols/svg-600/outlined/reply_all.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star-fill.svg?react';
+import StarBorderIcon from '@material-symbols/svg-600/outlined/star.svg?react';
+
+import RepeatDisabledIcon from 'mastodon/../svg-icons/repeat_disabled.svg?react';
+import RepeatPrivateIcon from 'mastodon/../svg-icons/repeat_private.svg?react';
import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions';
import { WithRouterPropTypes } from 'mastodon/utils/react_router';
diff --git a/app/javascript/mastodon/features/status/components/card.jsx b/app/javascript/mastodon/features/status/components/card.jsx
index d7d688952d6405b898a1213343f53a6e09fb30e6..9497acffac933282bb50e90c55ca4c86d4078845 100644
--- a/app/javascript/mastodon/features/status/components/card.jsx
+++ b/app/javascript/mastodon/features/status/components/card.jsx
@@ -10,9 +10,9 @@ import classNames from 'classnames';
import Immutable from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
-import { ReactComponent as DescriptionIcon } from '@material-symbols/svg-600/outlined/description-fill.svg';
-import { ReactComponent as OpenInNewIcon } from '@material-symbols/svg-600/outlined/open_in_new.svg';
-import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow-fill.svg';
+import DescriptionIcon from '@material-symbols/svg-600/outlined/description-fill.svg?react';
+import OpenInNewIcon from '@material-symbols/svg-600/outlined/open_in_new.svg?react';
+import PlayArrowIcon from '@material-symbols/svg-600/outlined/play_arrow-fill.svg?react';
import { Blurhash } from 'mastodon/components/blurhash';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.jsx b/app/javascript/mastodon/features/status/components/detailed_status.jsx
index d8d9559127d2511fd70a8e772330aa81f0d180ce..03bb6a50bc502df613aa136f9094d0b6dec34e12 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.jsx
+++ b/app/javascript/mastodon/features/status/components/detailed_status.jsx
@@ -8,9 +8,9 @@ import { Link, withRouter } from 'react-router-dom';
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 RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
+import AlternateEmailIcon from '@material-symbols/svg-600/outlined/alternate_email.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star-fill.svg?react';
import { AnimatedNumber } from 'mastodon/components/animated_number';
import EditedTimestamp from 'mastodon/components/edited_timestamp';
diff --git a/app/javascript/mastodon/features/status/index.jsx b/app/javascript/mastodon/features/status/index.jsx
index 383248976481879e9b8aadf1574e32bd3452a1ad..d4ab3a5dcd9a7e0e08c8fb0a24e97cd2183a8019 100644
--- a/app/javascript/mastodon/features/status/index.jsx
+++ b/app/javascript/mastodon/features/status/index.jsx
@@ -12,8 +12,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
-import { ReactComponent as VisibilityIcon } from '@material-symbols/svg-600/outlined/visibility.svg';
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
+import VisibilityIcon from '@material-symbols/svg-600/outlined/visibility.svg?react';
+import VisibilityOffIcon from '@material-symbols/svg-600/outlined/visibility_off.svg?react';
import { HotKeys } from 'react-hotkeys';
import { Icon } from 'mastodon/components/icon';
diff --git a/app/javascript/mastodon/features/subscribed_languages_modal/index.jsx b/app/javascript/mastodon/features/subscribed_languages_modal/index.jsx
index ac34f7986cb4c62c99efb0bbc6ca9ff1cce0bc71..f69092541887209fd8081f75594d926df87365fe 100644
--- a/app/javascript/mastodon/features/subscribed_languages_modal/index.jsx
+++ b/app/javascript/mastodon/features/subscribed_languages_modal/index.jsx
@@ -8,7 +8,7 @@ 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-symbols/svg-600/outlined/close.svg?react';
import { followAccount } from 'mastodon/actions/accounts';
import { Button } from 'mastodon/components/button';
diff --git a/app/javascript/mastodon/features/ui/components/boost_modal.jsx b/app/javascript/mastodon/features/ui/components/boost_modal.jsx
index c6fa8ce363c40fc921b1bf0a4655303953bbca30..851acbb7197325ec071ced05af9dbd472468233c 100644
--- a/app/javascript/mastodon/features/ui/components/boost_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/boost_modal.jsx
@@ -9,7 +9,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
import { changeBoostPrivacy } from 'mastodon/actions/boosts';
import AttachmentList from 'mastodon/components/attachment_list';
diff --git a/app/javascript/mastodon/features/ui/components/bundle_modal_error.jsx b/app/javascript/mastodon/features/ui/components/bundle_modal_error.jsx
index 44165f14177422c12bd0fb914e8d616b14568c4e..31c4ce0e97731f9429a3722f984c821d0ec78437 100644
--- a/app/javascript/mastodon/features/ui/components/bundle_modal_error.jsx
+++ b/app/javascript/mastodon/features/ui/components/bundle_modal_error.jsx
@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
-import { ReactComponent as RefreshIcon } from '@material-symbols/svg-600/outlined/refresh.svg';
+import RefreshIcon from '@material-symbols/svg-600/outlined/refresh.svg?react';
import { IconButton } from '../../../components/icon_button';
diff --git a/app/javascript/mastodon/features/ui/components/compare_history_modal.jsx b/app/javascript/mastodon/features/ui/components/compare_history_modal.jsx
index 413c5069f16b0ee7ad175327c066c7ff23e51f8d..7807a103eee2893d55b0d536de77311e0f1a7ede 100644
--- a/app/javascript/mastodon/features/ui/components/compare_history_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/compare_history_modal.jsx
@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
import escapeTextContentForBrowser from 'escape-html';
import { closeModal } from 'mastodon/actions/modal';
diff --git a/app/javascript/mastodon/features/ui/components/embed_modal.jsx b/app/javascript/mastodon/features/ui/components/embed_modal.jsx
index e5c0b5cae9fc7b02e39faf31586f0b7b7fb0504f..60d04d23784f86c94987f730b43587b0238e6a46 100644
--- a/app/javascript/mastodon/features/ui/components/embed_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/embed_modal.jsx
@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
import api from 'mastodon/api';
import { IconButton } from 'mastodon/components/icon_button';
diff --git a/app/javascript/mastodon/features/ui/components/filter_modal.jsx b/app/javascript/mastodon/features/ui/components/filter_modal.jsx
index d90edddec4d5a67c312883797ac631745064496c..3f3855d9f14d2711335c1d8dcf1b2dcf8904ab7f 100644
--- a/app/javascript/mastodon/features/ui/components/filter_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/filter_modal.jsx
@@ -5,7 +5,7 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
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-symbols/svg-600/outlined/close.svg?react';
import { fetchFilters, createFilter, createFilterStatus } from 'mastodon/actions/filters';
import { fetchStatus } from 'mastodon/actions/statuses';
diff --git a/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx b/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx
index 91dca26718ac18c5b176148a32868baa12ff054a..f2998f217a89e5b90f528df5f556df9a00b5bcac 100644
--- a/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx
@@ -9,7 +9,7 @@ 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-symbols/svg-600/outlined/close.svg?react';
import Textarea from 'react-textarea-autosize';
import { length } from 'stringz';
// eslint-disable-next-line import/extensions
diff --git a/app/javascript/mastodon/features/ui/components/follow_requests_column_link.jsx b/app/javascript/mastodon/features/ui/components/follow_requests_column_link.jsx
index 314b2a2652f6de4f9ff226f41aa8f67d73395915..d40c67a752430252018ce8e037acc67dc2feb4f7 100644
--- a/app/javascript/mastodon/features/ui/components/follow_requests_column_link.jsx
+++ b/app/javascript/mastodon/features/ui/components/follow_requests_column_link.jsx
@@ -6,7 +6,7 @@ import { injectIntl, defineMessages } from 'react-intl';
import { List as ImmutableList } from 'immutable';
import { connect } from 'react-redux';
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
+import PersonAddIcon from '@material-symbols/svg-600/outlined/person_add.svg?react';
import { fetchFollowRequests } from 'mastodon/actions/accounts';
import { IconWithBadge } from 'mastodon/components/icon_with_badge';
diff --git a/app/javascript/mastodon/features/ui/components/header.jsx b/app/javascript/mastodon/features/ui/components/header.jsx
index 150647ffb3c796cab944e19c282e4e760a437066..6ece50184af0ebe776d97d0f393173be2984dedb 100644
--- a/app/javascript/mastodon/features/ui/components/header.jsx
+++ b/app/javascript/mastodon/features/ui/components/header.jsx
@@ -7,7 +7,7 @@ import { Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
+import SearchIcon from '@material-symbols/svg-600/outlined/search.svg?react';
import { openModal } from 'mastodon/actions/modal';
import { fetchServer } from 'mastodon/actions/server';
diff --git a/app/javascript/mastodon/features/ui/components/image_modal.jsx b/app/javascript/mastodon/features/ui/components/image_modal.jsx
index c534bf16362ba77b0ad080b0f920b788e9fd449a..44fb172ad273ae2b2066e9161a4f7b45658023ff 100644
--- a/app/javascript/mastodon/features/ui/components/image_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/image_modal.jsx
@@ -5,7 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
import classNames from 'classnames';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
import { IconButton } from 'mastodon/components/icon_button';
diff --git a/app/javascript/mastodon/features/ui/components/list_panel.jsx b/app/javascript/mastodon/features/ui/components/list_panel.jsx
index ff600730a0e04b30e70c50efa1df13cd49b07b69..b574668b2036bbc2ed0e11fdd4b003e0942eb931 100644
--- a/app/javascript/mastodon/features/ui/components/list_panel.jsx
+++ b/app/javascript/mastodon/features/ui/components/list_panel.jsx
@@ -5,7 +5,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 '@material-symbols/svg-600/outlined/list_alt.svg?react';
import { fetchLists } from 'mastodon/actions/lists';
diff --git a/app/javascript/mastodon/features/ui/components/media_modal.jsx b/app/javascript/mastodon/features/ui/components/media_modal.jsx
index 8c06a965311dddb87d836aaf6f507f7b75b2f1e2..95d8ae5df11d1815d321e614a0de648a07fca7cf 100644
--- a/app/javascript/mastodon/features/ui/components/media_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/media_modal.jsx
@@ -7,9 +7,9 @@ import classNames from 'classnames';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
-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 { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import ChevronLeftIcon from '@material-symbols/svg-600/outlined/chevron_left.svg?react';
+import ChevronRightIcon from '@material-symbols/svg-600/outlined/chevron_right.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
import ReactSwipeableViews from 'react-swipeable-views';
import { getAverageFromBlurhash } from 'mastodon/blurhash';
diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.jsx b/app/javascript/mastodon/features/ui/components/navigation_panel.jsx
index d1b2a0910b3e2fa6843869dfeddd287cea378c88..e5b762807d1540df7e449c3811918924fe092799 100644
--- a/app/javascript/mastodon/features/ui/components/navigation_panel.jsx
+++ b/app/javascript/mastodon/features/ui/components/navigation_panel.jsx
@@ -5,16 +5,16 @@ import { defineMessages, injectIntl } from 'react-intl';
import { Link } from 'react-router-dom';
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
-import { ReactComponent as BookmarksIcon } from '@material-symbols/svg-600/outlined/bookmarks-fill.svg';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.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 { ReactComponent as SettingsIcon } from '@material-symbols/svg-600/outlined/settings-fill.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import AlternateEmailIcon from '@material-symbols/svg-600/outlined/alternate_email.svg?react';
+import BookmarksIcon from '@material-symbols/svg-600/outlined/bookmarks-fill.svg?react';
+import HomeIcon from '@material-symbols/svg-600/outlined/home-fill.svg?react';
+import ListAltIcon from '@material-symbols/svg-600/outlined/list_alt.svg?react';
+import MoreHorizIcon from '@material-symbols/svg-600/outlined/more_horiz.svg?react';
+import PublicIcon from '@material-symbols/svg-600/outlined/public.svg?react';
+import SearchIcon from '@material-symbols/svg-600/outlined/search.svg?react';
+import SettingsIcon from '@material-symbols/svg-600/outlined/settings-fill.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star-fill.svg?react';
+import TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
import { WordmarkLogo } from 'mastodon/components/logo';
import { NavigationPortal } from 'mastodon/components/navigation_portal';
diff --git a/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js b/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
index b3e9950e93ffbd38a2935172ede68be5c530f6d7..435bebd0b1f8e9e6188158e4b95926c5c46d7082 100644
--- a/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
+++ b/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
@@ -1,6 +1,6 @@
import { connect } from 'react-redux';
-import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg';
+import NotificationsIcon from '@material-symbols/svg-600/outlined/notifications-fill.svg?react';
import { IconWithBadge } from 'mastodon/components/icon_with_badge';
diff --git a/app/javascript/mastodon/features/ui/components/report_modal.jsx b/app/javascript/mastodon/features/ui/components/report_modal.jsx
index 3fd8ff127d8789207df394f73f913d6f7840f04e..27207f2fbf734415d155e46edb72a0769b2a2089 100644
--- a/app/javascript/mastodon/features/ui/components/report_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/report_modal.jsx
@@ -7,7 +7,7 @@ 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-symbols/svg-600/outlined/close.svg?react';
import { submitReport } from 'mastodon/actions/reports';
import { fetchServer } from 'mastodon/actions/server';
diff --git a/app/javascript/mastodon/features/ui/components/zoomable_image.jsx b/app/javascript/mastodon/features/ui/components/zoomable_image.jsx
index 5e71da9d9687be24f8610f3a20797be6f3631221..7d4f1f55dd570ccabd3df61b4c50cdf4592718f7 100644
--- a/app/javascript/mastodon/features/ui/components/zoomable_image.jsx
+++ b/app/javascript/mastodon/features/ui/components/zoomable_image.jsx
@@ -3,8 +3,8 @@ import { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
-import { ReactComponent as FullscreenExitIcon } from '@material-symbols/svg-600/outlined/fullscreen_exit.svg';
-import { ReactComponent as RectangleIcon } from '@material-symbols/svg-600/outlined/rectangle.svg';
+import FullscreenExitIcon from '@material-symbols/svg-600/outlined/fullscreen_exit.svg?react';
+import RectangleIcon from '@material-symbols/svg-600/outlined/rectangle.svg?react';
import { IconButton } from 'mastodon/components/icon_button';
diff --git a/app/javascript/mastodon/features/video/index.jsx b/app/javascript/mastodon/features/video/index.jsx
index e908715e911cc5f794169d73482fa756d64b3bd4..73034bbf6687e2083388351364c21d9ccc902a1d 100644
--- a/app/javascript/mastodon/features/video/index.jsx
+++ b/app/javascript/mastodon/features/video/index.jsx
@@ -7,14 +7,14 @@ import classNames from 'classnames';
import { is } from 'immutable';
-import { ReactComponent as FullscreenIcon } from '@material-symbols/svg-600/outlined/fullscreen.svg';
-import { ReactComponent as FullscreenExitIcon } from '@material-symbols/svg-600/outlined/fullscreen_exit.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 RectangleIcon } from '@material-symbols/svg-600/outlined/rectangle.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 FullscreenIcon from '@material-symbols/svg-600/outlined/fullscreen.svg?react';
+import FullscreenExitIcon from '@material-symbols/svg-600/outlined/fullscreen_exit.svg?react';
+import PauseIcon from '@material-symbols/svg-600/outlined/pause.svg?react';
+import PlayArrowIcon from '@material-symbols/svg-600/outlined/play_arrow-fill.svg?react';
+import RectangleIcon from '@material-symbols/svg-600/outlined/rectangle.svg?react';
+import VisibilityOffIcon from '@material-symbols/svg-600/outlined/visibility_off.svg?react';
+import VolumeOffIcon from '@material-symbols/svg-600/outlined/volume_off-fill.svg?react';
+import VolumeUpIcon from '@material-symbols/svg-600/outlined/volume_up-fill.svg?react';
import { throttle } from 'lodash';
import { Blurhash } from 'mastodon/components/blurhash';
diff --git a/app/javascript/types/image.d.ts b/app/javascript/types/image.d.ts
index 07d19295556b47627fcc6c54cf5a9ba3d38451f4..8a08eca9f6eaa0e084e87815613b67688d11ff4a 100644
--- a/app/javascript/types/image.d.ts
+++ b/app/javascript/types/image.d.ts
@@ -20,16 +20,20 @@ declare module '*.png' {
}
declare module '*.svg' {
+ const path: string;
+ export default path;
+}
+
+declare module '*.svg?react' {
import type React from 'react';
interface SVGPropsWithTitle extends React.SVGProps<SVGSVGElement> {
title?: string;
}
- export const ReactComponent: React.FC<SVGPropsWithTitle>;
+ const ReactComponent: React.FC<SVGPropsWithTitle>;
- const path: string;
- export default path;
+ export default ReactComponent;
}
declare module '*.webp' {
diff --git a/config/webpack/rules/file.js b/config/webpack/rules/file.js
index 25cda0eae5a4a1ccfe02e54c45807e084bb5b2eb..fd9b14cad6bab447b37a9bf30a007fcbc382e63a 100644
--- a/config/webpack/rules/file.js
+++ b/config/webpack/rules/file.js
@@ -4,6 +4,7 @@ const { settings } = require('../configuration');
module.exports = {
test: new RegExp(`(${settings.static_assets_extensions.join('|')})$`, 'i'),
+ exclude: [/node_modules\/@material-symbols/, /svg-icons/],
use: [
{
loader: 'file-loader',
diff --git a/jest.config.js b/jest.config.js
index b4a34a5abdad48a95d618173ff28533b0a27f4c7..7070704c33cdb218301ac9ca9ab8e6a1d9164509 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -21,7 +21,7 @@ const config = {
coverageDirectory: '<rootDir>/coverage',
moduleDirectories: ['node_modules', '<rootDir>/app/javascript'],
moduleNameMapper: {
- '\\.svg$': '<rootDir>/app/javascript/__mocks__/svg.js',
+ '\\.svg\\?react$': '<rootDir>/app/javascript/__mocks__/svg.js',
},
};