From aaf2f428e6d7a3b21e4fae7f6fec158cf53d3a2e Mon Sep 17 00:00:00 2001
From: virtuacoplenny <leonard.h.kim@gmail.com>
Date: Sun, 29 Apr 2018 21:30:07 -0700
Subject: [PATCH] feat(recording): new label for live streaming (#2890)

---
 css/_font.scss                                |   3 +
 css/modals/video-quality/_video-quality.scss  |  14 +-
 fonts/jitsi.eot                               | Bin 11156 -> 11332 bytes
 fonts/jitsi.svg                               |   1 +
 fonts/jitsi.ttf                               | Bin 11000 -> 11176 bytes
 fonts/jitsi.woff                              | Bin 11076 -> 11252 bytes
 fonts/selection.json                          | 401 ++++++++++--------
 react/features/base/font-icons/jitsi.json     | 401 ++++++++++--------
 .../components/RecordingLabel.web.js          |  29 +-
 9 files changed, 469 insertions(+), 380 deletions(-)

diff --git a/css/_font.scss b/css/_font.scss
index aea088b4f9..0339740cf5 100644
--- a/css/_font.scss
+++ b/css/_font.scss
@@ -201,3 +201,6 @@
 .icon-rec:before {
   content: "\e92b";
 }
+.icon-live:before {
+  content: "\e92c";
+}
diff --git a/css/modals/video-quality/_video-quality.scss b/css/modals/video-quality/_video-quality.scss
index b4f7c83acd..0b84a1d373 100644
--- a/css/modals/video-quality/_video-quality.scss
+++ b/css/modals/video-quality/_video-quality.scss
@@ -174,22 +174,30 @@
 
     .recording-icon,
     .recording-icon i {
-        color: rgb(255, 86, 48);
         line-height: $videoStateIndicatorSize;
         font-size: $videoStateIndicatorSize;
         opacity: 0.9;
         position: relative;
     }
 
+    .icon-rec {
+        color: #FF5630;
+    }
+
+    .icon-live {
+        color: #0065FF;
+    }
+
     .recording-icon-background {
         background: white;
-        height: 25%;
+        border-radius: 50%;
+        height: calc(#{$videoStateIndicatorSize} - 1px);
         left: 50%;
         opacity: 0.9;
         position: absolute;
         top: 50%;
         transform: translate(-50%, -50%);
-        width: 80%;
+        width: calc(#{$videoStateIndicatorSize} - 1px);
     }
 
     #recordingLabelText {
diff --git a/fonts/jitsi.eot b/fonts/jitsi.eot
index cf4424f189bd3e93bdf3b42c450ee27520bbfeac..69b78c82b981a8a92ce37b1232143df7146f14da 100755
GIT binary patch
delta 380
zcmbOdek6j;MTdc5h4w@?GnUTlC!;1h<O|+rU|`q-#0kl{i3RTA-_j=@kg2Z`xNX9~
z!1#lKK}{edH8DkS%9E!I3>q9jb!Hhr0ge=wT|mAAkgt-FTT;QQC4B|RPXX%T$;nSn
zR4UhQU|`TJ0LpjdCRP+M_%R#?@`2_tDC8yPrrw=UyPSbRO9H4quOPp;gn=0-!=T*(
zl4oFMnH<gNz^F5M4r4Z>&Snm#kE+6~AbA!bWRPZ1WKd<$Ww4qope`rRsBEe%YHSQ5
z%$3=d)s@9nl}&+M5EeByot&pGnfC8Mf$7pz({CY`mdutmVT@@-IXOkkmosQ+bjQVJ
zWyQvIYXAX)&A9ITUm!Sm@UO0&rnTN*U7#z0wgYk0$?Ki*{5D@1xPcA<g6o|AUt#oQ
e84Ytr=glD+9E_7AG`l#2Il#J{H^0(c#Rve}Wo3B)

delta 252
zcmX>SF(sUBiZ%no53Px8W-NEpnuRAi<O|+nU|`q-#0kl{i3RTA-_j-?kf~q1!*>Y-
z1LF?{2Gx{|)Wj6Qi3cV!FsR1>)tO}g1vpYzb^`fRfP9sV+>#1LE$J&j{tloXj-34D
zM5S_x3I+y^13>w<+{B6k249B53=EncK)ym=Vs7f)3AM|C{0yM_yn_7V5(Z|V41?AU
zkURr3%j9TA2S)A5a~QK3wKsDxeN<Iu1j+!haC6$-cz&C&4BRXr4Gh=W_nwB)lTT=v
aGdgY3<Y1i4qt(U%6b5N>+B{2Z6(ayz972x(

diff --git a/fonts/jitsi.svg b/fonts/jitsi.svg
index 318f1d0733..819949dcaa 100755
--- a/fonts/jitsi.svg
+++ b/fonts/jitsi.svg
@@ -69,4 +69,5 @@
 <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" />
 <glyph unicode="&#xe92b;" glyph-name="rec" 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-512zM581.333 433.782h-110.595v59.233h104.338v40.332h-104.338v56.87h110.595v43.539h-161.665v-243.512h161.665v43.539zM738.771 384c58.849 0 101.802 36.282 106.029 88.933h-49.717c-4.904-26.832-26.888-44.045-56.143-44.045-38.556 0-62.4 31.895-62.4 83.196s23.844 83.027 62.231 83.027c29.086 0 51.239-18.394 56.143-46.407h49.717c-3.72 52.989-48.026 91.296-105.86 91.296-70.855 0-114.485-48.77-114.485-127.916 0-79.314 43.798-128.084 114.485-128.084zM230.27 478.502h41.769l45.489-88.258h57.834l-51.408 96.19c28.072 11.138 44.306 38.138 44.306 69.189 0 48.432-32.976 78.133-86.582 78.133h-102.478v-243.512h51.070v88.258zM230.27 592.58v-74.927h44.813c25.704 0 40.754 13.838 40.754 37.295 0 23.119-15.896 37.632-41.262 37.632h-44.306z" />
+<glyph unicode="&#xe92c;" glyph-name="live" 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-512zM298.225 430.025h-112.35v206.5h-52.85v-252.525h165.2v46.025zM399.025 384v252.525h-52.85v-252.525h52.85zM591.525 384l84.175 252.525h-56.875l-56.35-193.025h-3.15l-57.4 193.025h-59.675l85.4-252.525h63.875zM886.050 429.15h-114.45v61.425h107.975v41.825h-107.975v58.975h114.45v45.15h-167.3v-252.525h167.3v45.15z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/fonts/jitsi.ttf b/fonts/jitsi.ttf
index 739cd85b126c5a52a8b1f22a06322236dee55ec5..fd52ede752641f877d80dd5a8c82283bbfd8de07 100755
GIT binary patch
delta 374
zcmewnx+1)ufsuiMft#U$ftkU;KUm+0?;_i6pvWE|PDsv8EN~D1md?PyC<EkQNlz>;
z0MY_L{s$n<k)BhTRwHoR1jzrvz@R3Ok(!tyIOWMx1_lidpuAZIP=F(aWfzd|0OYG=
z<d#&hYDr%K@>76%cyjWSEfbZ>wHp{1G(iS;<R(@WF!(VX2J(RhGAQIF=BD1AP`jLg
zK}!OtA+I36xCH1>AkglZxWk=MXA)yJqt50W#*eCktRP_)AY_ncP-IYL(4DNKtRT;*
zY^p43Yz!jImD!cmmBm$+O@Ukx7Bx1VET|$W{_jA6>C#lwZy}bJ%$7D`jA=zVIYrBt
zPqtE#GF^B6FAy9&_*d6X(^~JZF3=S~Yk)ZF<n_*Yew(ih+&~+F;5w)OR~S9HLEW6u
adGii+4#vrQG`cv1Il#J{H~VR>Vgvx#DqocV

delta 270
zcmZ1x{v))WfsuiMft#U$ftkU;KUm+0?;_hRpvWE|PDsv8EN~D1md3!qC<EkQNlz>;
z0MY_L{s$n<k)BhTws?o{5+MHv1A}TxMrvY;;KTzH85q=KfbwP;Kmm>vmYqQU6d+$E
zBe$f2QA_#?kiP?{ha)FH*)mb7T%v-3LE`{WL0fKOMFE2^!(j#nO%EVnAulmE_3nh)
z<v@N0P(xlpesKxVp+KN@W8w~XM(s(A*^Jtoa~MCWDuet1#KO&KcjNhOzA|vLfYdQu
kXWx4oMo-q!FlThyoT9<OIJrQxjRPnS(&e=IpXMq?0O|rnN&o-=

diff --git a/fonts/jitsi.woff b/fonts/jitsi.woff
index 98ab92048809201f950583353b27d5089db84aa8..d45befc404d80227c0c5c4bcd256a5440eb3c9cb 100755
GIT binary patch
delta 431
zcmX>S_9a}T+~3WOfsp|Sw7)QLgXtBM1(+lz>Im20PR>m%U|?X(0196LVfXNF>FJ5Z
zKrtp8AfE$@1=4dW(|}?w3=C=lAY3DG+ax13F@=FaBLt|%41@)zJb9V{6a<R(0Qo8)
z%#p&fD<ik00w}ftXb%qvvua6S$;nR!s<YGF160%j!b;`Z4Y`RGK#R42mM|!Qu^+?X
zyu{p8pcv31#yk+dJE3-YL4I)w&^K2m{_$tjne4-u&8V|^2jfRoVOF3n1{NS>kY-S1
zP-W0%u$p{8O-`Os*;HB7*ce2ZE3+%BD~qctn*zBYENW~zSx#Lt?cad{)1|4V-$E=c
znJsO?7}JV!a*CEOXVB2-j*HF8ijC{m00IP?aozd9KydKjUtK#*YrVg^K-U3n2jZxc
x*E{3+ZN4&a104bc*E#*a!sy9o)Xf>4H?wGPFiz&s?BWpS0PAwzJWF#GBLHk@YjFSo

delta 304
zcmewoek4q!+~3WOfsp|Sv|SjuLA2J7$pTCg6Lo~^Zzbm@7BDa{W&lO6fUtY`x3u)c
zVxSn44Uo?P#RBO$m1#gR7X}8^6cAp#!*@wWY9f%Wz5=Mm41@(I9+;Q`6a<Pr0P<Bp
zm?MQ{XGU&G1p|Wy3(y{*d5j#4TGCf?@{@t;>@<0RirPR}sa&EWH?aa}vE~#YUjdAL
z84l+q=B5J0wg5Hef$-f4waW|gi%WpMQJMJ1pHX|V4`Vi?_U0XoA61nZfx3WLxH;`^
uJipCX25z98KyaOX?`ar4xkAI7(P{Gr4GzZ1do<fX9t7!f+U%vZiV*<kr$-_H

diff --git a/fonts/selection.json b/fonts/selection.json
index d4a7fdf181..9ac1ba2b33 100755
--- a/fonts/selection.json
+++ b/fonts/selection.json
@@ -1,6 +1,35 @@
 {
   "IcoMoonType": "selection",
   "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M512 1024c-282.77 0-512-229.23-512-512s229.23-512 512-512c282.77 0 512 229.23 512 512s-229.23 512-512 512zM298.225 593.975h-112.35v-206.5h-52.85v252.525h165.2v-46.025zM399.025 640v-252.525h-52.85v252.525h52.85zM591.525 640l84.175-252.525h-56.875l-56.35 193.025h-3.15l-57.4-193.025h-59.675l85.4 252.525h63.875zM886.050 594.85h-114.45v-61.425h107.975v-41.825h-107.975v-58.975h114.45v-45.15h-167.3v252.525h167.3v-45.15z"
+        ],
+        "attrs": [
+          {}
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": [
+          "live"
+        ]
+      },
+      "attrs": [
+        {}
+      ],
+      "properties": {
+        "order": 1178,
+        "id": 1000,
+        "name": "live",
+        "prevSize": 32,
+        "code": 59692
+      },
+      "setIdx": 0,
+      "setId": 1,
+      "iconIdx": 0
+    },
     {
       "icon": {
         "paths": [
@@ -20,15 +49,15 @@
         {}
       ],
       "properties": {
-        "order": 1115,
-        "id": 938,
+        "order": 1179,
+        "id": 1001,
         "name": "rec",
         "prevSize": 32,
         "code": 59691
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 0
+      "iconIdx": 1
     },
     {
       "icon": {
@@ -52,15 +81,15 @@
         {}
       ],
       "properties": {
-        "order": 1116,
-        "id": 939,
+        "order": 1180,
+        "id": 1002,
         "name": "camera-take-picture",
         "prevSize": 32,
         "code": 59690
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 1
+      "iconIdx": 2
     },
     {
       "icon": {
@@ -81,15 +110,15 @@
         {}
       ],
       "properties": {
-        "order": 1117,
-        "id": 940,
+        "order": 1181,
+        "id": 1003,
         "name": "AUD",
         "prevSize": 32,
         "code": 59648
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 2
+      "iconIdx": 3
     },
     {
       "icon": {
@@ -110,15 +139,15 @@
         {}
       ],
       "properties": {
-        "order": 1118,
-        "id": 941,
+        "order": 1182,
+        "id": 1004,
         "name": "HD",
         "prevSize": 32,
         "code": 59687
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 3
+      "iconIdx": 4
     },
     {
       "icon": {
@@ -139,15 +168,15 @@
         {}
       ],
       "properties": {
-        "order": 1119,
-        "id": 942,
+        "order": 1183,
+        "id": 1005,
         "name": "LD",
         "prevSize": 32,
         "code": 59688
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 4
+      "iconIdx": 5
     },
     {
       "icon": {
@@ -168,15 +197,15 @@
         {}
       ],
       "properties": {
-        "order": 1120,
-        "id": 943,
+        "order": 1184,
+        "id": 1006,
         "name": "SD",
         "prevSize": 32,
         "code": 59689
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 5
+      "iconIdx": 6
     },
     {
       "icon": {
@@ -197,15 +226,15 @@
         {}
       ],
       "properties": {
-        "order": 1121,
-        "id": 944,
+        "order": 1185,
+        "id": 1007,
         "name": "gsm-bars-black",
         "prevSize": 32,
         "code": 59686
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 6
+      "iconIdx": 7
     },
     {
       "icon": {
@@ -226,15 +255,15 @@
         {}
       ],
       "properties": {
-        "order": 1122,
-        "id": 945,
+        "order": 1186,
+        "id": 1008,
         "name": "info",
         "prevSize": 32,
         "code": 59682
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 7
+      "iconIdx": 8
     },
     {
       "icon": {
@@ -255,15 +284,15 @@
         {}
       ],
       "properties": {
-        "order": 1123,
-        "id": 946,
+        "order": 1187,
+        "id": 1009,
         "name": "mic-camera-combined",
         "prevSize": 32,
         "code": 59651
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 8
+      "iconIdx": 9
     },
     {
       "icon": {
@@ -284,15 +313,15 @@
         {}
       ],
       "properties": {
-        "order": 1124,
-        "id": 947,
+        "order": 1188,
+        "id": 1010,
         "name": "feedback",
         "prevSize": 32,
         "code": 59677
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 9
+      "iconIdx": 10
     },
     {
       "icon": {
@@ -313,15 +342,15 @@
         {}
       ],
       "properties": {
-        "order": 1125,
-        "id": 948,
+        "order": 1189,
+        "id": 1011,
         "name": "toggle-filmstrip",
         "prevSize": 32,
         "code": 59676
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 10
+      "iconIdx": 11
     },
     {
       "icon": {
@@ -338,8 +367,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 949,
-        "order": 1126,
+        "id": 1012,
+        "order": 1190,
         "ligatures": "account_circle",
         "prevSize": 32,
         "code": 59649,
@@ -347,7 +376,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 11
+      "iconIdx": 12
     },
     {
       "icon": {
@@ -364,8 +393,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 950,
-        "order": 1127,
+        "id": 1013,
+        "order": 1191,
         "ligatures": "call_end",
         "prevSize": 32,
         "code": 59653,
@@ -373,7 +402,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 12
+      "iconIdx": 13
     },
     {
       "icon": {
@@ -390,8 +419,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 951,
-        "order": 1128,
+        "id": 1014,
+        "order": 1192,
         "ligatures": "chat_bubble_outline",
         "prevSize": 32,
         "code": 59654,
@@ -399,7 +428,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 13
+      "iconIdx": 14
     },
     {
       "icon": {
@@ -416,8 +445,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 952,
-        "order": 1129,
+        "id": 1015,
+        "order": 1193,
         "ligatures": "cloud_download",
         "prevSize": 32,
         "code": 59650,
@@ -425,7 +454,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 14
+      "iconIdx": 15
     },
     {
       "icon": {
@@ -442,8 +471,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 953,
-        "order": 1130,
+        "id": 1016,
+        "order": 1194,
         "ligatures": "create, edit, mode_edit",
         "prevSize": 32,
         "code": 59655,
@@ -451,7 +480,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 15
+      "iconIdx": 16
     },
     {
       "icon": {
@@ -468,8 +497,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 954,
-        "order": 1131,
+        "id": 1017,
+        "order": 1195,
         "ligatures": "description",
         "prevSize": 32,
         "code": 59656,
@@ -477,7 +506,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 16
+      "iconIdx": 17
     },
     {
       "icon": {
@@ -494,8 +523,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 955,
-        "order": 1132,
+        "id": 1018,
+        "order": 1196,
         "ligatures": "eject",
         "prevSize": 32,
         "code": 59652,
@@ -503,7 +532,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 17
+      "iconIdx": 18
     },
     {
       "icon": {
@@ -520,8 +549,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 956,
-        "order": 1133,
+        "id": 1019,
+        "order": 1197,
         "ligatures": "expand_less",
         "prevSize": 32,
         "code": 59679,
@@ -529,7 +558,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 18
+      "iconIdx": 19
     },
     {
       "icon": {
@@ -546,8 +575,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 957,
-        "order": 1134,
+        "id": 1020,
+        "order": 1198,
         "ligatures": "expand_more",
         "prevSize": 32,
         "code": 59680,
@@ -555,7 +584,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 19
+      "iconIdx": 20
     },
     {
       "icon": {
@@ -572,8 +601,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 958,
-        "order": 1135,
+        "id": 1021,
+        "order": 1199,
         "ligatures": "fullscreen",
         "prevSize": 32,
         "code": 59659,
@@ -581,7 +610,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 20
+      "iconIdx": 21
     },
     {
       "icon": {
@@ -598,8 +627,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 959,
-        "order": 1136,
+        "id": 1022,
+        "order": 1200,
         "ligatures": "fullscreen_exit",
         "prevSize": 32,
         "code": 59660,
@@ -607,7 +636,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 21
+      "iconIdx": 22
     },
     {
       "icon": {
@@ -624,8 +653,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 960,
-        "order": 1137,
+        "id": 1023,
+        "order": 1201,
         "ligatures": "grade, star",
         "prevSize": 32,
         "code": 59658,
@@ -633,7 +662,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 22
+      "iconIdx": 23
     },
     {
       "icon": {
@@ -650,8 +679,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 961,
-        "order": 1138,
+        "id": 1024,
+        "order": 1202,
         "ligatures": "lock_open",
         "prevSize": 32,
         "code": 59661,
@@ -659,7 +688,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 23
+      "iconIdx": 24
     },
     {
       "icon": {
@@ -676,8 +705,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 962,
-        "order": 1139,
+        "id": 1025,
+        "order": 1203,
         "ligatures": "lock_outline",
         "prevSize": 32,
         "code": 59662,
@@ -685,7 +714,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 24
+      "iconIdx": 25
     },
     {
       "icon": {
@@ -702,8 +731,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 963,
-        "order": 1140,
+        "id": 1026,
+        "order": 1204,
         "ligatures": "loop, sync",
         "prevSize": 32,
         "code": 59663,
@@ -711,7 +740,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 25
+      "iconIdx": 26
     },
     {
       "icon": {
@@ -728,8 +757,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 964,
-        "order": 1141,
+        "id": 1027,
+        "order": 1205,
         "ligatures": "mic",
         "prevSize": 32,
         "code": 59664,
@@ -737,7 +766,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 26
+      "iconIdx": 27
     },
     {
       "icon": {
@@ -754,8 +783,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 965,
-        "order": 1142,
+        "id": 1028,
+        "order": 1206,
         "ligatures": "mic_none",
         "prevSize": 32,
         "code": 59665,
@@ -763,7 +792,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 27
+      "iconIdx": 28
     },
     {
       "icon": {
@@ -780,8 +809,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 966,
-        "order": 1143,
+        "id": 1029,
+        "order": 1207,
         "ligatures": "mic_off",
         "prevSize": 32,
         "code": 59666,
@@ -789,7 +818,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 28
+      "iconIdx": 29
     },
     {
       "icon": {
@@ -806,8 +835,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 967,
-        "order": 1144,
+        "id": 1030,
+        "order": 1208,
         "ligatures": "pan_tool",
         "prevSize": 32,
         "code": 59678,
@@ -815,7 +844,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 29
+      "iconIdx": 30
     },
     {
       "icon": {
@@ -832,8 +861,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 968,
-        "order": 1145,
+        "id": 1031,
+        "order": 1209,
         "ligatures": "people_outline",
         "prevSize": 32,
         "code": 59675,
@@ -841,7 +870,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 30
+      "iconIdx": 31
     },
     {
       "icon": {
@@ -858,8 +887,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 969,
-        "order": 1146,
+        "id": 1032,
+        "order": 1210,
         "ligatures": "person_add",
         "prevSize": 32,
         "code": 59667,
@@ -867,7 +896,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 31
+      "iconIdx": 32
     },
     {
       "icon": {
@@ -884,8 +913,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 970,
-        "order": 1147,
+        "id": 1033,
+        "order": 1211,
         "ligatures": "play_circle_outline",
         "prevSize": 32,
         "code": 59668,
@@ -893,7 +922,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 32
+      "iconIdx": 33
     },
     {
       "icon": {
@@ -910,8 +939,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 971,
-        "order": 1148,
+        "id": 1034,
+        "order": 1212,
         "ligatures": "settings",
         "prevSize": 32,
         "code": 59669,
@@ -919,7 +948,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 33
+      "iconIdx": 34
     },
     {
       "icon": {
@@ -936,8 +965,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 972,
-        "order": 1149,
+        "id": 1035,
+        "order": 1213,
         "ligatures": "star_border",
         "prevSize": 32,
         "code": 59670,
@@ -945,7 +974,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 34
+      "iconIdx": 35
     },
     {
       "icon": {
@@ -962,8 +991,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 973,
-        "order": 1150,
+        "id": 1036,
+        "order": 1214,
         "ligatures": "switch_camera",
         "prevSize": 32,
         "code": 59681,
@@ -971,7 +1000,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 35
+      "iconIdx": 36
     },
     {
       "icon": {
@@ -988,8 +1017,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 974,
-        "order": 1151,
+        "id": 1037,
+        "order": 1215,
         "ligatures": "tv",
         "prevSize": 32,
         "code": 59671,
@@ -997,7 +1026,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 36
+      "iconIdx": 37
     },
     {
       "icon": {
@@ -1014,8 +1043,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 975,
-        "order": 1152,
+        "id": 1038,
+        "order": 1216,
         "ligatures": "videocam",
         "prevSize": 32,
         "code": 59672,
@@ -1023,7 +1052,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 37
+      "iconIdx": 38
     },
     {
       "icon": {
@@ -1040,8 +1069,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 976,
-        "order": 1153,
+        "id": 1039,
+        "order": 1217,
         "ligatures": "videocam_off",
         "prevSize": 32,
         "code": 59673,
@@ -1049,7 +1078,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 38
+      "iconIdx": 39
     },
     {
       "icon": {
@@ -1066,8 +1095,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 977,
-        "order": 1154,
+        "id": 1040,
+        "order": 1218,
         "ligatures": "volume_up",
         "prevSize": 32,
         "code": 59674,
@@ -1075,7 +1104,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 39
+      "iconIdx": 40
     },
     {
       "icon": {
@@ -1095,8 +1124,8 @@
       },
       "attrs": [],
       "properties": {
-        "order": 1155,
-        "id": 978,
+        "order": 1219,
+        "id": 1041,
         "prevSize": 32,
         "code": 58899,
         "name": "recDisable",
@@ -1104,7 +1133,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 40
+      "iconIdx": 41
     },
     {
       "icon": {
@@ -1125,8 +1154,8 @@
       },
       "attrs": [],
       "properties": {
-        "order": 1156,
-        "id": 979,
+        "order": 1220,
+        "id": 1042,
         "prevSize": 32,
         "code": 58900,
         "name": "recEnable",
@@ -1134,7 +1163,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 41
+      "iconIdx": 42
     },
     {
       "icon": {
@@ -1155,8 +1184,8 @@
       },
       "attrs": [],
       "properties": {
-        "order": 1157,
-        "id": 980,
+        "order": 1221,
+        "id": 1043,
         "prevSize": 32,
         "code": 58883,
         "name": "presentation",
@@ -1164,7 +1193,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 42
+      "iconIdx": 43
     },
     {
       "icon": {
@@ -1181,16 +1210,16 @@
       },
       "attrs": [],
       "properties": {
-        "order": 1158,
+        "order": 1222,
         "ligatures": "dialpad",
-        "id": 981,
+        "id": 1044,
         "prevSize": 32,
         "code": 59685,
         "name": "dialpad"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 43
+      "iconIdx": 44
     },
     {
       "icon": {
@@ -1207,16 +1236,16 @@
       },
       "attrs": [],
       "properties": {
-        "order": 1159,
+        "order": 1223,
         "ligatures": "remove_red_eye, visibility",
-        "id": 982,
+        "id": 1045,
         "prevSize": 32,
         "code": 59683,
         "name": "visibility"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 44
+      "iconIdx": 45
     },
     {
       "icon": {
@@ -1233,16 +1262,16 @@
       },
       "attrs": [],
       "properties": {
-        "order": 1160,
+        "order": 1224,
         "ligatures": "visibility_off",
-        "id": 983,
+        "id": 1046,
         "prevSize": 32,
         "code": 59684,
         "name": "visibility-off"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 45
+      "iconIdx": 46
     },
     {
       "icon": {
@@ -1261,15 +1290,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "launch, open_in_new",
-        "id": 984,
-        "order": 1161,
+        "id": 1047,
+        "order": 1225,
         "prevSize": 24,
         "name": "open_in_new",
         "code": 59550
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 46
+      "iconIdx": 47
     },
     {
       "icon": {
@@ -1288,15 +1317,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "history, restore",
-        "id": 985,
-        "order": 1162,
+        "id": 1048,
+        "order": 1226,
         "prevSize": 24,
         "code": 59571,
         "name": "restore"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 47
+      "iconIdx": 48
     },
     {
       "icon": {
@@ -1315,15 +1344,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "chevron_right, navigate_next",
-        "id": 986,
-        "order": 1163,
+        "id": 1049,
+        "order": 1227,
         "prevSize": 24,
         "code": 58377,
         "name": "navigate_next"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 48
+      "iconIdx": 49
     },
     {
       "icon": {
@@ -1342,15 +1371,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "menu",
-        "id": 987,
-        "order": 1164,
+        "id": 1050,
+        "order": 1228,
         "prevSize": 24,
         "code": 58834,
         "name": "menu"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 49
+      "iconIdx": 50
     },
     {
       "icon": {
@@ -1369,15 +1398,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "arrow_back",
-        "id": 988,
-        "order": 1165,
+        "id": 1051,
+        "order": 1229,
         "prevSize": 24,
         "code": 58820,
         "name": "arrow_back"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 50
+      "iconIdx": 51
     },
     {
       "icon": {
@@ -1396,15 +1425,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "chevron_left, navigate_before",
-        "id": 989,
-        "order": 1166,
+        "id": 1052,
+        "order": 1230,
         "prevSize": 24,
         "code": 58376,
         "name": "navigate_before"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 51
+      "iconIdx": 52
     },
     {
       "icon": {
@@ -1423,15 +1452,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "public",
-        "id": 990,
-        "order": 1167,
+        "id": 1053,
+        "order": 1231,
         "prevSize": 24,
         "code": 59403,
         "name": "public"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 52
+      "iconIdx": 53
     },
     {
       "icon": {
@@ -1450,15 +1479,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "event_note",
-        "id": 991,
-        "order": 1168,
+        "id": 1054,
+        "order": 1232,
         "prevSize": 24,
         "code": 58902,
         "name": "event_note"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 53
+      "iconIdx": 54
     },
     {
       "icon": {
@@ -1477,15 +1506,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "timer",
-        "id": 992,
-        "order": 1169,
+        "id": 1055,
+        "order": 1233,
         "prevSize": 24,
         "code": 58405,
         "name": "timer"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 54
+      "iconIdx": 55
     },
     {
       "icon": {
@@ -1504,15 +1533,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "bluetooth_audio, bluetooth_searching",
-        "id": 993,
-        "order": 1170,
+        "id": 1056,
+        "order": 1234,
         "prevSize": 24,
         "code": 57770,
         "name": "bluetooth"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 55
+      "iconIdx": 56
     },
     {
       "icon": {
@@ -1531,15 +1560,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "headset",
-        "id": 994,
-        "order": 1171,
+        "id": 1057,
+        "order": 1235,
         "prevSize": 24,
         "code": 58128,
         "name": "headset"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 56
+      "iconIdx": 57
     },
     {
       "icon": {
@@ -1558,15 +1587,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "phone_in_talk",
-        "id": 995,
-        "order": 1172,
+        "id": 1058,
+        "order": 1236,
         "prevSize": 24,
         "code": 58909,
         "name": "phone-talk"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 57
+      "iconIdx": 58
     },
     {
       "icon": {
@@ -1585,15 +1614,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "more_vert",
-        "id": 996,
-        "order": 1173,
+        "id": 1059,
+        "order": 1237,
         "prevSize": 24,
         "code": 58836,
         "name": "thumb-menu"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 58
+      "iconIdx": 59
     },
     {
       "icon": {
@@ -1614,15 +1643,15 @@
         {}
       ],
       "properties": {
-        "order": 1174,
-        "id": 997,
+        "order": 1238,
+        "id": 1060,
         "name": "ninja",
         "prevSize": 24,
         "code": 59657
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 59
+      "iconIdx": 60
     },
     {
       "icon": {
@@ -1641,15 +1670,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "call, local_phone, phone",
-        "id": 998,
-        "order": 1175,
+        "id": 1061,
+        "order": 1239,
         "prevSize": 24,
         "code": 57549,
         "name": "phone"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 60
+      "iconIdx": 61
     },
     {
       "icon": {
@@ -1668,15 +1697,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "add",
-        "id": 999,
-        "order": 1176,
+        "id": 1062,
+        "order": 1240,
         "prevSize": 24,
         "code": 57669,
         "name": "add"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 61
+      "iconIdx": 62
     }
   ],
   "height": 1024,
diff --git a/react/features/base/font-icons/jitsi.json b/react/features/base/font-icons/jitsi.json
index d4a7fdf181..9ac1ba2b33 100755
--- a/react/features/base/font-icons/jitsi.json
+++ b/react/features/base/font-icons/jitsi.json
@@ -1,6 +1,35 @@
 {
   "IcoMoonType": "selection",
   "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M512 1024c-282.77 0-512-229.23-512-512s229.23-512 512-512c282.77 0 512 229.23 512 512s-229.23 512-512 512zM298.225 593.975h-112.35v-206.5h-52.85v252.525h165.2v-46.025zM399.025 640v-252.525h-52.85v252.525h52.85zM591.525 640l84.175-252.525h-56.875l-56.35 193.025h-3.15l-57.4-193.025h-59.675l85.4 252.525h63.875zM886.050 594.85h-114.45v-61.425h107.975v-41.825h-107.975v-58.975h114.45v-45.15h-167.3v252.525h167.3v-45.15z"
+        ],
+        "attrs": [
+          {}
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": [
+          "live"
+        ]
+      },
+      "attrs": [
+        {}
+      ],
+      "properties": {
+        "order": 1178,
+        "id": 1000,
+        "name": "live",
+        "prevSize": 32,
+        "code": 59692
+      },
+      "setIdx": 0,
+      "setId": 1,
+      "iconIdx": 0
+    },
     {
       "icon": {
         "paths": [
@@ -20,15 +49,15 @@
         {}
       ],
       "properties": {
-        "order": 1115,
-        "id": 938,
+        "order": 1179,
+        "id": 1001,
         "name": "rec",
         "prevSize": 32,
         "code": 59691
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 0
+      "iconIdx": 1
     },
     {
       "icon": {
@@ -52,15 +81,15 @@
         {}
       ],
       "properties": {
-        "order": 1116,
-        "id": 939,
+        "order": 1180,
+        "id": 1002,
         "name": "camera-take-picture",
         "prevSize": 32,
         "code": 59690
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 1
+      "iconIdx": 2
     },
     {
       "icon": {
@@ -81,15 +110,15 @@
         {}
       ],
       "properties": {
-        "order": 1117,
-        "id": 940,
+        "order": 1181,
+        "id": 1003,
         "name": "AUD",
         "prevSize": 32,
         "code": 59648
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 2
+      "iconIdx": 3
     },
     {
       "icon": {
@@ -110,15 +139,15 @@
         {}
       ],
       "properties": {
-        "order": 1118,
-        "id": 941,
+        "order": 1182,
+        "id": 1004,
         "name": "HD",
         "prevSize": 32,
         "code": 59687
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 3
+      "iconIdx": 4
     },
     {
       "icon": {
@@ -139,15 +168,15 @@
         {}
       ],
       "properties": {
-        "order": 1119,
-        "id": 942,
+        "order": 1183,
+        "id": 1005,
         "name": "LD",
         "prevSize": 32,
         "code": 59688
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 4
+      "iconIdx": 5
     },
     {
       "icon": {
@@ -168,15 +197,15 @@
         {}
       ],
       "properties": {
-        "order": 1120,
-        "id": 943,
+        "order": 1184,
+        "id": 1006,
         "name": "SD",
         "prevSize": 32,
         "code": 59689
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 5
+      "iconIdx": 6
     },
     {
       "icon": {
@@ -197,15 +226,15 @@
         {}
       ],
       "properties": {
-        "order": 1121,
-        "id": 944,
+        "order": 1185,
+        "id": 1007,
         "name": "gsm-bars-black",
         "prevSize": 32,
         "code": 59686
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 6
+      "iconIdx": 7
     },
     {
       "icon": {
@@ -226,15 +255,15 @@
         {}
       ],
       "properties": {
-        "order": 1122,
-        "id": 945,
+        "order": 1186,
+        "id": 1008,
         "name": "info",
         "prevSize": 32,
         "code": 59682
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 7
+      "iconIdx": 8
     },
     {
       "icon": {
@@ -255,15 +284,15 @@
         {}
       ],
       "properties": {
-        "order": 1123,
-        "id": 946,
+        "order": 1187,
+        "id": 1009,
         "name": "mic-camera-combined",
         "prevSize": 32,
         "code": 59651
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 8
+      "iconIdx": 9
     },
     {
       "icon": {
@@ -284,15 +313,15 @@
         {}
       ],
       "properties": {
-        "order": 1124,
-        "id": 947,
+        "order": 1188,
+        "id": 1010,
         "name": "feedback",
         "prevSize": 32,
         "code": 59677
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 9
+      "iconIdx": 10
     },
     {
       "icon": {
@@ -313,15 +342,15 @@
         {}
       ],
       "properties": {
-        "order": 1125,
-        "id": 948,
+        "order": 1189,
+        "id": 1011,
         "name": "toggle-filmstrip",
         "prevSize": 32,
         "code": 59676
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 10
+      "iconIdx": 11
     },
     {
       "icon": {
@@ -338,8 +367,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 949,
-        "order": 1126,
+        "id": 1012,
+        "order": 1190,
         "ligatures": "account_circle",
         "prevSize": 32,
         "code": 59649,
@@ -347,7 +376,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 11
+      "iconIdx": 12
     },
     {
       "icon": {
@@ -364,8 +393,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 950,
-        "order": 1127,
+        "id": 1013,
+        "order": 1191,
         "ligatures": "call_end",
         "prevSize": 32,
         "code": 59653,
@@ -373,7 +402,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 12
+      "iconIdx": 13
     },
     {
       "icon": {
@@ -390,8 +419,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 951,
-        "order": 1128,
+        "id": 1014,
+        "order": 1192,
         "ligatures": "chat_bubble_outline",
         "prevSize": 32,
         "code": 59654,
@@ -399,7 +428,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 13
+      "iconIdx": 14
     },
     {
       "icon": {
@@ -416,8 +445,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 952,
-        "order": 1129,
+        "id": 1015,
+        "order": 1193,
         "ligatures": "cloud_download",
         "prevSize": 32,
         "code": 59650,
@@ -425,7 +454,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 14
+      "iconIdx": 15
     },
     {
       "icon": {
@@ -442,8 +471,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 953,
-        "order": 1130,
+        "id": 1016,
+        "order": 1194,
         "ligatures": "create, edit, mode_edit",
         "prevSize": 32,
         "code": 59655,
@@ -451,7 +480,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 15
+      "iconIdx": 16
     },
     {
       "icon": {
@@ -468,8 +497,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 954,
-        "order": 1131,
+        "id": 1017,
+        "order": 1195,
         "ligatures": "description",
         "prevSize": 32,
         "code": 59656,
@@ -477,7 +506,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 16
+      "iconIdx": 17
     },
     {
       "icon": {
@@ -494,8 +523,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 955,
-        "order": 1132,
+        "id": 1018,
+        "order": 1196,
         "ligatures": "eject",
         "prevSize": 32,
         "code": 59652,
@@ -503,7 +532,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 17
+      "iconIdx": 18
     },
     {
       "icon": {
@@ -520,8 +549,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 956,
-        "order": 1133,
+        "id": 1019,
+        "order": 1197,
         "ligatures": "expand_less",
         "prevSize": 32,
         "code": 59679,
@@ -529,7 +558,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 18
+      "iconIdx": 19
     },
     {
       "icon": {
@@ -546,8 +575,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 957,
-        "order": 1134,
+        "id": 1020,
+        "order": 1198,
         "ligatures": "expand_more",
         "prevSize": 32,
         "code": 59680,
@@ -555,7 +584,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 19
+      "iconIdx": 20
     },
     {
       "icon": {
@@ -572,8 +601,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 958,
-        "order": 1135,
+        "id": 1021,
+        "order": 1199,
         "ligatures": "fullscreen",
         "prevSize": 32,
         "code": 59659,
@@ -581,7 +610,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 20
+      "iconIdx": 21
     },
     {
       "icon": {
@@ -598,8 +627,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 959,
-        "order": 1136,
+        "id": 1022,
+        "order": 1200,
         "ligatures": "fullscreen_exit",
         "prevSize": 32,
         "code": 59660,
@@ -607,7 +636,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 21
+      "iconIdx": 22
     },
     {
       "icon": {
@@ -624,8 +653,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 960,
-        "order": 1137,
+        "id": 1023,
+        "order": 1201,
         "ligatures": "grade, star",
         "prevSize": 32,
         "code": 59658,
@@ -633,7 +662,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 22
+      "iconIdx": 23
     },
     {
       "icon": {
@@ -650,8 +679,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 961,
-        "order": 1138,
+        "id": 1024,
+        "order": 1202,
         "ligatures": "lock_open",
         "prevSize": 32,
         "code": 59661,
@@ -659,7 +688,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 23
+      "iconIdx": 24
     },
     {
       "icon": {
@@ -676,8 +705,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 962,
-        "order": 1139,
+        "id": 1025,
+        "order": 1203,
         "ligatures": "lock_outline",
         "prevSize": 32,
         "code": 59662,
@@ -685,7 +714,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 24
+      "iconIdx": 25
     },
     {
       "icon": {
@@ -702,8 +731,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 963,
-        "order": 1140,
+        "id": 1026,
+        "order": 1204,
         "ligatures": "loop, sync",
         "prevSize": 32,
         "code": 59663,
@@ -711,7 +740,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 25
+      "iconIdx": 26
     },
     {
       "icon": {
@@ -728,8 +757,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 964,
-        "order": 1141,
+        "id": 1027,
+        "order": 1205,
         "ligatures": "mic",
         "prevSize": 32,
         "code": 59664,
@@ -737,7 +766,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 26
+      "iconIdx": 27
     },
     {
       "icon": {
@@ -754,8 +783,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 965,
-        "order": 1142,
+        "id": 1028,
+        "order": 1206,
         "ligatures": "mic_none",
         "prevSize": 32,
         "code": 59665,
@@ -763,7 +792,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 27
+      "iconIdx": 28
     },
     {
       "icon": {
@@ -780,8 +809,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 966,
-        "order": 1143,
+        "id": 1029,
+        "order": 1207,
         "ligatures": "mic_off",
         "prevSize": 32,
         "code": 59666,
@@ -789,7 +818,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 28
+      "iconIdx": 29
     },
     {
       "icon": {
@@ -806,8 +835,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 967,
-        "order": 1144,
+        "id": 1030,
+        "order": 1208,
         "ligatures": "pan_tool",
         "prevSize": 32,
         "code": 59678,
@@ -815,7 +844,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 29
+      "iconIdx": 30
     },
     {
       "icon": {
@@ -832,8 +861,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 968,
-        "order": 1145,
+        "id": 1031,
+        "order": 1209,
         "ligatures": "people_outline",
         "prevSize": 32,
         "code": 59675,
@@ -841,7 +870,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 30
+      "iconIdx": 31
     },
     {
       "icon": {
@@ -858,8 +887,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 969,
-        "order": 1146,
+        "id": 1032,
+        "order": 1210,
         "ligatures": "person_add",
         "prevSize": 32,
         "code": 59667,
@@ -867,7 +896,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 31
+      "iconIdx": 32
     },
     {
       "icon": {
@@ -884,8 +913,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 970,
-        "order": 1147,
+        "id": 1033,
+        "order": 1211,
         "ligatures": "play_circle_outline",
         "prevSize": 32,
         "code": 59668,
@@ -893,7 +922,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 32
+      "iconIdx": 33
     },
     {
       "icon": {
@@ -910,8 +939,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 971,
-        "order": 1148,
+        "id": 1034,
+        "order": 1212,
         "ligatures": "settings",
         "prevSize": 32,
         "code": 59669,
@@ -919,7 +948,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 33
+      "iconIdx": 34
     },
     {
       "icon": {
@@ -936,8 +965,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 972,
-        "order": 1149,
+        "id": 1035,
+        "order": 1213,
         "ligatures": "star_border",
         "prevSize": 32,
         "code": 59670,
@@ -945,7 +974,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 34
+      "iconIdx": 35
     },
     {
       "icon": {
@@ -962,8 +991,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 973,
-        "order": 1150,
+        "id": 1036,
+        "order": 1214,
         "ligatures": "switch_camera",
         "prevSize": 32,
         "code": 59681,
@@ -971,7 +1000,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 35
+      "iconIdx": 36
     },
     {
       "icon": {
@@ -988,8 +1017,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 974,
-        "order": 1151,
+        "id": 1037,
+        "order": 1215,
         "ligatures": "tv",
         "prevSize": 32,
         "code": 59671,
@@ -997,7 +1026,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 36
+      "iconIdx": 37
     },
     {
       "icon": {
@@ -1014,8 +1043,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 975,
-        "order": 1152,
+        "id": 1038,
+        "order": 1216,
         "ligatures": "videocam",
         "prevSize": 32,
         "code": 59672,
@@ -1023,7 +1052,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 37
+      "iconIdx": 38
     },
     {
       "icon": {
@@ -1040,8 +1069,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 976,
-        "order": 1153,
+        "id": 1039,
+        "order": 1217,
         "ligatures": "videocam_off",
         "prevSize": 32,
         "code": 59673,
@@ -1049,7 +1078,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 38
+      "iconIdx": 39
     },
     {
       "icon": {
@@ -1066,8 +1095,8 @@
       },
       "attrs": [],
       "properties": {
-        "id": 977,
-        "order": 1154,
+        "id": 1040,
+        "order": 1218,
         "ligatures": "volume_up",
         "prevSize": 32,
         "code": 59674,
@@ -1075,7 +1104,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 39
+      "iconIdx": 40
     },
     {
       "icon": {
@@ -1095,8 +1124,8 @@
       },
       "attrs": [],
       "properties": {
-        "order": 1155,
-        "id": 978,
+        "order": 1219,
+        "id": 1041,
         "prevSize": 32,
         "code": 58899,
         "name": "recDisable",
@@ -1104,7 +1133,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 40
+      "iconIdx": 41
     },
     {
       "icon": {
@@ -1125,8 +1154,8 @@
       },
       "attrs": [],
       "properties": {
-        "order": 1156,
-        "id": 979,
+        "order": 1220,
+        "id": 1042,
         "prevSize": 32,
         "code": 58900,
         "name": "recEnable",
@@ -1134,7 +1163,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 41
+      "iconIdx": 42
     },
     {
       "icon": {
@@ -1155,8 +1184,8 @@
       },
       "attrs": [],
       "properties": {
-        "order": 1157,
-        "id": 980,
+        "order": 1221,
+        "id": 1043,
         "prevSize": 32,
         "code": 58883,
         "name": "presentation",
@@ -1164,7 +1193,7 @@
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 42
+      "iconIdx": 43
     },
     {
       "icon": {
@@ -1181,16 +1210,16 @@
       },
       "attrs": [],
       "properties": {
-        "order": 1158,
+        "order": 1222,
         "ligatures": "dialpad",
-        "id": 981,
+        "id": 1044,
         "prevSize": 32,
         "code": 59685,
         "name": "dialpad"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 43
+      "iconIdx": 44
     },
     {
       "icon": {
@@ -1207,16 +1236,16 @@
       },
       "attrs": [],
       "properties": {
-        "order": 1159,
+        "order": 1223,
         "ligatures": "remove_red_eye, visibility",
-        "id": 982,
+        "id": 1045,
         "prevSize": 32,
         "code": 59683,
         "name": "visibility"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 44
+      "iconIdx": 45
     },
     {
       "icon": {
@@ -1233,16 +1262,16 @@
       },
       "attrs": [],
       "properties": {
-        "order": 1160,
+        "order": 1224,
         "ligatures": "visibility_off",
-        "id": 983,
+        "id": 1046,
         "prevSize": 32,
         "code": 59684,
         "name": "visibility-off"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 45
+      "iconIdx": 46
     },
     {
       "icon": {
@@ -1261,15 +1290,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "launch, open_in_new",
-        "id": 984,
-        "order": 1161,
+        "id": 1047,
+        "order": 1225,
         "prevSize": 24,
         "name": "open_in_new",
         "code": 59550
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 46
+      "iconIdx": 47
     },
     {
       "icon": {
@@ -1288,15 +1317,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "history, restore",
-        "id": 985,
-        "order": 1162,
+        "id": 1048,
+        "order": 1226,
         "prevSize": 24,
         "code": 59571,
         "name": "restore"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 47
+      "iconIdx": 48
     },
     {
       "icon": {
@@ -1315,15 +1344,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "chevron_right, navigate_next",
-        "id": 986,
-        "order": 1163,
+        "id": 1049,
+        "order": 1227,
         "prevSize": 24,
         "code": 58377,
         "name": "navigate_next"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 48
+      "iconIdx": 49
     },
     {
       "icon": {
@@ -1342,15 +1371,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "menu",
-        "id": 987,
-        "order": 1164,
+        "id": 1050,
+        "order": 1228,
         "prevSize": 24,
         "code": 58834,
         "name": "menu"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 49
+      "iconIdx": 50
     },
     {
       "icon": {
@@ -1369,15 +1398,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "arrow_back",
-        "id": 988,
-        "order": 1165,
+        "id": 1051,
+        "order": 1229,
         "prevSize": 24,
         "code": 58820,
         "name": "arrow_back"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 50
+      "iconIdx": 51
     },
     {
       "icon": {
@@ -1396,15 +1425,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "chevron_left, navigate_before",
-        "id": 989,
-        "order": 1166,
+        "id": 1052,
+        "order": 1230,
         "prevSize": 24,
         "code": 58376,
         "name": "navigate_before"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 51
+      "iconIdx": 52
     },
     {
       "icon": {
@@ -1423,15 +1452,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "public",
-        "id": 990,
-        "order": 1167,
+        "id": 1053,
+        "order": 1231,
         "prevSize": 24,
         "code": 59403,
         "name": "public"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 52
+      "iconIdx": 53
     },
     {
       "icon": {
@@ -1450,15 +1479,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "event_note",
-        "id": 991,
-        "order": 1168,
+        "id": 1054,
+        "order": 1232,
         "prevSize": 24,
         "code": 58902,
         "name": "event_note"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 53
+      "iconIdx": 54
     },
     {
       "icon": {
@@ -1477,15 +1506,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "timer",
-        "id": 992,
-        "order": 1169,
+        "id": 1055,
+        "order": 1233,
         "prevSize": 24,
         "code": 58405,
         "name": "timer"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 54
+      "iconIdx": 55
     },
     {
       "icon": {
@@ -1504,15 +1533,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "bluetooth_audio, bluetooth_searching",
-        "id": 993,
-        "order": 1170,
+        "id": 1056,
+        "order": 1234,
         "prevSize": 24,
         "code": 57770,
         "name": "bluetooth"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 55
+      "iconIdx": 56
     },
     {
       "icon": {
@@ -1531,15 +1560,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "headset",
-        "id": 994,
-        "order": 1171,
+        "id": 1057,
+        "order": 1235,
         "prevSize": 24,
         "code": 58128,
         "name": "headset"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 56
+      "iconIdx": 57
     },
     {
       "icon": {
@@ -1558,15 +1587,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "phone_in_talk",
-        "id": 995,
-        "order": 1172,
+        "id": 1058,
+        "order": 1236,
         "prevSize": 24,
         "code": 58909,
         "name": "phone-talk"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 57
+      "iconIdx": 58
     },
     {
       "icon": {
@@ -1585,15 +1614,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "more_vert",
-        "id": 996,
-        "order": 1173,
+        "id": 1059,
+        "order": 1237,
         "prevSize": 24,
         "code": 58836,
         "name": "thumb-menu"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 58
+      "iconIdx": 59
     },
     {
       "icon": {
@@ -1614,15 +1643,15 @@
         {}
       ],
       "properties": {
-        "order": 1174,
-        "id": 997,
+        "order": 1238,
+        "id": 1060,
         "name": "ninja",
         "prevSize": 24,
         "code": 59657
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 59
+      "iconIdx": 60
     },
     {
       "icon": {
@@ -1641,15 +1670,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "call, local_phone, phone",
-        "id": 998,
-        "order": 1175,
+        "id": 1061,
+        "order": 1239,
         "prevSize": 24,
         "code": 57549,
         "name": "phone"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 60
+      "iconIdx": 61
     },
     {
       "icon": {
@@ -1668,15 +1697,15 @@
       "attrs": [],
       "properties": {
         "ligatures": "add",
-        "id": 999,
-        "order": 1176,
+        "id": 1062,
+        "order": 1240,
         "prevSize": 24,
         "code": 57669,
         "name": "add"
       },
       "setIdx": 0,
       "setId": 1,
-      "iconIdx": 61
+      "iconIdx": 62
     }
   ],
   "height": 1024,
diff --git a/react/features/recording/components/RecordingLabel.web.js b/react/features/recording/components/RecordingLabel.web.js
index 0eae4e0171..2167559c3a 100644
--- a/react/features/recording/components/RecordingLabel.web.js
+++ b/react/features/recording/components/RecordingLabel.web.js
@@ -5,6 +5,8 @@ import { connect } from 'react-redux';
 import { translate } from '../../base/i18n';
 import { JitsiRecordingStatus } from '../../base/lib-jitsi-meet';
 
+import { RECORDING_TYPES } from '../constants';
+
 /**
  * Implements a React {@link Component} which displays the current state of
  * conference recording. Currently it uses CSS to display itself automatically
@@ -43,6 +45,12 @@ class RecordingLabel extends Component {
          */
         _labelDisplayConfiguration: PropTypes.object,
 
+        /**
+         * Whether the recording feature is live streaming (jibri) or is file
+         * recording (jirecon).
+         */
+        _recordingType: PropTypes.string,
+
         /**
          * Invoked to obtain translated string.
          */
@@ -93,7 +101,11 @@ class RecordingLabel extends Component {
      * @returns {ReactElement}
      */
     render() {
-        const { _isRecording, _labelDisplayConfiguration } = this.props;
+        const {
+            _isRecording,
+            _labelDisplayConfiguration,
+            _recordingType
+        } = this.props;
         const { centered, key, showSpinner } = _labelDisplayConfiguration || {};
 
         const isVisible = Boolean(key);
@@ -114,7 +126,11 @@ class RecordingLabel extends Component {
                 { _isRecording
                     ? <div className = 'recording-icon'>
                         <div className = 'recording-icon-background' />
-                        <i className = 'icon-rec' />
+                        <i
+                            className = {
+                                _recordingType === RECORDING_TYPES.JIBRI
+                                    ? 'icon-live'
+                                    : 'icon-rec' } />
                     </div>
                     : <div id = 'recordingLabelText'>
                         { this.props.t(key) }
@@ -139,20 +155,23 @@ class RecordingLabel extends Component {
  * @returns {{
  *     _filmstripVisible: boolean,
  *     _isRecording: boolean,
- *     _labelDisplayConfiguration: Object
+ *     _labelDisplayConfiguration: Object,
+ *     _recordingType: string
  * }}
  */
 function _mapStateToProps(state) {
     const { visible } = state['features/filmstrip'];
     const {
         labelDisplayConfiguration,
-        recordingState
+        recordingState,
+        recordingType
     } = state['features/recording'];
 
     return {
         _filmstripVisible: visible,
         _isRecording: recordingState === JitsiRecordingStatus.ON,
-        _labelDisplayConfiguration: labelDisplayConfiguration
+        _labelDisplayConfiguration: labelDisplayConfiguration,
+        _recordingType: recordingType
     };
 }