feat(icons): add new recording button icon (#2834)

* feat(icons): add new recording button icon

* feat(toolbar): show different rec/streaming icon

css/_font.scss

@@ -195,3 +195,6 @@
 .icon-SD:before {
   content: "\e929";
 }
+.icon-camera-take-picture:before {
+  content: "\e92a";
+}

css/_toolbars.scss

@@ -68,15 +68,6 @@
         justify-content: flex-end;
     }
 
-    /**
-     * Overwrite font-awesome styling to match jitsi-icon styling.
-     */
-    .fa {
-        height: 24px;
-        margin-left: 2px;
-        width: 24px;
-    }
-
     i {
         border-radius: 5px;
         cursor: pointer;

fonts/jitsi.svg

@@ -67,4 +67,5 @@
 <glyph unicode="&#xe927;" glyph-name="HD" d="M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM481.359 384v255.823h-54.273v-103.18h-116.813v103.18h-54.273v-255.823h54.273v106.903h116.813v-106.903h54.273zM544.258 640v-256h102.077c77.636 0 121.665 46.626 121.665 129.773 0 80.133-44.569 126.227-121.665 126.227h-102.077zM598.531 594.26v-164.521h39.177c47.983 0 74.94 29.075 74.94 83.147 0 51.767-27.855 81.374-74.94 81.374h-39.177z" />
 <glyph unicode="&#xe928;" glyph-name="LD" d="M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM472.4 433.325h-112.35v206.5h-52.85v-252.525h165.2v46.025zM520.35 640v-252.7h99.4c75.6 0 118.475 46.025 118.475 128.1 0 79.1-43.4 124.6-118.475 124.6h-99.4zM573.2 594.85v-162.4h38.15c46.725 0 72.975 28.7 72.975 82.075 0 51.1-27.125 80.325-72.975 80.325h-38.15z" />
 <glyph unicode="&#xe929;" glyph-name="SD" d="M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM281.6 451.175c1.925-47.075 40.95-76.65 101.15-76.65 63.35 0 102.375 31.15 102.375 82.075 0 39.2-21.875 61.075-72.625 71.75l-30.45 6.475c-29.575 6.3-41.65 15.225-41.65 30.8 0 19.25 17.5 31.5 43.925 31.5 25.55 0 44.1-13.3 46.55-33.25h49.7c-1.575 44.975-40.95 76.125-96.6 76.125-58.275 0-96.6-31.325-96.6-78.925 0-38.5 22.575-62.475 68.6-72.1l32.9-7c30.975-6.65 43.575-15.925 43.575-32.025 0-19.075-19.425-32.375-46.9-32.375-29.75 0-50.4 13.125-52.85 33.6h-51.1zM535 633.7v-252.7h99.4c75.6 0 118.475 46.025 118.475 128.1 0 79.1-43.4 124.6-118.475 124.6h-99.4zM587.85 588.55v-162.4h38.15c46.725 0 72.975 28.7 72.975 82.075 0 51.1-27.125 80.325-72.975 80.325h-38.15z" />
+<glyph unicode="&#xe92a;" glyph-name="camera-take-picture" d="M725.333 512c0-117.821-95.513-213.333-213.333-213.333s-213.333 95.513-213.333 213.333c0 117.821 95.513 213.333 213.333 213.333s213.333-95.513 213.333-213.333zM512 256c141.385 0 256 114.615 256 256s-114.615 256-256 256v0c-141.385 0-256-114.615-256-256s114.615-256 256-256v0zM512 213.333c-164.949 0-298.667 133.718-298.667 298.667s133.718 298.667 298.667 298.667v0c164.949 0 298.667-133.718 298.667-298.667s-133.718-298.667-298.667-298.667v0z" />
 </font></defs></svg>

react/features/toolbox/components/Toolbox.web.js

@@ -1062,13 +1062,15 @@ class Toolbox extends Component<Props, State> {
             return null;
         }
 
-        let translationKey;
+        let iconClass, translationKey;
 
         if (_recordingType === RECORDING_TYPES.JIBRI) {
+            iconClass = 'icon-public';
             translationKey = _isRecording
                 ? 'dialog.stopLiveStreaming'
                 : 'dialog.startLiveStreaming';
         } else {
+            iconClass = 'icon-camera-take-picture';
             translationKey = _isRecording
                 ? 'dialog.stopRecording'
                 : 'dialog.startRecording';
@@ -1077,7 +1079,7 @@ class Toolbox extends Component<Props, State> {
         return (
             <OverflowMenuItem
                 accessibilityLabel = 'Record'
-                icon = 'fa fa-play-circle'
+                icon = { iconClass }
                 key = 'recording'
                 onClick = { this._onToolbarToggleRecording }
                 text = { t(translationKey) } />