feat: icon type circular label

react/features/base/label/components/AbstractCircularLabel.js

 
 export type Props = {
 
+    /**
+     * An SVG icon to be rendered as the content of the label.
+     */
+    icon: Component<any>,
+
     /**
      * String or component that will be rendered as the label itself.
      */
-    label: string | React$Node
+    label: string
 };
 
 /**

react/features/base/label/components/CircularLabel.native.js

 import React from 'react';
 import { Animated, Text } from 'react-native';
 
+import Icon from '../../icons/components/Icon';
 import { combineStyles, type StyleType } from '../../styles';
 
 import AbstractCircularLabel, {
      * @inheritdoc
      */
     render() {
-        const { status, label, style } = this.props;
+        const { icon, label, status, style } = this.props;
 
         let extraStyle = null;
 
             break;
         }
 
+        const labelComponent = icon
+            ? (
+                <Icon
+                    src = { icon }
+                    style = { styles.indicatorIcon } />
+            ) : (
+                <Text style = { styles.indicatorText }>
+                    { label }
+                </Text>
+            );
+
         return (
             <Animated.View
                 style = { [
                     combineStyles(styles.indicatorContainer, style),
                     extraStyle
                 ] }>
-                <Text style = { styles.indicatorText }>
-                    { label }
-                </Text>
+                { labelComponent }
             </Animated.View>
         );
     }

react/features/base/label/components/CircularLabel.web.js

 
 import React from 'react';
 
+import Icon from '../../icons/components/Icon';
+
 import AbstractCircularLabel, {
     type Props as AbstractProps
 } from './AbstractCircularLabel';
     render() {
         const {
             className,
+            icon,
             id,
             label
         } = this.props;
 
+        const labelComponent = icon
+            ? (
+                <Icon
+                    src = { icon } />
+            ) : label;
+
         return (
             <div
                 className = { `circular-label ${className}` }
                 id = { id }>
-                { label }
+                { labelComponent }
             </div>
         );
     }

react/features/base/label/components/styles.js

 // @flow
 
-import { BoxModel, ColorPalette, createStyleSheet } from '../../styles';
+import { BoxModel, ColorPalette } from '../../styles';
 
 /**
  * The default color of the {@code Label} and {@code ExpandedLabel}.
 /**
  * The styles of the native base/label feature.
  */
-export default createStyleSheet({
+export default {
 
     expandedLabelArrow: {
         backgroundColor: ColorPalette.blue,
         width: LABEL_SIZE
     },
 
+    indicatorIcon: {
+        fontSize: 24
+    },
+
     indicatorText: {
         color: ColorPalette.white,
-        fontSize: 12
+        fontSize: 10
     },
 
     labelOff: {
         opacity: 0.3
     }
-});
+};

react/features/e2ee/components/E2EELabel.js

 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
-import { Icon, IconE2EE } from '../../base/icons';
+import { IconE2EE } from '../../base/icons';
 import { CircularLabel } from '../../base/label';
 import { connect } from '../../base/redux';
 
             return null;
         }
 
-        // eslint-disable-next-line react/jsx-max-props-per-line
-        const icon = <Icon size = { 22 } src = { IconE2EE } />;
-
         return (
             <Tooltip
                 content = { this.props.t('e2ee.labelToolTip') }
                 position = { 'left' }>
                 <CircularLabel
                     className = 'e2ee'
-                    label = { icon } />
+                    icon = { IconE2EE } />
             </Tooltip>
         );
     }