Merge remote-tracking branch 'parent/main' into kb-upstream-20231026

app/javascript/mastodon/components/account.jsx

@@ -18,7 +18,6 @@ import { Avatar } from './avatar';
 import { Button } from './button';
 import { FollowersCounter } from './counters';
 import { DisplayName } from './display_name';
-import { IconButton } from './icon_button';
 import { RelativeTimestamp } from './relative_timestamp';
 
 const messages = defineMessages({
@@ -46,10 +45,7 @@ class Account extends ImmutablePureComponent {
     hidden: PropTypes.bool,
     hideButtons: PropTypes.bool,
     minimal: PropTypes.bool,
-    actionIcon: PropTypes.string,
-    actionTitle: PropTypes.string,
     defaultAction: PropTypes.string,
-    onActionClick: PropTypes.func,
     children: PropTypes.object,
     withBio: PropTypes.bool,
   };
@@ -78,12 +74,8 @@ class Account extends ImmutablePureComponent {
     this.props.onMuteNotifications(this.props.account, false);
   };
 
-  handleAction = () => {
-    this.props.onActionClick(this.props.account);
-  };
-
   render () {
-    const { account, intl, hidden, hideButtons, withBio, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal, children } = this.props;
+    const { account, intl, hidden, hideButtons, withBio, defaultAction, size, minimal, children } = this.props;
 
     if (!account) {
       return <EmptyAccount size={size} minimal={minimal} />;
@@ -100,9 +92,7 @@ class Account extends ImmutablePureComponent {
 
     let buttons;
 
-    if (actionIcon && onActionClick) {
-      buttons = <IconButton icon={actionIcon} title={actionTitle} onClick={this.handleAction} />;
-    } else if (!hideButtons && !actionIcon && account.get('id') !== me && account.get('relationship', null) !== null) {
+    if (!hideButtons && account.get('id') !== me && account.get('relationship', null) !== null) {
       const following = account.getIn(['relationship', 'following']);
       const requested = account.getIn(['relationship', 'requested']);
       const blocking  = account.getIn(['relationship', 'blocking']);

app/javascript/mastodon/components/attachment_list.jsx

@@ -7,6 +7,8 @@ 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 { Icon }  from 'mastodon/components/icon';
 
 const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
@@ -25,7 +27,7 @@ export default class AttachmentList extends ImmutablePureComponent {
       <div className={classNames('attachment-list', { compact })}>
         {!compact && (
           <div className='attachment-list__icon'>
-            <Icon id='link' />
+            <Icon id='link' icon={LinkIcon} />
           </div>
         )}
 
@@ -36,7 +38,7 @@ export default class AttachmentList extends ImmutablePureComponent {
             return (
               <li key={attachment.get('id')}>
                 <a href={displayUrl} target='_blank' rel='noopener noreferrer'>
-                  {compact && <Icon id='link' />}
+                  {compact && <Icon id='link' icon={LinkIcon} />}
                   {compact && ' ' }
                   {displayUrl ? filename(displayUrl) : <FormattedMessage id='attachments_list.unprocessed' defaultMessage='(unprocessed)' />}
                 </a>

app/javascript/mastodon/components/autosuggest_emoji.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { assetHost } from 'mastodon/utils/config';
 
-import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
+import { unicodeMapping } from '../features/emoji/emoji_unicode_mapping_light';
 
 export default class AutosuggestEmoji extends PureComponent {
 

app/javascript/mastodon/components/badge.jsx

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

app/javascript/mastodon/components/check.tsx

@@ -1,13 +0,0 @@
-export const Check: React.FC = () => (
-  <svg
-    xmlns='http://www.w3.org/2000/svg'
-    viewBox='0 0 20 20'
-    fill='currentColor'
-  >
-    <path
-      fillRule='evenodd'
-      d='M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z'
-      clipRule='evenodd'
-    />
-  </svg>
-);

app/javascript/mastodon/components/column_back_button.jsx

@@ -6,10 +6,12 @@ import { FormattedMessage } from 'react-intl';
 
 import { withRouter } from 'react-router-dom';
 
+import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg';
+
 import { Icon }  from 'mastodon/components/icon';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
-class ColumnBackButton extends PureComponent {
+export class ColumnBackButton extends PureComponent {
 
   static propTypes = {
     multiColumn: PropTypes.bool,
@@ -34,7 +36,7 @@ class ColumnBackButton extends PureComponent {
 
     const component = (
       <button onClick={this.handleClick} className='column-back-button'>
-        <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
+        <Icon id='chevron-left' icon={ArrowBackIcon} className='column-back-button__icon' />
         <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
       </button>
     );

app/javascript/mastodon/components/column_back_button_slim.jsx

@@ -1,20 +1,20 @@
 import { FormattedMessage } from 'react-intl';
 
+import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg';
+
 import { Icon }  from 'mastodon/components/icon';
 
-import ColumnBackButton from './column_back_button';
+import { ColumnBackButton } from './column_back_button';
 
 export default class ColumnBackButtonSlim extends ColumnBackButton {
-
   render () {
     return (
       <div className='column-back-button--slim'>
         <div role='button' tabIndex={0} onClick={this.handleClick} className='column-back-button column-back-button--slim-button'>
-          <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
+          <Icon id='chevron-left' icon={ArrowBackIcon} className='column-back-button__icon' />
           <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
         </div>
       </div>
     );
   }
-
 }

app/javascript/mastodon/components/column_header.jsx

@@ -7,6 +7,13 @@ import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import classNames from 'classnames';
 import { withRouter } from 'react-router-dom';
 
+import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
+import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg';
+import { ReactComponent as ChevronLeftIcon } from '@material-symbols/svg-600/outlined/chevron_left.svg';
+import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
+import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import { ReactComponent as TuneIcon } from '@material-symbols/svg-600/outlined/tune.svg';
+
 import { Icon }  from 'mastodon/components/icon';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
@@ -27,6 +34,7 @@ class ColumnHeader extends PureComponent {
     intl: PropTypes.object.isRequired,
     title: PropTypes.node,
     icon: PropTypes.string,
+    iconComponent: PropTypes.func,
     active: PropTypes.bool,
     multiColumn: PropTypes.bool,
     extraButton: PropTypes.node,
@@ -87,7 +95,7 @@ class ColumnHeader extends PureComponent {
   };
 
   render () {
-    const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props;
+    const { title, icon, iconComponent, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props;
     const { collapsed, animating } = this.state;
 
     const wrapperClassName = classNames('column-header__wrapper', {
@@ -118,22 +126,22 @@ class ColumnHeader extends PureComponent {
     }
 
     if (multiColumn && pinned) {
-      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='times' /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;
+      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='times' icon={CloseIcon} /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;
 
       moveButtons = (
         <div key='move-buttons' className='column-header__setting-arrows'>
-          <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='icon-button column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' /></button>
-          <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='icon-button column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' /></button>
+          <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='icon-button column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' icon={ChevronLeftIcon} /></button>
+          <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='icon-button column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' icon={ChevronRightIcon} /></button>
         </div>
       );
     } else if (multiColumn && this.props.onPin) {
-      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
+      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' icon={AddIcon} /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
     }
 
     if (!pinned && ((multiColumn && history.location?.state?.fromMastodon) || showBackButton)) {
       backButton = (
         <button onClick={this.handleBackClick} className='column-header__back-button'>
-          <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
+          <Icon id='chevron-left' icon={ArrowBackIcon} className='column-back-button__icon' />
           <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
         </button>
       );
@@ -157,21 +165,21 @@ class ColumnHeader extends PureComponent {
           onClick={this.handleToggleClick}
         >
           <i className='icon-with-badge'>
-            <Icon id='sliders' />
+            <Icon id='sliders' icon={TuneIcon} />
             {collapseIssues && <i className='icon-with-badge__issue-badge' />}
           </i>
         </button>
       );
     }
 
-    const hasTitle = icon && title;
+    const hasTitle = (icon || iconComponent) && title;
 
     const component = (
       <div className={wrapperClassName}>
         <h1 className={buttonClassName}>
           {hasTitle && (
             <button onClick={this.handleTitleClick}>
-              <Icon id={icon} fixedWidth className='column-header__icon' />
+              <Icon id={icon} icon={iconComponent} className='column-header__icon' />
               {title}
             </button>
           )}

app/javascript/mastodon/components/compacted_status.jsx

@@ -103,6 +103,7 @@ class CompactedStatus extends ImmutablePureComponent {
     updateScrollBottom: PropTypes.func,
     cacheMediaWidth: PropTypes.func,
     cachedMediaWidth: PropTypes.number,
+    history: PropTypes.func,
   };
 
   // Avoid checking props that are functions (and whose equality will always
@@ -240,14 +241,14 @@ class CompactedStatus extends ImmutablePureComponent {
       return;
     }
 
-    const { router } = this.context;
+    const { history } = this.props;
     const status = this._properStatus();
 
-    if (!router) {
+    if (!history) {
       return;
     }
 
-    router.history.push(`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`);
+    history.push(`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`);
   };
 
   handleHotkeyOpenProfile = () => {
@@ -255,14 +256,14 @@ class CompactedStatus extends ImmutablePureComponent {
   };
 
   _openProfile = (proper = true) => {
-    const { router } = this.context;
+    const { history } = this.props;
     const status = proper ? this._properStatus() : this.props.status;
 
-    if (!router) {
+    if (!history) {
       return;
     }
 
-    router.history.push(`/@${status.getIn(['account', 'acct'])}`);
+    history.push(`/@${status.getIn(['account', 'acct'])}`);
   };
 
   handleHotkeyMoveUp = e => {

app/javascript/mastodon/components/dismissable_banner.tsx

@@ -3,6 +3,8 @@ import { useCallback, useState } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
+import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+
 import { bannerSettings } from 'mastodon/settings';
 
 import { IconButton } from './icon_button';
@@ -36,6 +38,7 @@ export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
       <div className='dismissable-banner__action'>
         <IconButton
           icon='times'
+          iconComponent={CloseIcon}
           title={intl.formatMessage(messages.dismiss)}
           onClick={handleDismiss}
         />

app/javascript/mastodon/components/domain.tsx

@@ -2,6 +2,8 @@ import { useCallback } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
+import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
+
 import { IconButton } from './icon_button';
 
 const messages = defineMessages({
@@ -34,6 +36,7 @@ export const Domain: React.FC<Props> = ({ domain, onUnblockDomain }) => {
           <IconButton
             active
             icon='unlock'
+            iconComponent={LockOpenIcon}
             title={intl.formatMessage(messages.unblockDomain, { domain })}
             onClick={handleDomainUnblock}
           />

app/javascript/mastodon/components/dropdown_menu.jsx

@@ -6,6 +6,7 @@ import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
+import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Overlay from 'react-overlays/Overlay';
 
@@ -163,6 +164,7 @@ class Dropdown extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     icon: PropTypes.string,
+    iconComponent: PropTypes.func,
     items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]).isRequired,
     loading: PropTypes.bool,
     size: PropTypes.number,
@@ -255,7 +257,7 @@ class Dropdown extends PureComponent {
   };
 
   findTarget = () => {
-    return this.target;
+    return this.target?.buttonRef?.current;
   };
 
   componentWillUnmount = () => {
@@ -271,6 +273,7 @@ class Dropdown extends PureComponent {
   render () {
     const {
       icon,
+      iconComponent,
       items,
       size,
       title,
@@ -291,9 +294,11 @@ class Dropdown extends PureComponent {
       onMouseDown: this.handleMouseDown,
       onKeyDown: this.handleButtonKeyDown,
       onKeyPress: this.handleKeyPress,
+      ref: this.setTargetRef,
     }) : (
       <IconButton
         icon={!open ? icon : 'close'}
+        iconComponent={!open ? iconComponent : CloseIcon}
         title={title}
         active={open}
         disabled={disabled}
@@ -302,14 +307,14 @@ class Dropdown extends PureComponent {
         onMouseDown={this.handleMouseDown}
         onKeyDown={this.handleButtonKeyDown}
         onKeyPress={this.handleKeyPress}
+        ref={this.setTargetRef}
       />
     );
 
     return (
       <>
-        <span ref={this.setTargetRef}>
-          {button}
-        </span>
+        {button}
+
         <Overlay show={open} offset={[5, 5]} placement={'bottom'} flip target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
           {({ props, arrowProps, placement }) => (
             <div {...props}>

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

@@ -5,6 +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 { openModal } from 'mastodon/actions/modal';
 import { Icon }  from 'mastodon/components/icon';
 import InlineAccount from 'mastodon/components/inline_account';
@@ -66,7 +68,7 @@ class EditedTimestamp extends PureComponent {
     return (
       <DropdownMenu statusId={statusId} renderItem={this.renderItem} scrollable renderHeader={this.renderHeader} onItemClick={this.handleItemClick}>
         <button className='dropdown-menu__text-button'>
-          <FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(timestamp, { hour12: false, month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} /> <Icon id='caret-down' />
+          <FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(timestamp, { hour12: false, month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} /> <Icon id='caret-down' icon={ArrowDropDownIcon} />
         </button>
       </DropdownMenu>
     );

app/javascript/mastodon/components/icon.tsx

@@ -1,20 +1,52 @@
 import classNames from 'classnames';
 
-interface Props extends React.HTMLAttributes<HTMLImageElement> {
-  id: string;
-  className?: string;
-  fixedWidth?: boolean;
+import { ReactComponent as CheckBoxOutlineBlankIcon } from '@material-symbols/svg-600/outlined/check_box_outline_blank.svg';
+
+interface SVGPropsWithTitle extends React.SVGProps<SVGSVGElement> {
+  title?: string;
+}
+
+export type IconProp = React.FC<SVGPropsWithTitle>;
+
+interface Props extends React.SVGProps<SVGSVGElement> {
   children?: never;
+  id: string;
+  icon: IconProp;
+  title?: string;
 }
 
 export const Icon: React.FC<Props> = ({
   id,
+  icon: IconComponent,
   className,
-  fixedWidth,
+  title: titleProp,
   ...other
-}) => (
-  <i
-    className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
-    {...other}
-  />
-);
+}) => {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (!IconComponent) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(
+        `<Icon id="${id}" className="${className}"> is missing an "icon" prop.`,
+      );
+    }
+
+    IconComponent = CheckBoxOutlineBlankIcon;
+  }
+
+  const ariaHidden = titleProp ? undefined : true;
+  const role = !ariaHidden ? 'img' : undefined;
+
+  // Set the title to an empty string to remove the built-in SVG one if any
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+  const title = titleProp || '';
+
+  return (
+    <IconComponent
+      className={classNames('icon', `icon-${id}`, className)}
+      title={title}
+      aria-hidden={ariaHidden}
+      role={role}
+      {...other}
+    />
+  );
+};

app/javascript/mastodon/components/icon_button.tsx

@@ -1,19 +1,20 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 
 import classNames from 'classnames';
 
 import { AnimatedNumber } from './animated_number';
+import type { IconProp } from './icon';
 import { Icon } from './icon';
 
 interface Props {
   className?: string;
   title: string;
   icon: string;
+  iconComponent: IconProp;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
   onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
   onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;
-  size: number;
   active: boolean;
   expanded?: boolean;
   style?: React.CSSProperties;
@@ -33,8 +34,9 @@ interface States {
   deactivate: boolean;
 }
 export class IconButton extends PureComponent<Props, States> {
+  buttonRef = createRef<HTMLButtonElement>();
+
   static defaultProps = {
-    size: 18,
     active: false,
     disabled: false,
     animate: false,
@@ -86,10 +88,6 @@ export class IconButton extends PureComponent<Props, States> {
 
   render() {
     const style = {
-      fontSize: `${this.props.size}px`,
-      width: `${this.props.size * 1.28571429}px`,
-      height: `${this.props.size * 1.28571429}px`,
-      lineHeight: `${this.props.size}px`,
       ...this.props.style,
       ...(this.props.active ? this.props.activeStyle : {}),
     };
@@ -100,6 +98,7 @@ export class IconButton extends PureComponent<Props, States> {
       disabled,
       expanded,
       icon,
+      iconComponent,
       inverted,
       overlay,
       tabIndex,
@@ -122,13 +121,9 @@ export class IconButton extends PureComponent<Props, States> {
       'icon-button--with-counter': typeof counter !== 'undefined',
     });
 
-    if (typeof counter !== 'undefined') {
-      style.width = 'auto';
-    }
-
     let contents = (
       <>
-        <Icon id={icon} fixedWidth aria-hidden='true' />{' '}
+        <Icon id={icon} icon={iconComponent} aria-hidden='true' />{' '}
         {typeof counter !== 'undefined' && (
           <span className='icon-button__counter'>
             <AnimatedNumber value={counter} />
@@ -161,6 +156,7 @@ export class IconButton extends PureComponent<Props, States> {
         tabIndex={tabIndex}
         disabled={disabled}
         data-id={data_id}
+        ref={this.buttonRef}
       >
         {contents}
       </button>

app/javascript/mastodon/components/icon_with_badge.tsx

@@ -1,21 +1,24 @@
+import type { IconProp } from './icon';
 import { Icon } from './icon';
 
 const formatNumber = (num: number): number | string => (num > 40 ? '40+' : num);
 
 interface Props {
   id: string;
+  icon: IconProp;
   count: number;
   issueBadge: boolean;
   className: string;
 }
 export const IconWithBadge: React.FC<Props> = ({
   id,
+  icon,
   count,
   issueBadge,
   className,
 }) => (
   <i className='icon-with-badge'>
-    <Icon id={id} fixedWidth className={className} />
+    <Icon id={id} icon={icon} className={className} />
     {count > 0 && (
       <i className='icon-with-badge__badge'>{formatNumber(count)}</i>
     )}

app/javascript/mastodon/components/load_gap.tsx

@@ -2,6 +2,8 @@ import { useCallback } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
+import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
+
 import { Icon } from 'mastodon/components/icon';
 
 const messages = defineMessages({
@@ -28,7 +30,7 @@ export const LoadGap: React.FC<Props> = ({ disabled, maxId, onClick }) => {
       onClick={handleClick}
       aria-label={intl.formatMessage(messages.load_more)}
     >
-      <Icon id='ellipsis-h' />
+      <Icon id='ellipsis-h' icon={MoreHorizIcon} />
     </button>
   );
 };

app/javascript/mastodon/components/media_gallery.jsx

@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import { is } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
+import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
 import { debounce } from 'lodash';
 
 import { Blurhash } from 'mastodon/components/blurhash';
@@ -342,7 +343,7 @@ class MediaGallery extends PureComponent {
         </button>
       );
     } else if (visible) {
-      spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible, { number: size })} icon='eye-slash' overlay onClick={this.handleOpen} ariaHidden />;
+      spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible, { number: size })} icon='eye-slash' iconComponent={VisibilityOffIcon} overlay onClick={this.handleOpen} ariaHidden />;
     } else {
       spoilerButton = (
         <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>

app/javascript/mastodon/components/picture_in_picture_placeholder.jsx

@@ -5,6 +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 { removePictureInPicture } from 'mastodon/actions/picture_in_picture';
 import { Icon }  from 'mastodon/components/icon';
 
@@ -25,7 +27,7 @@ class PictureInPicturePlaceholder extends PureComponent {
 
     return (
       <div className='picture-in-picture-placeholder' style={{ aspectRatio }} role='button' tabIndex={0} onClick={this.handleClick}>
-        <Icon id='window-restore' />
+        <Icon id='window-restore' icon={CancelPresentationIcon} />
         <FormattedMessage id='picture_in_picture.restore' defaultMessage='Put it back' />
       </div>
     );

app/javascript/mastodon/components/poll.jsx

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
+import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
 import escapeTextContentForBrowser from 'escape-html';
 import spring from 'react-motion/lib/spring';
 
@@ -192,7 +193,7 @@ class Poll extends ImmutablePureComponent {
           />
 
           {!!voted && <span className='poll__voted'>
-            <Icon id='check' className='poll__voted__mark' title={intl.formatMessage(messages.voted)} />
+            <Icon id='check' icon={CheckIcon} className='poll__voted__mark' title={intl.formatMessage(messages.voted)} />
           </span>}
         </label>
 

app/javascript/mastodon/components/router.tsx

@@ -3,7 +3,11 @@ import React from 'react';
 
 import { Router as OriginalRouter } from 'react-router';
 
-import type { LocationDescriptor, Path } from 'history';
+import type {
+  LocationDescriptor,
+  LocationDescriptorObject,
+  Path,
+} from 'history';
 import { createBrowserHistory } from 'history';
 
 import { layoutFromWindow } from 'mastodon/is_mobile';
@@ -20,39 +24,55 @@ const browserHistory = createBrowserHistory<
 const originalPush = browserHistory.push.bind(browserHistory);
 const originalReplace = browserHistory.replace.bind(browserHistory);
 
-function extractRealPath(path: HistoryPath) {
-  if (typeof path === 'string') return path;
-  else return path.pathname;
+function normalizePath(
+  path: HistoryPath,
+  state?: MastodonLocationState,
+): LocationDescriptorObject<MastodonLocationState> {
+  const location = typeof path === 'string' ? { pathname: path } : { ...path };
+
+  if (location.state === undefined && state !== undefined) {
+    location.state = state;
+  } else if (
+    location.state !== undefined &&
+    state !== undefined &&
+    process.env.NODE_ENV === 'development'
+  ) {
+    // eslint-disable-next-line no-console
+    console.log(
+      'You should avoid providing a 2nd state argument to push when the 1st argument is a location-like object that already has state; it is ignored',
+    );
+  }
+
+  if (
+    layoutFromWindow() === 'multi-column' &&
+    !location.pathname?.startsWith('/deck')
+  ) {
+    location.pathname = `/deck${location.pathname}`;
+  }
+
+  return location;
 }
 
 browserHistory.push = (path: HistoryPath, state?: MastodonLocationState) => {
-  state = state ?? {};
-  state.fromMastodon = true;
+  const location = normalizePath(path, state);
 
-  const realPath = extractRealPath(path);
-  if (!realPath) return;
+  location.state = location.state ?? {};
+  location.state.fromMastodon = true;
 
-  if (layoutFromWindow() === 'multi-column' && !realPath.startsWith('/deck')) {
-    originalPush(`/deck${realPath}`, state);
-  } else {
-    originalPush(path, state);
-  }
+  originalPush(location);
 };
 
 browserHistory.replace = (path: HistoryPath, state?: MastodonLocationState) => {
+  const location = normalizePath(path, state);
+
+  if (!location.pathname) return;
+
   if (browserHistory.location.state?.fromMastodon) {
-    state = state ?? {};
-    state.fromMastodon = true;
+    location.state = location.state ?? {};
+    location.state.fromMastodon = true;
   }
 
-  const realPath = extractRealPath(path);
-  if (!realPath) return;
-
-  if (layoutFromWindow() === 'multi-column' && !realPath.startsWith('/deck')) {
-    originalReplace(`/deck${realPath}`, state);
-  } else {
-    originalReplace(path, state);
-  }
+  originalReplace(location);
 };
 
 export const Router: React.FC<PropsWithChildren> = ({ children }) => {

app/javascript/mastodon/components/searchability_icon.tsx

@@ -0,0 +1,80 @@
+import { defineMessages, useIntl } from 'react-intl';
+
+import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
+import { ReactComponent as PublicUnlistedIcon } from '@material-symbols/svg-600/outlined/cloud.svg';
+import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
+import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
+import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+
+import { Icon } from './icon';
+
+type Searchability =
+  | 'public'
+  | 'public_unlisted'
+  | 'private'
+  | 'direct'
+  | 'limited';
+
+const messages = defineMessages({
+  public_short: { id: 'searchability.public.short', defaultMessage: 'Public' },
+  public_unlisted_short: {
+    id: 'searchability.public_unlisted.short',
+    defaultMessage: 'Public unlisted',
+  },
+  private_short: {
+    id: 'searchability.unlisted.short',
+    defaultMessage: 'Followers',
+  },
+  direct_short: {
+    id: 'searchability.private.short',
+    defaultMessage: 'Reactionners',
+  },
+  limited_short: {
+    id: 'searchability.direct.short',
+    defaultMessage: 'Self only',
+  },
+});
+
+export const SearchabilityIcon: React.FC<{ searchability: Searchability }> = ({
+  searchability,
+}) => {
+  const intl = useIntl();
+
+  const searchabilityIconInfo = {
+    public: {
+      icon: 'globe',
+      iconComponent: PublicIcon,
+      text: intl.formatMessage(messages.public_short),
+    },
+    public_unlisted: {
+      icon: 'cloud',
+      iconComponent: PublicUnlistedIcon,
+      text: intl.formatMessage(messages.public_unlisted_short),
+    },
+    private: {
+      icon: 'lock',
+      iconComponent: LockOpenIcon,
+      text: intl.formatMessage(messages.private_short),
+    },
+    limited: {
+      icon: 'get-pocket',
+      iconComponent: AlternateEmailIcon,
+      text: intl.formatMessage(messages.limited_short),
+    },
+    direct: {
+      icon: 'at',
+      iconComponent: LockIcon,
+      text: intl.formatMessage(messages.direct_short),
+    },
+  };
+
+  const searchabilityIcon = searchabilityIconInfo[searchability];
+
+  return (
+    <Icon
+      id={searchabilityIcon.icon}
+      icon={searchabilityIcon.iconComponent}
+      title={searchabilityIcon.text}
+    />
+  );
+};

app/javascript/mastodon/components/status.jsx

@@ -7,6 +7,14 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
+import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
+import { ReactComponent as QuoteIcon } from '@material-symbols/svg-600/outlined/format_quote.svg';
+import { ReactComponent as ReferenceIcon } from '@material-symbols/svg-600/outlined/link.svg';
+import { ReactComponent as PushPinIcon } from '@material-symbols/svg-600/outlined/push_pin.svg';
+import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
+import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
+import { ReactComponent as LimitedIcon } from '@material-symbols/svg-600/outlined/shield.svg';
+import { ReactComponent as TimerIcon } from '@material-symbols/svg-600/outlined/timer.svg';
 import { HotKeys } from 'react-hotkeys';
 
 import AttachmentList from 'mastodon/components/attachment_list';
@@ -30,6 +38,7 @@ import { RelativeTimestamp } from './relative_timestamp';
 import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
 import StatusEmojiReactionsBar from './status_emoji_reactions_bar';
+import { VisibilityIcon } from './visibility_icon';
 
 const domParser = new DOMParser();
 
@@ -399,25 +408,12 @@ class Status extends ImmutablePureComponent {
     const connectReply = nextInReplyToId && nextInReplyToId === status.get('id');
     const matchedFilters = status.get('matched_filters');
 
-    const visibilityIconInfo = {
-      'public': { icon: 'globe', text: intl.formatMessage(messages.public_short) },
-      'unlisted': { icon: 'unlock', text: intl.formatMessage(messages.unlisted_short) },
-      'public_unlisted': { icon: 'cloud', text: intl.formatMessage(messages.public_unlisted_short) },
-      'login': { icon: 'key', text: intl.formatMessage(messages.login_short) },
-      'private': { icon: 'lock', text: intl.formatMessage(messages.private_short) },
-      'limited': { icon: 'get-pocket', text: intl.formatMessage(messages.limited_short) },
-      'mutual': { icon: 'exchange', text: intl.formatMessage(messages.mutual_short) },
-      'circle': { icon: 'user-circle', text: intl.formatMessage(messages.circle_short) },
-      'personal': { icon: 'sticky-note-o', text: intl.formatMessage(messages.personal_short) },
-      'direct': { icon: 'at', text: intl.formatMessage(messages.direct_short) },
-    };
-
-    let visibilityIcon = visibilityIconInfo[status.get('limited_scope') || status.get('visibility_ex')] || visibilityIconInfo[status.get('visibility')];
+    let visibilityName = status.get('limited_scope') || status.get('visibility_ex') || status.get('visibility');
 
     if (featured) {
       prepend = (
         <div className='status__prepend'>
-          <div className='status__prepend-icon-wrapper'><Icon id='thumb-tack' className='status__prepend-icon' fixedWidth /></div>
+          <div className='status__prepend-icon-wrapper'><Icon id='thumb-tack' icon={PushPinIcon} className='status__prepend-icon' /></div>
           <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
         </div>
       );
@@ -426,8 +422,8 @@ class Status extends ImmutablePureComponent {
 
       prepend = (
         <div className='status__prepend'>
-          <div className='status__prepend-icon-wrapper'><Icon id='retweet' className='status__prepend-icon' fixedWidth /></div>
-          <div className='status__prepend-icon-wrapper'><Icon id={visibilityIcon.icon} className='status__prepend-icon' /></div>
+          <div className='status__prepend-icon-wrapper'><Icon id='retweet' icon={RepeatIcon} className='status__prepend-icon' /></div>
+          <div className='status__prepend-icon-wrapper'><VisibilityIcon visibility={visibilityName} className='status__prepend-icon' /></div>
           <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} href={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
         </div>
       );
@@ -439,7 +435,7 @@ class Status extends ImmutablePureComponent {
     } else if (status.get('visibility') === 'direct') {
       prepend = (
         <div className='status__prepend'>
-          <div className='status__prepend-icon-wrapper'><Icon id='at' className='status__prepend-icon' fixedWidth /></div>
+          <div className='status__prepend-icon-wrapper'><Icon id='at' icon={AlternateEmailIcon} className='status__prepend-icon' /></div>
           <FormattedMessage id='status.direct_indicator' defaultMessage='Private mention' />
         </div>
       );
@@ -448,7 +444,7 @@ class Status extends ImmutablePureComponent {
 
       prepend = (
         <div className='status__prepend'>
-          <div className='status__prepend-icon-wrapper'><Icon id='reply' className='status__prepend-icon' fixedWidth /></div>
+          <div className='status__prepend-icon-wrapper'><Icon id='reply' icon={ReplyIcon} className='status__prepend-icon' /></div>
           <FormattedMessage id='status.replied_to' defaultMessage='Replied to {name}' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} href={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
         </div>
       );
@@ -473,7 +469,7 @@ class Status extends ImmutablePureComponent {
               {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
               <div onClick={this.handleClick} className='status__info'>
                 <a href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
-                  <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
+                  <span className='status__visibility-icon'><VisibilityIcon visibility={visibilityName} /></span>
                   <RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { hour12: false, year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
                 </a>
 
@@ -608,7 +604,7 @@ class Status extends ImmutablePureComponent {
       isCardMediaWithSensitive = status.get('spoiler_text').length > 0;
     }
 
-    visibilityIcon = visibilityIconInfo[status.get('limited_scope') || status.get('visibility_ex')] || visibilityIconInfo[status.get('visibility')];
+    visibilityName = status.get('limited_scope') || status.get('visibility_ex') || status.get('visibility');
 
     let emojiReactionsBar = null;
     if (!this.props.withoutEmojiReactions && status.get('emoji_reactions')) {
@@ -621,12 +617,12 @@ class Status extends ImmutablePureComponent {
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
     const expanded = !status.get('hidden') || status.get('spoiler_text').length === 0;
 
-    const withLimited = status.get('visibility_ex') === 'limited' && status.get('limited_scope') ? <span className='status__visibility-icon'><Icon id='get-pocket' title='Limited' /></span> : null;
-    const withQuote = status.get('quote_id') ? <span className='status__visibility-icon'><Icon id='quote-right' title='Quote' /></span> : null;
-    const withReference = (!withQuote && status.get('status_references_count') > 0) ? <span className='status__visibility-icon'><Icon id='link' title='Reference' /></span> : null;
-    const withExpiration = status.get('expires_at') ? <span className='status__visibility-icon'><Icon id='clock-o' title='Expiration' /></span> : null;
+    const withLimited = status.get('visibility_ex') === 'limited' && status.get('limited_scope') ? <span className='status__visibility-icon'><Icon id='get-pocket' icon={LimitedIcon} title='Limited' /></span> : null;
+    const withQuote = status.get('quote_id') ? <span className='status__visibility-icon'><Icon id='quote-right' icon={QuoteIcon} title='Quote' /></span> : null;
+    const withReference = (!withQuote && status.get('status_references_count') > 0) ? <span className='status__visibility-icon'><Icon id='link' icon={ReferenceIcon} title='Reference' /></span> : null;
+    const withExpiration = status.get('expires_at') ? <span className='status__visibility-icon'><Icon id='clock-o' icon={TimerIcon} title='Expiration' /></span> : null;
 
-    const quote = !muted && status.get('quote_id') && (['public', 'community'].includes(contextType) ? showQuoteInPublic : showQuoteInHome) && <CompactedStatusContainer id={status.get('quote_id')} />;
+    const quote = !muted && status.get('quote_id') && (['public', 'community'].includes(contextType) ? showQuoteInPublic : showQuoteInHome) && <CompactedStatusContainer id={status.get('quote_id')} history={this.props.history} />;
 
     return (
       <HotKeys handlers={handlers}>
@@ -643,7 +639,7 @@ class Status extends ImmutablePureComponent {
                 {withReference}
                 {withExpiration}
                 {withLimited}
-                <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
+                <span className='status__visibility-icon'><VisibilityIcon visibility={visibilityName} /></span>
                 <RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { hour12: false, year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
               </a>
 

app/javascript/mastodon/components/status_action_bar.jsx

@@ -9,6 +9,17 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
+import { ReactComponent as BookmarkIcon } from '@material-symbols/svg-600/outlined/bookmark-fill.svg';
+import { ReactComponent as BookmarkBorderIcon } from '@material-symbols/svg-600/outlined/bookmark.svg';
+import { ReactComponent as EmojiReactionIcon } from '@material-symbols/svg-600/outlined/mood.svg';
+import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
+import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
+import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
+import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg';
+import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
+import { ReactComponent as StarBorderIcon } from '@material-symbols/svg-600/outlined/star.svg';
+import { ReactComponent as VisibilityIcon } from '@material-symbols/svg-600/outlined/visibility.svg';
+
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
@@ -253,7 +264,7 @@ class StatusActionBar extends ImmutablePureComponent {
   };
 
   handleOpenMentions = () => {
-    this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/${this.props.status.get('id')}/mentioned_users`);
+    this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/${this.props.status.get('id')}/mentioned_users`);
   };
 
   handleEmbed = () => {
@@ -413,12 +424,15 @@ class StatusActionBar extends ImmutablePureComponent {
     }
 
     let replyIcon;
+    let replyIconComponent;
     let replyTitle;
     if (status.get('in_reply_to_id', null) === null) {
       replyIcon = 'reply';
+      replyIconComponent = ReplyIcon;
       replyTitle = intl.formatMessage(messages.reply);
     } else {
       replyIcon = 'reply-all';
+      replyIconComponent = ReplyAllIcon;
       replyTitle = intl.formatMessage(messages.replyAll);
     }
 
@@ -436,7 +450,7 @@ class StatusActionBar extends ImmutablePureComponent {
     }
 
     const filterButton = this.props.onFilter && (
-      <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
+      <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' iconComponent={VisibilityIcon} onClick={this.handleHideClick} />
     );
 
     const emojiReactionPolicy = account.getIn(['other_settings', 'emoji_reaction_policy']) || 'allow';
@@ -446,33 +460,33 @@ class StatusActionBar extends ImmutablePureComponent {
     const outside = emojiReactionPolicy !== 'outside_only' || (relationship && (relationship.get('following') || relationship.get('followed_by')));
     const denyFromAll = emojiReactionPolicy !== 'block' && emojiReactionPolicy !== 'block';
     const emojiPickerButton = (
-      <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.emojiReaction)} icon='smile-o' onClick={this.handleEmojiPickInnerButton} />
+      <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.emojiReaction)} icon='smile-o' iconComponent={EmojiReactionIcon} onClick={this.handleEmojiPickInnerButton} />
     );
     const emojiPickerDropdown = enableEmojiReaction && denyFromAll && (writtenByMe || (following && followed && mutual && outside)) && (
       <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={emojiPickerButton} />
     );
 
+    const isReply = status.get('in_reply_to_account_id') === status.getIn(['account', 'id']);
+
     return (
       <div className='status__action-bar'>
-        <IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
-        <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
-        <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
-        <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
+        <IconButton className='status__action-bar__button' title={replyTitle} icon={isReply ? 'reply' : replyIcon} iconComponent={isReply ? ReplyIcon : replyIconComponent} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
+        <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={RepeatIcon} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
+        <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
+        <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
         {emojiPickerDropdown}
 
         {filterButton}
 
-        <div className='status__action-bar__dropdown'>
-          <DropdownMenuContainer
-            scrollKey={scrollKey}
-            status={status}
-            items={menu}
-            icon='ellipsis-h'
-            size={18}
-            direction='right'
-            title={intl.formatMessage(messages.more)}
-          />
-        </div>
+        <DropdownMenuContainer
+          scrollKey={scrollKey}
+          status={status}
+          items={menu}
+          icon='ellipsis-h'
+          iconComponent={MoreHorizIcon}
+          direction='right'
+          title={intl.formatMessage(messages.more)}
+        />
       </div>
     );
   }

app/javascript/mastodon/components/status_content.jsx

@@ -9,6 +9,8 @@ import { Link, withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
+import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
+
 import { Icon }  from 'mastodon/components/icon';
 import PollContainer from 'mastodon/containers/poll_container';
 import { autoPlayGif, languages as preloadedLanguages } from 'mastodon/initial_state';
@@ -262,7 +264,7 @@ class StatusContent extends PureComponent {
 
     const readMoreButton = renderReadMore && (
       <button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'>
-        <FormattedMessage id='status.read_more' defaultMessage='Read more' /><Icon id='angle-right' fixedWidth />
+        <FormattedMessage id='status.read_more' defaultMessage='Read more' /><Icon id='angle-right' icon={ChevronRightIcon} />
       </button>
     );
 

app/javascript/mastodon/components/verified_badge.tsx

@@ -1,3 +1,5 @@
+import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
+
 import { Icon } from './icon';
 
 const domParser = new DOMParser();
@@ -21,7 +23,7 @@ interface Props {
 }
 export const VerifiedBadge: React.FC<Props> = ({ link }) => (
   <span className='verified-badge'>
-    <Icon id='check' className='verified-badge__mark' />
+    <Icon id='check' icon={CheckIcon} className='verified-badge__mark' />
     <span dangerouslySetInnerHTML={stripRelMe(link)} />
   </span>
 );

app/javascript/mastodon/components/visibility_icon.tsx

@@ -0,0 +1,129 @@
+import { defineMessages, useIntl } from 'react-intl';
+
+import { ReactComponent as CircleIcon } from '@material-symbols/svg-600/outlined/account_circle.svg';
+import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
+import { ReactComponent as PublicUnlistedIcon } from '@material-symbols/svg-600/outlined/cloud.svg';
+import { ReactComponent as MutualIcon } from '@material-symbols/svg-600/outlined/compare_arrows.svg';
+import { ReactComponent as LoginIcon } from '@material-symbols/svg-600/outlined/key.svg';
+import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
+import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
+import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import { ReactComponent as LimitedIcon } from '@material-symbols/svg-600/outlined/shield.svg';
+import { ReactComponent as PersonalIcon } from '@material-symbols/svg-600/outlined/sticky_note.svg';
+
+import { Icon } from './icon';
+
+type Visibility =
+  | 'public'
+  | 'unlisted'
+  | 'private'
+  | 'direct'
+  | 'public_unlisted'
+  | 'login'
+  | 'mutual'
+  | 'circle'
+  | 'personal'
+  | 'limited';
+
+const messages = defineMessages({
+  public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  public_unlisted_short: {
+    id: 'privacy.public_unlisted.short',
+    defaultMessage: 'Public unlisted',
+  },
+  login_short: { id: 'privacy.login.short', defaultMessage: 'Login only' },
+  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+  private_short: {
+    id: 'privacy.private.short',
+    defaultMessage: 'Followers only',
+  },
+  limited_short: {
+    id: 'privacy.limited.short',
+    defaultMessage: 'Limited menbers only',
+  },
+  mutual_short: {
+    id: 'privacy.mutual.short',
+    defaultMessage: 'Mutual followers only',
+  },
+  circle_short: {
+    id: 'privacy.circle.short',
+    defaultMessage: 'Circle members only',
+  },
+  personal_short: {
+    id: 'privacy.personal.short',
+    defaultMessage: 'Yourself only',
+  },
+  direct_short: {
+    id: 'privacy.direct.short',
+    defaultMessage: 'Mentioned people only',
+  },
+});
+
+export const VisibilityIcon: React.FC<{ visibility: Visibility }> = ({
+  visibility,
+}) => {
+  const intl = useIntl();
+
+  const visibilityIconInfo = {
+    public: {
+      icon: 'globe',
+      iconComponent: PublicIcon,
+      text: intl.formatMessage(messages.public_short),
+    },
+    public_unlisted: {
+      icon: 'cloud',
+      iconComponent: PublicUnlistedIcon,
+      text: intl.formatMessage(messages.public_unlisted_short),
+    },
+    login: {
+      icon: 'key',
+      iconComponent: LoginIcon,
+      text: intl.formatMessage(messages.login_short),
+    },
+    unlisted: {
+      icon: 'unlock',
+      iconComponent: LockOpenIcon,
+      text: intl.formatMessage(messages.unlisted_short),
+    },
+    private: {
+      icon: 'lock',
+      iconComponent: LockIcon,
+      text: intl.formatMessage(messages.private_short),
+    },
+    limited: {
+      icon: 'get-pocket',
+      iconComponent: LimitedIcon,
+      text: intl.formatMessage(messages.limited_short),
+    },
+    mutual: {
+      icon: 'exchange',
+      iconComponent: MutualIcon,
+      text: intl.formatMessage(messages.mutual_short),
+    },
+    circle: {
+      icon: 'user-circle',
+      iconComponent: CircleIcon,
+      text: intl.formatMessage(messages.circle_short),
+    },
+    personal: {
+      icon: 'sticky-note-o',
+      iconComponent: PersonalIcon,
+      text: intl.formatMessage(messages.personal_short),
+    },
+    direct: {
+      icon: 'at',
+      iconComponent: AlternateEmailIcon,
+      text: intl.formatMessage(messages.direct_short),
+    },
+  };
+
+  const visibilityIcon = visibilityIconInfo[visibility];
+
+  return (
+    <Icon
+      id={visibilityIcon.icon}
+      icon={visibilityIcon.iconComponent}
+      title={visibilityIcon.text}
+    />
+  );
+};