fix(ui) Fix new icons issues (#12545)

react/features/base/ui/components/web/Button.tsx

@@ -143,7 +143,7 @@ const useStyles = makeStyles()((theme: Theme) => {
         },
 
         iconButton: {
-            padding: '10px'
+            padding: theme.spacing(2)
         },
 
         textWithIcon: {
@@ -166,7 +166,7 @@ const useStyles = makeStyles()((theme: Theme) => {
             ...withPixelLineHeight(theme.typography.bodyShortBoldLarge),
 
             '&.iconButton': {
-                padding: '14px'
+                padding: '12px'
             }
         },
 

react/features/conference/components/web/InsecureRoomNameLabel.js

@@ -4,7 +4,7 @@ import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
 
 import { translate } from '../../../base/i18n';
-import { IconWarning } from '../../../base/icons';
+import { IconExclamationTriangle } from '../../../base/icons/svg';
 import { Label } from '../../../base/label';
 import { COLORS } from '../../../base/label/constants';
 import { connect } from '../../../base/redux';
@@ -26,7 +26,7 @@ class InsecureRoomNameLabel extends AbstractInsecureRoomNameLabel {
                 position = 'bottom'>
                 <Label
                     color = { COLORS.red }
-                    icon = { IconWarning } />
+                    icon = { IconExclamationTriangle } />
             </Tooltip>
         );
     }

react/features/filmstrip/components/web/ThumbnailBottomIndicators.tsx

@@ -52,10 +52,6 @@ const useStyles = makeStyles()(() => {
             '&>div': {
                 display: 'flex',
                 overflow: 'hidden'
-            },
-
-            '&:first-child': {
-                marginLeft: '6px'
             }
         }
     };

react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx

@@ -118,8 +118,8 @@ const styles = () => {
             borderRadius: '4px',
 
             '& svg': {
-                width: '20px',
-                height: '20px'
+                width: '18px',
+                height: '18px'
             }
         },
 

react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx

@@ -120,8 +120,8 @@ const styles = () => {
             borderRadius: '4px',
 
             '& svg': {
-                width: '20px',
-                height: '20px'
+                width: '18px',
+                height: '18px'
             }
         },