ref(design) Update icons (#12489)

Remove unused icons
Remove fill none from icons
Rename some icons

css/_base.scss

@@ -182,3 +182,8 @@ form {
     background: rgba(0, 0, 0, .5);
     border-radius: 4px;
 }
+
+/* Necessary for the new icons to work properly. */
+.jitsi-icon svg path {
+    fill: inherit !important;
+}

css/_settings-button.scss

@@ -25,7 +25,7 @@
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
     border-radius: 3px;
     cursor: pointer;
-    padding: 4px;
+    padding: 1px;
     position: absolute;
     right: -4px;
     top: -3px;

react/features/always-on-top/AudioMuteButton.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 
 // We need to reference these files directly to avoid loading things that are not available
 // in this environment (e.g. JitsiMeetJS or interfaceConfig)
-import { IconMicrophoneEmpty, IconMicrophoneEmptySlash } from '../base/icons';
+import { IconMic, IconMicSlash } from '../base/icons';
 import type { Props } from '../base/toolbox/components/AbstractButton';
 
 import ToolbarButton from './ToolbarButton';
@@ -31,8 +31,8 @@ type State = {
  * Stateless "mute/unmute audio" button for the Always-on-Top windows.
  */
 export default class AudioMuteButton extends Component<Props, State> {
-    icon = IconMicrophoneEmpty;
-    toggledIcon = IconMicrophoneEmptySlash;
+    icon = IconMic;
+    toggledIcon = IconMicSlash;
     accessibilityLabel = 'Audio mute';
 
     /**

react/features/always-on-top/VideoMuteButton.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 
 // We need to reference these files directly to avoid loading things that are not available
 // in this environment (e.g. JitsiMeetJS or interfaceConfig)
-import { IconCameraEmpty, IconCameraEmptyDisabled } from '../base/icons';
+import { IconVideo, IconVideoOff } from '../base/icons';
 import type { Props } from '../base/toolbox/components/AbstractButton';
 
 import ToolbarButton from './ToolbarButton';
@@ -31,8 +31,8 @@ type State = {
  */
 export default class VideoMuteButton extends Component<Props, State> {
 
-    icon = IconCameraEmpty;
-    toggledIcon = IconCameraEmptyDisabled;
+    icon = IconVideo;
+    toggledIcon = IconVideoOff;
     accessibilityLabel = 'Video mute';
 
     /**

react/features/base/buttons/CopyButton.web.tsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles()((theme: Theme) => {
                 background: theme.palette.success02
             },
 
-            '& > div > svg > path': {
+            '& > div > svg': {
                 fill: theme.palette.icon01
             }
         },

react/features/base/dialog/components/web/ModalHeader.tsx

@@ -15,7 +15,7 @@ import React from 'react';
 import { WithTranslation } from 'react-i18next';
 
 import { translate } from '../../../i18n/functions';
-import { IconClose } from '../../../icons/svg';
+import { IconCloseLarge } from '../../../icons/svg';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 import Button from '../../../ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../ui/constants';
@@ -159,7 +159,7 @@ class ModalHeader extends React.Component<IProps> {
                 {
                     !hideCloseIconButton && <Button
                         accessibilityLabel = { t('dialog.close') }
-                        icon = { IconClose }
+                        icon = { IconCloseLarge }
                         id = 'modal-header-close-button'
                         onClick = { onClose }
                         size = 'large'