Merge branch 'glitch-soc' into develop

.bundler-audit.yml

@@ -0,0 +1,6 @@
+---
+ignore:
+  # devise-two-factor advisory about brute-forcing TOTP
+  # We have rate-limits on authentication endpoints in place (including second
+  # factor verification) since Mastodon v3.2.0
+  - CVE-2024-0227

.devcontainer/docker-compose.yml

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

.rubocop.yml

@@ -103,9 +103,16 @@ Rails/Exit:
     - 'config/boot.rb'
     - 'lib/mastodon/cli/*.rb'
 
-Rails/SkipsModelValidations:
+# Reason: Conflicts with `Lint/UselessMethodDefinition` for inherited controller actions
+# https://docs.rubocop.org/rubocop-rails/cops_rails.html#railslexicallyscopedactionfilter
+Rails/LexicallyScopedActionFilter:
   Exclude:
-    - 'db/*migrate/**/*'
+    - 'app/controllers/auth/*'
+
+# Reason: There are appropriate times to use these features
+# https://docs.rubocop.org/rubocop-rails/cops_rails.html#railsskipsmodelvalidations
+Rails/SkipsModelValidations:
+  Enabled: false
 
 # Reason: We want to preserve the ability to migrate from arbitrary old versions,
 # and cannot guarantee that every installation has run every migration as they upgrade.

.rubocop_todo.yml

@@ -64,13 +64,6 @@ Rails/HasAndBelongsToMany:
     - 'app/models/status.rb'
     - 'app/models/tag.rb'
 
-# Configuration parameters: Include.
-# Include: app/controllers/**/*.rb, app/mailers/**/*.rb
-Rails/LexicallyScopedActionFilter:
-  Exclude:
-    - 'app/controllers/auth/passwords_controller.rb'
-    - 'app/controllers/auth/registrations_controller.rb'
-
 Rails/OutputSafety:
   Exclude:
     - 'config/initializers/simple_form.rb'
@@ -87,41 +80,6 @@ Rails/RakeEnvironment:
     - 'lib/tasks/repo.rake'
     - 'lib/tasks/statistics.rake'
 
-# Configuration parameters: ForbiddenMethods, AllowedMethods.
-# ForbiddenMethods: decrement!, decrement_counter, increment!, increment_counter, insert, insert!, insert_all, insert_all!, toggle!, touch, touch_all, update_all, update_attribute, update_column, update_columns, update_counters, upsert, upsert_all
-Rails/SkipsModelValidations:
-  Exclude:
-    - 'app/controllers/admin/invites_controller.rb'
-    - 'app/controllers/concerns/session_tracking_concern.rb'
-    - 'app/models/concerns/account/merging.rb'
-    - 'app/models/concerns/expireable.rb'
-    - 'app/models/status.rb'
-    - 'app/models/trends/links.rb'
-    - 'app/models/trends/preview_card_batch.rb'
-    - 'app/models/trends/preview_card_provider_batch.rb'
-    - 'app/models/trends/status_batch.rb'
-    - 'app/models/trends/statuses.rb'
-    - 'app/models/trends/tag_batch.rb'
-    - 'app/models/trends/tags.rb'
-    - 'app/models/user.rb'
-    - 'app/services/activitypub/process_status_update_service.rb'
-    - 'app/services/approve_appeal_service.rb'
-    - 'app/services/block_domain_service.rb'
-    - 'app/services/delete_account_service.rb'
-    - 'app/services/process_mentions_service.rb'
-    - 'app/services/unallow_domain_service.rb'
-    - 'app/services/unblock_domain_service.rb'
-    - 'app/services/update_status_service.rb'
-    - 'app/workers/activitypub/post_upgrade_worker.rb'
-    - 'app/workers/move_worker.rb'
-    - 'app/workers/scheduler/ip_cleanup_scheduler.rb'
-    - 'app/workers/scheduler/scheduled_statuses_scheduler.rb'
-    - 'lib/mastodon/cli/accounts.rb'
-    - 'lib/mastodon/cli/maintenance.rb'
-    - 'spec/lib/activitypub/activity/follow_spec.rb'
-    - 'spec/services/follow_service_spec.rb'
-    - 'spec/services/update_account_service_spec.rb'
-
 # Configuration parameters: Include.
 # Include: app/models/**/*.rb
 Rails/UniqueValidationWithoutIndex:

Gemfile

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

Gemfile.lock

@@ -7,16 +7,6 @@ GIT
       hkdf (~> 0.2)
       jwt (~> 2.0)
 
-GIT
-  remote: https://github.com/dlindahl/omniauth-cas.git
-  revision: 9d9d3a91b316c55d49ab6e621977f2067010c5bf
-  ref: 9d9d3a91b316c55d49ab6e621977f2067010c5bf
-  specs:
-    omniauth-cas (3.0.0)
-      addressable (~> 2.8)
-      nokogiri (~> 1.12)
-      omniauth (~> 2.1)
-
 GIT
   remote: https://github.com/jhawthorn/nsa.git
   revision: e020fcc3a54d993ab45b7194d89ab720296c111b
@@ -165,7 +155,7 @@ GEM
     binding_of_caller (1.0.0)
       debug_inspector (>= 0.0.1)
     blurhash (0.1.7)
