diff --git a/react/features/base/icons/svg/host.svg b/react/features/base/icons/svg/host.svg
deleted file mode 100644
index 40b7cf4c7..000000000
--- a/react/features/base/icons/svg/host.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
diff --git a/react/features/base/icons/svg/index.ts b/react/features/base/icons/svg/index.ts
index d5315d5ca..01aa386cd 100644
--- a/react/features/base/icons/svg/index.ts
+++ b/react/features/base/icons/svg/index.ts
@@ -20,7 +20,6 @@ export { default as IconCode } from './code.svg';
export { default as IconConnection } from './connection.svg';
export { default as IconConnectionInactive } from './ninja.svg';
export { default as IconCopy } from './copy.svg';
-export { default as IconCrown } from './host.svg';
export { default as IconDeviceHeadphone } from './headset.svg';
export { default as IconDotsHorizontal } from './dots-horizontal.svg';
export { default as IconDownload } from './download.svg';
@@ -51,6 +50,7 @@ export { default as IconMessage } from './message.svg';
export { default as IconMeter } from './meter.svg';
export { default as IconMic } from './mic.svg';
export { default as IconMicSlash } from './mic-slash.svg';
+export { default as IconModerator } from './moderator.svg';
export { default as IconNoiseSuppressionOff } from './noise-suppression-off.svg';
export { default as IconNoiseSuppressionOn } from './noise-suppression-on.svg';
export { default as IconArrowRight } from './arrow-right.svg';
diff --git a/react/features/base/icons/svg/moderator.svg b/react/features/base/icons/svg/moderator.svg
new file mode 100644
index 000000000..617804179
--- /dev/null
+++ b/react/features/base/icons/svg/moderator.svg
@@ -0,0 +1,3 @@
+
diff --git a/react/features/filmstrip/components/native/ModeratorIndicator.js b/react/features/filmstrip/components/native/ModeratorIndicator.js
deleted file mode 100644
index bd7e4308b..000000000
--- a/react/features/filmstrip/components/native/ModeratorIndicator.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// @flow
-
-import React, { Component } from 'react';
-
-import { IconCrown } from '../../../base/icons';
-import { BaseIndicator } from '../../../base/react';
-
-/**
- * Thumbnail badge showing that the participant is a conference moderator.
- */
-export default class ModeratorIndicator extends Component<{}> {
- /**
- * Implements React's {@link Component#render()}.
- *
- * @inheritdoc
- */
- render() {
- return (
-
- );
- }
-}
diff --git a/react/features/filmstrip/components/native/ModeratorIndicator.tsx b/react/features/filmstrip/components/native/ModeratorIndicator.tsx
new file mode 100644
index 000000000..f7ba32859
--- /dev/null
+++ b/react/features/filmstrip/components/native/ModeratorIndicator.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { IconModerator } from '../../../base/icons';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
+import { BaseIndicator } from '../../../base/react';
+
+/**
+ * Thumbnail badge showing that the participant is a conference moderator.
+ *
+ * @returns {JSX.Element}
+ */
+export default function MoeratorIndicator(): JSX.Element {
+ return (
+
+ );
+}
diff --git a/react/features/filmstrip/components/web/ModeratorIndicator.js b/react/features/filmstrip/components/web/ModeratorIndicator.tsx
similarity index 66%
rename from react/features/filmstrip/components/web/ModeratorIndicator.js
rename to react/features/filmstrip/components/web/ModeratorIndicator.tsx
index bbf01f0ed..ce270b084 100644
--- a/react/features/filmstrip/components/web/ModeratorIndicator.js
+++ b/react/features/filmstrip/components/web/ModeratorIndicator.tsx
@@ -1,8 +1,8 @@
-/* @flow */
-
import React from 'react';
-import { IconCrown } from '../../../base/icons';
+import { IconModerator } from '../../../base/icons';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
import { BaseIndicator } from '../../../base/react';
/**
@@ -13,17 +13,17 @@ type Props = {
/**
* From which side of the indicator the tooltip should appear from.
*/
- tooltipPosition: string
+ tooltipPosition: string;
};
/**
* React {@code Component} for showing a moderator icon with a tooltip.
*
- * @returns {Component}
+ * @returns {JSX.Element}
*/
-const ModeratorIndicator = ({ tooltipPosition }: Props) => (
+const ModeratorIndicator = ({ tooltipPosition }: Props): JSX.Element => (
diff --git a/react/features/video-menu/components/AbstractGrantModeratorButton.js b/react/features/video-menu/components/AbstractGrantModeratorButton.js
index 002f9a72a..b48ae7fe2 100644
--- a/react/features/video-menu/components/AbstractGrantModeratorButton.js
+++ b/react/features/video-menu/components/AbstractGrantModeratorButton.js
@@ -1,7 +1,7 @@
// @flow
import { openDialog } from '../../base/dialog';
-import { IconCrown } from '../../base/icons';
+import { IconModerator } from '../../base/icons';
import {
PARTICIPANT_ROLE,
getLocalParticipant,
@@ -35,7 +35,7 @@ export type Props = AbstractButtonProps & {
*/
export default class AbstractGrantModeratorButton extends AbstractButton {
accessibilityLabel = 'toolbar.accessibilityLabel.grantModerator';
- icon = IconCrown;
+ icon = IconModerator;
label = 'videothumbnail.grantModerator';
/**
diff --git a/react/features/video-menu/components/web/GrantModeratorButton.js b/react/features/video-menu/components/web/GrantModeratorButton.js
index 3174c34a6..d91b0e0ef 100644
--- a/react/features/video-menu/components/web/GrantModeratorButton.js
+++ b/react/features/video-menu/components/web/GrantModeratorButton.js
@@ -3,7 +3,7 @@
import React from 'react';
import { translate } from '../../../base/i18n';
-import { IconCrown } from '../../../base/icons';
+import { IconModerator } from '../../../base/icons';
import { connect } from '../../../base/redux';
import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem';
import AbstractGrantModeratorButton, {
@@ -46,7 +46,7 @@ class GrantModeratorButton extends AbstractGrantModeratorButton {