Change icons in web UI (#27385)

Co-authored-by: Renaud Chaput <renchap@gmail.com>

app/javascript/mastodon/components/visibility_icon.tsx

@@ -0,0 +1,62 @@
+import { defineMessages, useIntl } from 'react-intl';
+
+import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
+import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
+import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
+import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+
+import { Icon } from './icon';
+
+type Visibility = 'public' | 'unlisted' | 'private' | 'direct';
+
+const messages = defineMessages({
+  public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+  private_short: {
+    id: 'privacy.private.short',
+    defaultMessage: 'Followers 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),
+    },
+    unlisted: {
+      icon: 'unlock',
+      iconComponent: LockOpenIcon,
+      text: intl.formatMessage(messages.unlisted_short),
+    },
+    private: {
+      icon: 'lock',
+      iconComponent: LockIcon,
+      text: intl.formatMessage(messages.private_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}
+    />
+  );
+};