-    bootsnap (1.17.0)
+    bootsnap (1.17.1)
       msgpack (~> 1.2)
     brakeman (6.1.1)
       racc
@@ -267,7 +257,7 @@ GEM
       tzinfo
     excon (0.109.0)
     fabrication (2.31.0)
-    faker (3.2.2)
+    faker (3.2.3)
       i18n (>= 1.8.11, < 2)
     faraday (1.10.3)
       faraday-em_http (~> 1.0)
@@ -484,6 +474,10 @@ GEM
       hashie (>= 3.4.6)
       rack (>= 2.2.3)
       rack-protection
+    omniauth-cas (3.0.0.beta.1)
+      addressable (~> 2.8)
+      nokogiri (~> 1.12)
+      omniauth (~> 2.1)
     omniauth-rails_csrf_protection (1.0.1)
       actionpack (>= 4.2)
       omniauth (~> 2.0)
@@ -736,7 +730,7 @@ GEM
     simplecov-lcov (0.8.0)
     simplecov_json_formatter (0.1.4)
     smart_properties (1.17.0)
-    stackprof (0.2.25)
+    stackprof (0.2.26)
     statsd-ruby (1.5.0)
     stoplight (3.0.2)
       redlock (~> 1.0)
@@ -894,7 +888,7 @@ DEPENDENCIES
   nsa!
   oj (~> 3.14)
   omniauth (~> 2.0)
-  omniauth-cas!
+  omniauth-cas (~> 3.0.0.beta.1)
   omniauth-rails_csrf_protection (~> 1.0)
   omniauth-saml (~> 2.0)
   omniauth_openid_connect (~> 0.6.1)

app/controllers/admin/confirmations_controller.rb

@@ -7,7 +7,7 @@ module Admin
 
     def create
       authorize @user, :confirm?
-      @user.confirm!
+      @user.mark_email_as_confirmed!
       log_action :confirm, @user
       redirect_to admin_accounts_path
     end

app/controllers/api/v1/markers_controller.rb

@@ -19,7 +19,7 @@ class Api::V1::MarkersController < Api::BaseController
       @markers = {}
 
       resource_params.each_pair do |timeline, timeline_params|
-        @markers[timeline] = current_user.markers.find_or_initialize_by(timeline: timeline)
+        @markers[timeline] = current_user.markers.find_or_create_by(timeline: timeline)
         @markers[timeline].update!(timeline_params)
       end
     end

app/controllers/custom_css_controller.rb

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

app/javascript/__mocks__/svg.js

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

app/javascript/core/inert.js

@@ -0,0 +1,4 @@
+/* Placeholder file to have `inert.scss` compiled by Webpack
+   This is used by the `wicg-inert` polyfill */
+
+import '../styles/inert.scss';

app/javascript/core/theme.yml

@@ -10,6 +10,9 @@ pack:
   embed: embed.js
   error:
   home:
+  inert:
+    filename: inert.js
+    stylesheet: true
   mailer:
     filename: mailer.js
     stylesheet: true

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

@@ -17,7 +17,7 @@ import { Avatar } from './avatar';
 import { Button } from './button';
 import { FollowersCounter } from './counters';
 import { DisplayName } from './display_name';
-import Permalink from './permalink';
+import { Permalink } from './permalink';
 import { RelativeTimestamp } from './relative_timestamp';
 
 const messages = defineMessages({

app/javascript/flavours/glitch/components/admin/Trends.jsx

@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 
 import api from 'flavours/glitch/api';
-import Hashtag from 'flavours/glitch/components/hashtag';
+import { Hashtag } from 'flavours/glitch/components/hashtag';
 
 export default class Trends extends PureComponent {
 

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

@@ -7,10 +7,10 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as LinkIcon } from '@material-symbols/svg-600/outlined/link.svg';
+import LinkIcon from '@/material-icons/400-24px/link.svg?react';
-
 import { Icon }  from 'flavours/glitch/components/icon';
 
+
 const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
 
 export default class AttachmentList extends ImmutablePureComponent {

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

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

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

@@ -2,8 +2,7 @@ import { useCallback } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg';
+import ArrowBackIcon from '@/material-icons/400-24px/arrow_back.svg?react';
-
 import { Icon } from 'flavours/glitch/components/icon';
 import { ButtonInTabsBar } from 'flavours/glitch/features/ui/util/columns_context';
 

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

@@ -6,17 +6,17 @@ import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import classNames from 'classnames';
 import { withRouter } from 'react-router-dom';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
+import AddIcon from '@/material-icons/400-24px/add.svg?react';
-import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg';
+import ArrowBackIcon from '@/material-icons/400-24px/arrow_back.svg?react';
-import { ReactComponent as ChevronLeftIcon } from '@material-symbols/svg-600/outlined/chevron_left.svg';
+import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
-import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
+import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import { ReactComponent as TuneIcon } from '@material-symbols/svg-600/outlined/tune.svg';
+import TuneIcon from '@/material-icons/400-24px/tune.svg?react';
-
 import { Icon }  from 'flavours/glitch/components/icon';
 import { ButtonInTabsBar, useColumnsContext } from 'flavours/glitch/features/ui/util/columns_context';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
+
 import { useAppHistory } from './router';
 
 const messages = defineMessages({

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

@@ -8,8 +8,7 @@ import { useCallback, useState, useEffect } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-
 import { changeSetting } from 'flavours/glitch/actions/settings';
 import { bannerSettings } from 'flavours/glitch/settings';
 import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';

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

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

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

@@ -6,10 +6,10 @@ import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Overlay from 'react-overlays/Overlay';
 
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import { CircularProgress } from 'flavours/glitch/components/circular_progress';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 

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

@@ -5,8 +5,8 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as ArrowDropDownIcon } from '@material-symbols/svg-600/outlined/arrow_drop_down.svg';
 
+import ArrowDropDownIcon from '@/material-icons/400-24px/arrow_drop_down.svg?react';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { Icon }  from 'flavours/glitch/components/icon';
 import InlineAccount from 'flavours/glitch/components/inline_account';

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

@@ -1,123 +0,0 @@
-// @ts-check
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-import { Sparklines, SparklinesCurve } from 'react-sparklines';
-
-import { ShortNumber } from 'flavours/glitch/components/short_number';
-import { Skeleton } from 'flavours/glitch/components/skeleton';
-
-import Permalink from './permalink';
-
-class SilentErrorBoundary extends Component {
-
-  static propTypes = {
-    children: PropTypes.node,
-  };
-
-  state = {
-    error: false,
-  };
-
-  componentDidCatch() {
-    this.setState({ error: true });
-  }
-
-  render() {
-    if (this.state.error) {
-      return null;
-    }
-
-    return this.props.children;
-  }
-
-}
-
-/**
- * Used to render counter of how much people are talking about hashtag
- * @type {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
- */
-export const accountsCountRenderer = (displayNumber, pluralReady) => (
-  <FormattedMessage
-    id='trends.counter_by_accounts'
-    defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} in the past {days, plural, one {day} other {# days}}'
-    values={{
-      count: pluralReady,
-      counter: <strong>{displayNumber}</strong>,
-      days: 2,
-    }}
-  />
-);
-
-// @ts-expect-error
-export const ImmutableHashtag = ({ hashtag }) => (
-  <Hashtag
-    name={hashtag.get('name')}
-    href={hashtag.get('url')}
-    to={`/tags/${hashtag.get('name')}`}
-    people={hashtag.getIn(['history', 0, 'accounts']) * 1 + hashtag.getIn(['history', 1, 'accounts']) * 1}
-    // @ts-expect-error
-    history={hashtag.get('history').reverse().map((day) => day.get('uses')).toArray()}
-  />
-);
-
-ImmutableHashtag.propTypes = {
-  hashtag: ImmutablePropTypes.map.isRequired,
-};
-
-// @ts-expect-error
-const Hashtag = ({ name, href, to, people, uses, history, className, description, withGraph }) => (
-  <div className={classNames('trends__item', className)}>
-    <div className='trends__item__name'>
-      <Permalink href={href} to={to}>
-        {name ? <>#<span>{name}</span></> : <Skeleton width={50} />}
-      </Permalink>
-
-      {description ? (
-        <span>{description}</span>
-      ) : (
-        typeof people !== 'undefined' ? <ShortNumber value={people} renderer={accountsCountRenderer} /> : <Skeleton width={100} />
-      )}
-    </div>
-
-    {typeof uses !== 'undefined' && (
-      <div className='trends__item__current'>
-        <ShortNumber value={uses} />
-      </div>
-    )}
-
-    {withGraph && (
-      <div className='trends__item__sparkline'>
-        <SilentErrorBoundary>
-          <Sparklines width={50} height={28} data={history ? history : Array.from(Array(7)).map(() => 0)}>
-            <SparklinesCurve style={{ fill: 'none' }} />
-          </Sparklines>
-        </SilentErrorBoundary>
-      </div>
-    )}
-  </div>
-);
-
-Hashtag.propTypes = {
-  name: PropTypes.string,
-  href: PropTypes.string,
-  to: PropTypes.string,
-  people: PropTypes.number,
-  description: PropTypes.node,
-  uses: PropTypes.number,
-  history: PropTypes.arrayOf(PropTypes.number),
-  className: PropTypes.string,
-  withGraph: PropTypes.bool,
-};
-
-Hashtag.defaultProps = {
-  withGraph: true,
-};
-
-export default Hashtag;

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

@@ -0,0 +1,149 @@
+import type { JSX } from 'react';
+import { Component } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import type Immutable from 'immutable';
+
+import { Sparklines, SparklinesCurve } from 'react-sparklines';
+
+import { ShortNumber } from 'flavours/glitch/components/short_number';
+import { Skeleton } from 'flavours/glitch/components/skeleton';
+
+import { Permalink } from './permalink';
+
+interface SilentErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+class SilentErrorBoundary extends Component<SilentErrorBoundaryProps> {
+  state = {
+    error: false,
+  };
+
+  componentDidCatch() {
+    this.setState({ error: true });
+  }
+
+  render() {
+    if (this.state.error) {
+      return null;
+    }
+
+    return this.props.children;
+  }
+}
+
+/**
+ * Used to render counter of how much people are talking about hashtag
+ * @param displayNumber Counter number to display
+ * @param pluralReady Whether the count is plural
+ * @returns Formatted counter of how much people are talking about hashtag
+ */
+export const accountsCountRenderer = (
+  displayNumber: JSX.Element,
+  pluralReady: number,
+) => (
+  <FormattedMessage
+    id='trends.counter_by_accounts'
+    defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} in the past {days, plural, one {day} other {# days}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+      days: 2,
+    }}
+  />
+);
+
+interface ImmutableHashtagProps {
+  hashtag: Immutable.Map<string, unknown>;
+}
+
+export const ImmutableHashtag = ({ hashtag }: ImmutableHashtagProps) => (
+  <Hashtag
+    name={hashtag.get('name') as string}
+    href={hashtag.get('url') as string}
+    to={`/tags/${hashtag.get('name') as string}`}
+    people={
+      (hashtag.getIn(['history', 0, 'accounts']) as number) * 1 +
+      (hashtag.getIn(['history', 1, 'accounts']) as number) * 1
+    }
+    history={(
+      hashtag.get('history') as Immutable.Collection.Indexed<
+        Immutable.Map<string, number>
+      >
+    )
+      .reverse()
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      .map((day) => day.get('uses')!)
+      .toArray()}
+  />
+);
+
+export interface HashtagProps {
+  className?: string;
+  description?: React.ReactNode;
+  history?: number[];
+  href: string;
+  name: string;
+  people: number;
+  to: string;
+  uses?: number;
+  withGraph?: boolean;
+}
+
+export const Hashtag: React.FC<HashtagProps> = ({
+  name,
+  href,
+  to,
+  people,
+  uses,
+  history,
+  className,
+  description,
+  withGraph = true,
+}) => (
+  <div className={classNames('trends__item', className)}>
+    <div className='trends__item__name'>
+      <Permalink href={href} to={to}>
+        {name ? (
+          <>
+            #<span>{name}</span>
+          </>
+        ) : (
+          <Skeleton width={50} />
+        )}
+      </Permalink>
+
+      {description ? (
+        <span>{description}</span>
+      ) : typeof people !== 'undefined' ? (
+        <ShortNumber value={people} renderer={accountsCountRenderer} />
+      ) : (
+        <Skeleton width={100} />
+      )}
+    </div>
+
+    {typeof uses !== 'undefined' && (
+      <div className='trends__item__current'>
+        <ShortNumber value={uses} />
+      </div>
+    )}
+
+    {withGraph && (
+      <div className='trends__item__sparkline'>
+        <SilentErrorBoundary>
+          <Sparklines
+            width={50}
+            height={28}
+            data={history ? history : Array.from(Array(7)).map(() => 0)}
+          >
+            <SparklinesCurve style={{ fill: 'none' }} />
+          </Sparklines>
+        </SilentErrorBoundary>
+      </div>
+    )}
+  </div>
+);

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

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 
-import { ReactComponent as CheckBoxOutlineBlankIcon } from '@material-symbols/svg-600/outlined/check_box_outline_blank.svg';
+import CheckBoxOutlineBlankIcon from '@/material-icons/400-24px/check_box_outline_blank.svg?react';
+import { isProduction } from 'flavours/glitch/utils/environment';
 
 interface SVGPropsWithTitle extends React.SVGProps<SVGSVGElement> {
   title?: string;
@@ -24,7 +25,7 @@ export const Icon: React.FC<Props> = ({
 }) => {
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (!IconComponent) {
-    if (process.env.NODE_ENV !== 'production') {
+    if (!isProduction()) {
       throw new Error(
         `<Icon id="${id}" className="${className}"> is missing an "icon" prop.`,
       );

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

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

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

@@ -1,4 +1,4 @@
-import logo from 'mastodon/../images/logo.svg';
+import logo from '@/images/logo.svg';
 
 export const WordmarkLogo = () => (
   <svg viewBox='0 0 261 66' className='logo logo--wordmark' role='img'>

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

@@ -8,9 +8,9 @@ import classNames from 'classnames';
 import { is } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
 import { debounce } from 'lodash';
 
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
 import { Blurhash } from 'flavours/glitch/components/blurhash';
 
 import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';

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

@@ -12,10 +12,10 @@ import classNames from 'classnames';
 
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as DeleteIcon } from '@material-symbols/svg-600/outlined/delete.svg';
+import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
-
 import { Icon } from 'flavours/glitch/components/icon';
 
+
 const messages = defineMessages({
   btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' },
   btnNone : { id: 'notification_purge.btn_none', defaultMessage: 'Select\nnone' },

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

@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { withOptionalRouter, WithOptionalRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
-class Permalink extends PureComponent {
-
-  static propTypes = {
-    className: PropTypes.string,
-    href: PropTypes.string.isRequired,
-    to: PropTypes.string.isRequired,
-    children: PropTypes.node,
-    onInterceptClick: PropTypes.func,
-    ...WithOptionalRouterPropTypes,
-  };
-
-  handleClick = (e) => {
-    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      if (this.props.onInterceptClick && this.props.onInterceptClick()) {
-        e.preventDefault();
-        return;
-      }
-
-      if (this.props.history) {
-        e.preventDefault();
-        this.props.history.push(this.props.to);
-      }
-    }
-  };
-
-  render () {
-    const {
-      children,
-      className,
-      href,
-      to,
-      onInterceptClick,
-      ...other
-    } = this.props;
-
-    return (
-      <a target='_blank' href={href} onClick={this.handleClick} {...other} className={`permalink${className ? ' ' + className : ''}`}>
-        {children}
-      </a>
-    );
-  }
-
-}
-
-export default withOptionalRouter(Permalink);

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

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+
+import { useAppHistory } from './router';
+
+interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  to: string;
+}
+
+export const Permalink: React.FC<Props> = ({
+  className,
+  href,
+  to,
+  children,
+  ...props
+}) => {
+  const history = useAppHistory();
+
+  const handleClick = useCallback<React.MouseEventHandler<HTMLAnchorElement>>(
+    (e) => {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- history can actually be undefined as the component can be mounted outside a router context
+      if (e.button === 0 && !(e.ctrlKey || e.metaKey) && history) {
+        e.preventDefault();
+        history.push(to);
+      }
+    },
+    [history, to],
+  );
+
+  return (
+    <a
+      target='_blank'
+      rel='noreferrer'
+      href={href}
+      onClick={handleClick}
+      className={`permalink${className ? ' ' + className : ''}`}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+};

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

@@ -5,8 +5,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as CancelPresentationIcon } from '@material-symbols/svg-600/outlined/cancel_presentation.svg';
 
+import CancelPresentationIcon from '@/material-icons/400-24px/cancel_presentation.svg?react';
 import { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
 import { Icon }  from 'flavours/glitch/components/icon';
 

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

@@ -7,10 +7,10 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
 import escapeTextContentForBrowser from 'escape-html';
 import spring from 'react-motion/lib/spring';
 
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 import emojify from 'flavours/glitch/features/emoji/emoji';
 import Motion from 'flavours/glitch/features/ui/util/optional_motion';

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

@@ -11,6 +11,7 @@ import type {
 import { createBrowserHistory } from 'history';
 
 import { layoutFromWindow } from 'flavours/glitch/is_mobile';
+import { isDevelopment } from 'flavours/glitch/utils/environment';
 
 interface MastodonLocationState {
   fromMastodon?: boolean;
@@ -40,7 +41,7 @@ function normalizePath(
   } else if (
     location.state !== undefined &&
     state !== undefined &&
-    process.env.NODE_ENV === 'development'
+    isDevelopment()
   ) {
     // eslint-disable-next-line no-console
     console.log(

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

@@ -8,22 +8,21 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as BookmarkIcon } from '@material-symbols/svg-600/outlined/bookmark-fill.svg';
+import AddReactionIcon from '@/material-icons/400-24px/add_reaction.svg?react';
-import { ReactComponent as BookmarkBorderIcon } from '@material-symbols/svg-600/outlined/bookmark.svg';
+import BookmarkIcon from '@/material-icons/400-24px/bookmark-fill.svg?react';
-import { ReactComponent as HeartPlusIcon } from '@material-symbols/svg-600/outlined/heart_plus.svg';
+import BookmarkBorderIcon from '@/material-icons/400-24px/bookmark.svg?react';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
+import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
-import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg';
+import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
+import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
-import { ReactComponent as StarBorderIcon } from '@material-symbols/svg-600/outlined/star.svg';
+import StarBorderIcon from '@/material-icons/400-24px/star.svg?react';
-import { ReactComponent as VisibilityIcon } from '@material-symbols/svg-600/outlined/visibility.svg';
+import VisibilityIcon from '@/material-icons/400-24px/visibility.svg?react';
-
+import RepeatDisabledIcon from '@/svg-icons/repeat_disabled.svg';
+import RepeatPrivateIcon from '@/svg-icons/repeat_private.svg';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'flavours/glitch/permissions';
 import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-import { ReactComponent as RepeatDisabledIcon } from 'mastodon/../svg-icons/repeat_disabled.svg';
-import { ReactComponent as RepeatPrivateIcon } from 'mastodon/../svg-icons/repeat_private.svg';
 
 import DropdownMenuContainer from '../containers/dropdown_menu_container';
 import EmojiPickerDropdown from '../features/compose/containers/emoji_picker_dropdown_container';
@@ -337,8 +336,8 @@ class StatusActionBar extends ImmutablePureComponent {
         onClick={this.handleNoOp} // EmojiPickerDropdown handles that
         title={intl.formatMessage(messages.react)}
         disabled={!canReact}
-        icon='heart-plus'
+        icon='add-reaction'
-        iconComponent={HeartPlusIcon}
+        iconComponent={AddReactionIcon}
       />
     );
 

app/javascript/flavours/glitch/components/status_content.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 ImageIcon } from '@material-symbols/svg-600/outlined/image.svg';
+import ImageIcon from '@/material-icons/400-24px/image.svg?react';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
-import { ReactComponent as LinkIcon } from '@material-symbols/svg-600/outlined/link.svg';
+import LinkIcon from '@/material-icons/400-24px/link.svg?react';
-import { ReactComponent as MovieIcon } from '@material-symbols/svg-600/outlined/movie.svg';
+import MovieIcon from '@/material-icons/400-24px/movie.svg?react';
-import { ReactComponent as MusicNoteIcon } from '@material-symbols/svg-600/outlined/music_note.svg';
+import MusicNoteIcon from '@/material-icons/400-24px/music_note.svg?react';
-
 import { Icon } from 'flavours/glitch/components/icon';
 import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
 
-import Permalink from './permalink';
+
+import { Permalink } from './permalink';
 
 const textMatchesTarget = (text, origin, host) => {
   return (text === origin || text === host

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

@@ -6,18 +6,18 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as ExpandLessIcon } from '@material-symbols/svg-600/outlined/expand_less.svg';
+import ExpandLessIcon from '@/material-icons/400-24px/expand_less.svg?react';
-import { ReactComponent as ForumIcon } from '@material-symbols/svg-600/outlined/forum.svg';
+import ForumIcon from '@/material-icons/400-24px/forum.svg?react';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home.svg';
+import HomeIcon from '@/material-icons/400-24px/home.svg?react';
-import { ReactComponent as ImageIcon } from '@material-symbols/svg-600/outlined/image.svg';
+import ImageIcon from '@/material-icons/400-24px/image.svg?react';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
-import { ReactComponent as LinkIcon } from '@material-symbols/svg-600/outlined/link.svg';
+import LinkIcon from '@/material-icons/400-24px/link.svg?react';
-import { ReactComponent as MovieIcon } from '@material-symbols/svg-600/outlined/movie.svg';
+import MovieIcon from '@/material-icons/400-24px/movie.svg?react';
-import { ReactComponent as MusicNoteIcon } from '@material-symbols/svg-600/outlined/music_note.svg';
+import MusicNoteIcon from '@/material-icons/400-24px/music_note.svg?react';
-
 import { Icon } from 'flavours/glitch/components/icon';
 import { languages } from 'flavours/glitch/initial_state';
 
+
 import { IconButton } from './icon_button';
 import { VisibilityIcon } from './visibility_icon';
 

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

@@ -6,17 +6,17 @@ import { FormattedMessage } from 'react-intl';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
+import AddReactionIcon from '@/material-icons/400-24px/add_reaction.svg?react';
-import { ReactComponent as HeartPlusIcon } from '@material-symbols/svg-600/outlined/heart_plus.svg';
+import EditIcon from '@/material-icons/400-24px/edit.svg?react';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
-import { ReactComponent as PushPinIcon } from '@material-symbols/svg-600/outlined/push_pin.svg';
+import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
+import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
+import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
-
 import { Icon } from 'flavours/glitch/components/icon';
 import { me } from 'flavours/glitch/initial_state';
 
+
 export default class StatusPrepend extends PureComponent {
 
   static propTypes = {
@@ -131,8 +131,8 @@ export default class StatusPrepend extends PureComponent {
       iconComponent = StarIcon;
       break;
     case 'reaction':
-      iconId = 'heart-plus';
+      iconId = 'add-reaction';
-      iconComponent = HeartPlusIcon;
+      iconComponent = AddReactionIcon;
       break;
     case 'featured':
       iconId = 'thumb-tack';

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

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

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

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

app/javascript/flavours/glitch/containers/mastodon.jsx

@@ -18,8 +18,9 @@ import UI from 'flavours/glitch/features/ui';
 import initialState, { title as siteTitle } from 'flavours/glitch/initial_state';
 import { IntlProvider } from 'flavours/glitch/locales';
 import { store } from 'flavours/glitch/store';
+import { isProduction } from 'flavours/glitch/utils/environment';
 
-const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`;
+const title = isProduction() ? siteTitle : `${siteTitle} (Dev)`;
 
 const hydrateAction = hydrateStore(initialState);
 

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

@@ -10,9 +10,9 @@ import { List as ImmutableList } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
-import { ReactComponent as ExpandMoreIcon } from '@material-symbols/svg-600/outlined/expand_more.svg';
 
+import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
+import ExpandMoreIcon from '@/material-icons/400-24px/expand_more.svg?react';
 import { fetchServer, fetchExtendedDescription, fetchDomainBlocks  } from 'flavours/glitch/actions/server';
 import Column from 'flavours/glitch/components/column';
 import { Icon  }  from 'flavours/glitch/components/icon';

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

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

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

@@ -5,7 +5,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import Hashtag from 'flavours/glitch/components/hashtag';
+import { Hashtag } from 'flavours/glitch/components/hashtag';
 
 const messages = defineMessages({
   lastStatusAt: { id: 'account.featured_tags.last_status_at', defaultMessage: 'Last post on {date}' },

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

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

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

@@ -9,12 +9,12 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
-import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications.svg';
-import { ReactComponent as NotificationsActiveIcon } from '@material-symbols/svg-600/outlined/notifications_active-fill.svg';
 
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
+import LockIcon from '@/material-icons/400-24px/lock.svg?react';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
+import NotificationsActiveIcon from '@/material-icons/400-24px/notifications_active-fill.svg?react';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { Badge, AutomatedBadge, GroupBadge } from 'flavours/glitch/components/badge';
 import { Button } from 'flavours/glitch/components/button';

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

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

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

@@ -5,14 +5,14 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as AudiotrackIcon } from '@material-symbols/svg-600/outlined/music_note.svg';
+import AudiotrackIcon from '@/material-icons/400-24px/music_note.svg?react';
-import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow.svg';
+import PlayArrowIcon from '@/material-icons/400-24px/play_arrow.svg?react';
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
-
 import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
 
+
 export default class MediaItem extends ImmutablePureComponent {
 
   static propTypes = {

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

@@ -5,8 +5,8 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as TripIcon } from '@material-symbols/svg-600/outlined/trip.svg';
 
+import TripIcon from '@/material-icons/400-24px/trip.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 

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

@@ -7,17 +7,18 @@ import classNames from 'classnames';
 
 import { is } from 'immutable';
 
-import { ReactComponent as DownloadIcon } from '@material-symbols/svg-600/outlined/download.svg';
-import { ReactComponent as PauseIcon } from '@material-symbols/svg-600/outlined/pause.svg';
-import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow-fill.svg';
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
-import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off-fill.svg';
-import { ReactComponent as VolumeUpIcon } from '@material-symbols/svg-600/outlined/volume_up-fill.svg';
 import { throttle, debounce } from 'lodash';
 
+import DownloadIcon from '@/material-icons/400-24px/download.svg?react';
+import PauseIcon from '@/material-icons/400-24px/pause.svg?react';
+import PlayArrowIcon from '@/material-icons/400-24px/play_arrow-fill.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
+import VolumeOffIcon from '@/material-icons/400-24px/volume_off-fill.svg?react';
+import VolumeUpIcon from '@/material-icons/400-24px/volume_up-fill.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { formatTime, getPointerPosition, fileNameFromURL } from 'flavours/glitch/features/video';
 
+
 import { Blurhash } from '../../components/blurhash';
 import { displayMedia, useBlurhash } from '../../initial_state';
 

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

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

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

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

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

@@ -7,8 +7,8 @@ import { Helmet } from 'react-helmet';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
 
+import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
 import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
 import { domain } from 'flavours/glitch/initial_state';
 

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

@@ -5,10 +5,10 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg';
+import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
-
 import { preferencesLink, profileLink } from 'flavours/glitch/utils/backend_links';
 
+
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 
 const messages = defineMessages({

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

@@ -7,18 +7,18 @@ import { Link } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
+import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
-import { ReactComponent as LogoutIcon } from '@material-symbols/svg-600/outlined/logout.svg';
+import LogoutIcon from '@/material-icons/400-24px/logout.svg?react';
-import { ReactComponent as ManufacturingIcon } from '@material-symbols/svg-600/outlined/manufacturing.svg';
+import ManufacturingIcon from '@/material-icons/400-24px/manufacturing.svg?react';
-import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg';
+import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
-import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg';
+import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
-
 import { Icon } from 'flavours/glitch/components/icon';
 import { signOutLink } from 'flavours/glitch/utils/backend_links';
 import { conditionalRender } from 'flavours/glitch/utils/react_helpers';
 
+
 const messages = defineMessages({
   community: {
     defaultMessage: 'Local timeline',

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

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import Permalink from 'flavours/glitch/components/permalink';
+import { Permalink } from 'flavours/glitch/components/permalink';
 import { profileLink } from 'flavours/glitch/utils/backend_links';
 
 import { Avatar } from '../../../components/avatar';

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

@@ -6,19 +6,20 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as AttachFileIcon } from '@material-symbols/svg-600/outlined/attach_file.svg';
-import { ReactComponent as BrushIcon } from '@material-symbols/svg-600/outlined/brush.svg';
-import { ReactComponent as CodeIcon } from '@material-symbols/svg-600/outlined/code.svg';
-import { ReactComponent as DescriptionIcon } from '@material-symbols/svg-600/outlined/description.svg';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
-import { ReactComponent as MarkdownIcon } from '@material-symbols/svg-600/outlined/markdown.svg';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
-import { ReactComponent as UploadFileIcon } from '@material-symbols/svg-600/outlined/upload_file.svg';
 import Toggle from 'react-toggle';
 
+import AttachFileIcon from '@/material-icons/400-24px/attach_file.svg?react';
+import BrushIcon from '@/material-icons/400-24px/brush.svg?react';
+import CodeIcon from '@/material-icons/400-24px/code.svg?react';
+import DescriptionIcon from '@/material-icons/400-24px/description.svg?react';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
+import MarkdownIcon from '@/material-icons/400-24px/markdown.svg?react';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import UploadFileIcon from '@/material-icons/400-24px/upload_file.svg?react';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import { pollLimits } from 'flavours/glitch/initial_state';
 
+
 import DropdownContainer from '../containers/dropdown_container';
 import LanguageDropdown from '../containers/language_dropdown_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';

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

@@ -8,9 +8,9 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
 
+import AddIcon from '@/material-icons/400-24px/add.svg?react';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import AutosuggestInput from 'flavours/glitch/components/autosuggest_input';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { IconButton } from 'flavours/glitch/components/icon_button';

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

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

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

@@ -4,14 +4,14 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
+import LockIcon from '@/material-icons/400-24px/lock.svg?react';
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
+import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
-import { ReactComponent as MailIcon } from '@material-symbols/svg-600/outlined/mail.svg';
+import MailIcon from '@/material-icons/400-24px/mail.svg?react';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
-
 import { Button } from 'flavours/glitch/components/button';
 import { Icon } from 'flavours/glitch/components/icon';
 
+
 const messages = defineMessages({
   publish: {
     defaultMessage: 'Publish',

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

@@ -5,8 +5,8 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
 
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import { WithOptionalRouterPropTypes, withOptionalRouter } from 'flavours/glitch/utils/react_router';
 

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

@@ -8,10 +8,10 @@ import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as CancelIcon } from '@material-symbols/svg-600/outlined/cancel-fill.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
 
+import CancelIcon from '@/material-icons/400-24px/cancel-fill.svg?react';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import SearchIcon from '@/material-icons/400-24px/search.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { domain, searchEnabled } from 'flavours/glitch/initial_state';
 import { HASHTAG_REGEX } from 'flavours/glitch/utils/hashtags';

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

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

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

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

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

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

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

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

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

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

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

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

app/javascript/flavours/glitch/features/directory/components/account_card.jsx

@@ -19,7 +19,7 @@ import { Avatar } from 'flavours/glitch/components/avatar';
 import { Button } from 'flavours/glitch/components/button';
 import { DisplayName } from 'flavours/glitch/components/display_name';
 import { IconButton } from 'flavours/glitch/components/icon_button';
-import Permalink from 'flavours/glitch/components/permalink';
+import { Permalink } from 'flavours/glitch/components/permalink';
 import { ShortNumber } from 'flavours/glitch/components/short_number';
 import { autoPlayGif, me, unfollowModal } from 'flavours/glitch/initial_state';
 import { makeGetAccount } from 'flavours/glitch/selectors';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -5,13 +5,13 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 
 import { Avatar } from '../../../components/avatar';
 import { DisplayName } from '../../../components/display_name';
 import { IconButton } from '../../../components/icon_button';
-import Permalink from '../../../components/permalink';
+import { Permalink } from '../../../components/permalink';
 
 const messages = defineMessages({
   authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },

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

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

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

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

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

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

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

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

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

@@ -5,18 +5,19 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as BlockIcon } from '@material-symbols/svg-600/outlined/block.svg';
+import BlockIcon from '@/material-icons/400-24px/block.svg?react';
-import { ReactComponent as InfoIcon } from '@material-symbols/svg-600/outlined/info.svg';
+import InfoIcon from '@/material-icons/400-24px/info.svg?react';
-import { ReactComponent as PersonCheckIcon } from '@material-symbols/svg-600/outlined/person_check.svg';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import { ReactComponent as PushPinIcon } from '@material-symbols/svg-600/outlined/push_pin.svg';
+import PersonCheckIcon from '@/material-icons/400-24px/person_check.svg?react';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
+import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
-import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off.svg';
+import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
-
+import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
 import { openModal } from 'flavours/glitch/actions/modal';
 import Column from 'flavours/glitch/features/ui/components/column';
 import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
 import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading';
 
+
 const messages = defineMessages({
   heading: { id: 'column.heading', defaultMessage: 'Misc' },
   subheading: { id: 'column.subheading', defaultMessage: 'Miscellaneous options' },
@@ -51,7 +52,7 @@ class GettingStartedMisc extends ImmutablePureComponent {
     const { signedIn } = this.context.identity;
 
     return (
-      <Column icon='ellipsis-h' heading={intl.formatMessage(messages.heading)} alwaysShowBackButton>
+      <Column icon='ellipsis-h' iconComponent={MoreHorizIcon} heading={intl.formatMessage(messages.heading)} alwaysShowBackButton>
         <div className='scrollable'>
           <ColumnSubheading text={intl.formatMessage(messages.subheading)} />
           {signedIn && (<ColumnLink key='favourites' icon='star' iconComponent={StarIcon} text={intl.formatMessage(messages.favourites)} to='/favourites' />)}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -3,16 +3,16 @@ import { PureComponent } from 'react';
 
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
-import { ReactComponent as HeartPlusIcon } from '@material-symbols/svg-600/outlined/heart_plus.svg';
+import AddReactionIcon from '@/material-icons/400-24px/add_reaction.svg?react';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
+import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
+import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg';
+import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg';
+import StarIcon from '@/material-icons/400-24px/star.svg?react';
-
 import { Icon }  from 'flavours/glitch/components/icon';
 
+
 const tooltips = defineMessages({
   mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
   favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favorites' },
@@ -89,7 +89,7 @@ class FilterBar extends PureComponent {
           onClick={this.onClick('reaction')}
           title={intl.formatMessage(tooltips.reactions)}
         >
-          <Icon id='heart-plus' icon={HeartPlusIcon} />
+          <Icon id='add-reaction' icon={AddReactionIcon} />
         </button>
         <button
           className={selectedFilter === 'reblog' ? 'active' : ''}