From 17aa00189e8f83a07b4c969b1d74abe60c3e2e97 Mon Sep 17 00:00:00 2001
From: Vyshnavi Dasari <vydasari@microsoft.com>
Date: Wed, 14 Nov 2018 17:30:04 +0530
Subject: [PATCH 1/5] Added four icons to icons file

---
 .../components/Icon/svg/icons/bookmark.tsx    | 27 +++++++
 .../components/Icon/svg/icons/bullets.tsx     | 34 +++++++++
 .../components/Icon/svg/icons/gallery.tsx     | 73 +++++++++++++++++++
 .../teams/components/Icon/svg/icons/index.ts  |  8 ++
 .../teams/components/Icon/svg/icons/menu.tsx  | 11 +++
 5 files changed, 153 insertions(+)
 create mode 100644 src/themes/teams/components/Icon/svg/icons/bookmark.tsx
 create mode 100644 src/themes/teams/components/Icon/svg/icons/bullets.tsx
 create mode 100644 src/themes/teams/components/Icon/svg/icons/gallery.tsx
 create mode 100644 src/themes/teams/components/Icon/svg/icons/menu.tsx

diff --git a/src/themes/teams/components/Icon/svg/icons/bookmark.tsx b/src/themes/teams/components/Icon/svg/icons/bookmark.tsx
new file mode 100644
index 0000000000..d18eb73023
--- /dev/null
+++ b/src/themes/teams/components/Icon/svg/icons/bookmark.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg
+      viewBox="0 0 32 32"
+      role="presentation"
+      className="app-svg icons-bookmark icon-hide-on-hover"
+    >
+      <path
+        className="icons-default-fill"
+        d="M12,23.3c-0.1,0-0.3,0-0.4-0.1c-0.4-0.2-0.6-0.5-0.6-0.9V9.9c0-0.7,0.5-1.3,1.2-1.5c2.4-0.6,5.2-0.6,7.7,0
+           C20.5,8.6,21,9.2,21,9.9v12.4c0,0.4-0.2,0.8-0.6,0.9c-0.4,0.2-0.8,0.1-1.1-0.2L16,19.7L12.7,23C12.5,23.2,12.3,23.3,12,23.3z
+           M16,18.7c0.3,0,0.5,0.1,0.7,0.3l3.3,3.3V9.9c0-0.2-0.2-0.4-0.4-0.5c-2.3-0.5-4.9-0.5-7.2,0C12.2,9.4,12,9.6,12,9.9v12.4l3.3-3.3
+           C15.5,18.8,15.7,18.7,16,18.7z"
+      />
+    </svg>
+  ),
+  styles: {
+    svg: ({ variables }) => {
+      return {
+        fill: variables.color,
+      }
+    },
+  },
+} as TeamsSvgIconSpec
diff --git a/src/themes/teams/components/Icon/svg/icons/bullets.tsx b/src/themes/teams/components/Icon/svg/icons/bullets.tsx
new file mode 100644
index 0000000000..5e013ed31d
--- /dev/null
+++ b/src/themes/teams/components/Icon/svg/icons/bullets.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg viewBox="0 0 32 32" role="presentation" className="app-svg icons-bullets">
+    <g className="icons-default-fill">
+      <g className="icons-unfilled">
+        <path d="M13.4999,11h9c0.2761,0,0.5-0.2236,0.5-0.5s-0.2239-0.5-0.5-0.5h-9c-0.2761,0-0.5,0.2236-0.5,0.5S13.2238,11,13.4999,11z" />
+        <path d="M22.4999,15h-9c-0.2761,0-0.5,0.2236-0.5,0.5s0.2239,0.5,0.5,0.5h9c0.2761,0,0.5-0.2236,0.5-0.5S22.776,15,22.4999,15z" />
+        <path d="M22.4999,20h-9c-0.2761,0-0.5,0.2236-0.5,0.5s0.2239,0.5,0.5,0.5h9c0.2761,0,0.5-0.2236,0.5-0.5S22.776,20,22.4999,20z" />
+        <circle cx="10.5" cy="10.5" r="1" />
+        <circle cx="10.5" cy="20.5" r="1" />
+        <circle cx="10.5" cy="15.5" r="1" />
+      </g>
+      <g className="icons-filled">
+        <path
+          d="M13.4999,11.25h9c0.4143,0,0.75-0.3359,0.75-0.75s-0.3357-0.75-0.75-0.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75
+             S13.0856,11.25,13.4999,11.25z"
+        />
+        <path
+          d="M22.4999,14.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75s0.3357,0.75,0.75,0.75h9c0.4143,0,0.75-0.3359,0.75-0.75
+             S22.9142,14.75,22.4999,14.75z"
+        />
+        <path
+          d="M22.4999,19.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75s0.3357,0.75,0.75,0.75h9c0.4143,0,0.75-0.3359,0.75-0.75
+             S22.9142,19.75,22.4999,19.75z"
+        />
+        <circle cx="10.5" cy="10.5" r="1" />
+        <circle cx="10.5" cy="15.5" r="1" />
+        <circle cx="10.5" cy="20.5" r="1" />
+      </g>
+    </g>
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/teams/components/Icon/svg/icons/gallery.tsx b/src/themes/teams/components/Icon/svg/icons/gallery.tsx
new file mode 100644
index 0000000000..07507e39d5
--- /dev/null
+++ b/src/themes/teams/components/Icon/svg/icons/gallery.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg
+      viewBox="0 0 32 32"
+      role="img"
+      className="app-svg icons-gallery"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-labelledby="icons-gallery"
+    >
+      <title id="icons-gallery" translate-once="{{::$root.resources.strings.icons_gallery}}" />
+      <g className="icons-default-fill" role="presentation">
+        <g className="icons-unfilled">
+          <path
+            d="M16,9.5v5c0,0.1357,0.0498,0.2529,0.1484,0.3516C16.2471,14.9507,16.3643,15,16.5,15h5
+	      c0.1357,0,0.2529-0.0493,0.3516-0.1484C21.9502,14.7529,22,14.6357,22,14.5v-4c0-0.2031-0.04-0.3945-0.1211-0.5742
+	      s-0.1904-0.3384-0.3281-0.4766c-0.1377-0.1377-0.2969-0.2471-0.4766-0.3281C20.8945,9.0405,20.7031,9,20.5,9h-4
+	      c-0.1357,0-0.2529,0.0498-0.3516,0.1484C16.0498,9.2476,16,9.3647,16,9.5z M17,10h3.5c0.1357,0,0.2529,0.0498,0.3516,0.1484
+	      C20.9502,10.2476,21,10.3647,21,10.5V14h-4V10z"
+          />
+          <path
+            d="M9.4492,9.4492C9.3115,9.5874,9.2021,9.7461,9.1211,9.9258S9,10.2969,9,10.5v4c0,0.1357,0.0498,0.2529,0.1484,0.3516
+	      C9.2471,14.9507,9.3643,15,9.5,15h5c0.1357,0,0.2529-0.0493,0.3516-0.1484C14.9502,14.7529,15,14.6357,15,14.5v-5
+	      c0-0.1353-0.0498-0.2524-0.1484-0.3516C14.7529,9.0498,14.6357,9,14.5,9h-4c-0.2031,0-0.3945,0.0405-0.5742,0.1211
+	      C9.7461,9.2021,9.5869,9.3115,9.4492,9.4492z M10,10.5c0-0.1353,0.0498-0.2524,0.1484-0.3516C10.2471,10.0498,10.3643,10,10.5,10H14
+	      v4h-4V10.5z"
+          />
+          <path
+            d="M16.5,22h4c0.2031,0,0.3945-0.04,0.5742-0.1211c0.1797-0.0801,0.3389-0.1895,0.4766-0.3281
+	      c0.1377-0.1377,0.2471-0.2969,0.3281-0.4766S22,20.7031,22,20.5v-4c0-0.1353-0.0498-0.2524-0.1484-0.3516
+	      C21.7529,16.0498,21.6357,16,21.5,16h-5c-0.1357,0-0.2529,0.0498-0.3516,0.1484C16.0498,16.2476,16,16.3647,16,16.5v5
+	      c0,0.1357,0.0498,0.2529,0.1484,0.3516C16.2471,21.9512,16.3643,22,16.5,22z M17,17h4v3.5c0,0.1357-0.0498,0.2529-0.1484,0.3516
+	      C20.7529,20.9512,20.6357,21,20.5,21H17V17z"
+          />
+          <path
+            d="M9.4492,21.5508c0.1377,0.1387,0.2969,0.248,0.4766,0.3281C10.1055,21.96,10.2969,22,10.5,22h4
+	      c0.1357,0,0.2529-0.0488,0.3516-0.1484C14.9502,21.7529,15,21.6357,15,21.5v-5c0-0.1353-0.0498-0.2524-0.1484-0.3516
+	      C14.7529,16.0498,14.6357,16,14.5,16h-5c-0.1357,0-0.2529,0.0498-0.3516,0.1484C9.0498,16.2476,9,16.3647,9,16.5v4
+	      c0,0.2031,0.04,0.3945,0.1211,0.5742S9.3115,21.4131,9.4492,21.5508z M10,17h4v4h-3.5c-0.1357,0-0.2529-0.0488-0.3516-0.1484
+	      C10.0498,20.7529,10,20.6357,10,20.5V17z"
+          />
+        </g>
+        <g className="icons-filled">
+          <path
+            d="M22,15v-4.5c0-0.2031-0.04-0.3955-0.1211-0.5781c-0.0811-0.1821-0.1885-0.3408-0.3242-0.4766
+	      C21.419,9.31,21.2608,9.2021,21.0781,9.1211C20.8955,9.0405,20.7031,9,20.5,9H16v6H22z"
+          />
+          <path
+            d="M9.4453,21.5547c0.1357,0.1357,0.2939,0.2441,0.4766,0.3242C10.1045,21.96,10.2969,22,10.5,22H15v-6H9v4.5
+	      c0,0.2031,0.04,0.3965,0.1211,0.5781C9.2021,21.2607,9.3096,21.4199,9.4453,21.5547z"
+          />
+          <path
+            d="M9.4453,9.4453C9.3096,9.581,9.2021,9.7397,9.1211,9.9219C9.04,10.1045,9,10.2969,9,10.5V15h6V9h-4.5
+	      c-0.2031,0-0.3955,0.0405-0.5781,0.1211C9.7393,9.2021,9.5811,9.3101,9.4453,9.4453z"
+          />
+          <path
+            d="M21.0781,21.8789c0.1826-0.0801,0.3408-0.1885,0.4766-0.3242c0.1357-0.1348,0.2432-0.2939,0.3242-0.4766
+	      C21.96,20.8965,22,20.7031,22,20.5V16h-6v6h4.5C20.7031,22,20.8955,21.96,21.0781,21.8789z"
+          />
+        </g>
+      </g>
+    </svg>
+  ),
+  styles: {
+    svg: ({ variables }) => {
+      return {
+        fill: variables.color,
+      }
+    },
+  },
+} as TeamsSvgIconSpec
diff --git a/src/themes/teams/components/Icon/svg/icons/index.ts b/src/themes/teams/components/Icon/svg/icons/index.ts
index 1aca8c2efc..7869940321 100644
--- a/src/themes/teams/components/Icon/svg/icons/index.ts
+++ b/src/themes/teams/components/Icon/svg/icons/index.ts
@@ -1,5 +1,6 @@
 import { TeamsSvgIconSpec } from '../types'
 
+import bookmark from './bookmark'
 import call from './call'
 import callEnd from './callEnd'
 import callVideo from './callIncomingVideo'
@@ -17,8 +18,12 @@ import giphy from './giphy'
 import fontColor from './fontColor'
 import fontSize from './fontSize'
 import highlight from './highlight'
+import bullets from './bullets'
+import gallery from './gallery'
+import menu from './menu'
 
 export default {
+  bookmark,
   call,
   'call-end': callEnd,
   'call-video': callVideo,
@@ -34,6 +39,9 @@ export default {
   format,
   giphy,
   highlight,
+  bullets,
+  gallery,
+  menu,
   'font-color': fontColor,
   'font-size': fontSize,
 } as { [iconName: string]: TeamsSvgIconSpec }
diff --git a/src/themes/teams/components/Icon/svg/icons/menu.tsx b/src/themes/teams/components/Icon/svg/icons/menu.tsx
new file mode 100644
index 0000000000..c016df53e5
--- /dev/null
+++ b/src/themes/teams/components/Icon/svg/icons/menu.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg viewBox="0 0 32 32" role="presentation" className="app-svg icons-menu">
+    <path
+      className="icons-default-fill"
+      d="M9,11h13c0.6,0,1-0.4,1-1s-0.4-1-1-1H9c-0.6,0-1,0.4-1,1S8.4,11,9,11zM22,19H9c-0.6,0-1,0.4-1,1s0.4,1,1,1h13c0.6,0,1-0.4,1-1S22.6,19,22,19zM22,14H9c-0.6,0-1,0.4-1,1s0.4,1,1,1h13c0.6,0,1-0.4,1-1S22.6,14,22,14z"
+    />
+  </svg>
+) as TeamsSvgIconSpec

From 37aac4a5f55ae5f4ebcf956678ed902b75c4fbbb Mon Sep 17 00:00:00 2001
From: Vyshnavi Dasari <vydasari@microsoft.com>
Date: Wed, 14 Nov 2018 17:48:43 +0530
Subject: [PATCH 2/5] Added Add Icon

---
 .../teams/components/Icon/svg/icons/add.tsx   | 33 +++++++++++++++++++
 .../teams/components/Icon/svg/icons/index.ts  |  2 ++
 2 files changed, 35 insertions(+)
 create mode 100644 src/themes/teams/components/Icon/svg/icons/add.tsx

diff --git a/src/themes/teams/components/Icon/svg/icons/add.tsx b/src/themes/teams/components/Icon/svg/icons/add.tsx
new file mode 100644
index 0000000000..3d98180cb5
--- /dev/null
+++ b/src/themes/teams/components/Icon/svg/icons/add.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg viewBox="0 0 32 32" role="presentation" className="app-svg icons-add" focusable="false">
+    <g className="icons-default-fill">
+      <path
+        className="icons-unfilled"
+        d="M23.3516,16.1172C23.4502,16.2168,23.5,16.334,23.5,16.4688c0,0.1357-0.0498,0.2529-0.1484,0.3516
+              C23.252,16.9199,23.1348,16.9688,23,16.9688h-6v6c0,0.1357-0.0498,0.2529-0.1484,0.3516c-0.0996,0.0996-0.2168,0.1484-0.3516,0.1484
+              c-0.1357,0-0.2529-0.0488-0.3516-0.1484C16.0488,23.2217,16,23.1045,16,22.9688v-6h-6c-0.1357,0-0.2529-0.0488-0.3516-0.1484
+              C9.5493,16.7217,9.5,16.6045,9.5,16.4688c0-0.1348,0.0493-0.252,0.1484-0.3516C9.7471,16.0186,9.8643,15.9688,10,15.9688h6v-6
+              c0-0.1353,0.0488-0.2524,0.1484-0.3516c0.0986-0.0986,0.2158-0.1484,0.3516-0.1484c0.1348,0,0.252,0.0498,0.3516,0.1484
+              C16.9502,9.7163,17,9.8335,17,9.9688v6h6C23.1348,15.9688,23.252,16.0186,23.3516,16.1172z"
+      />
+      <path
+        className="icons-filled"
+        d="M23.5,15.9688c0,0.1357-0.0264,0.2646-0.0781,0.3867c-0.0527,0.123-0.124,0.2295-0.2148,0.3203
+              c-0.0918,0.0918-0.1982,0.1631-0.3203,0.2148c-0.123,0.0527-0.252,0.0781-0.3867,0.0781H17v5.5
+              c0,0.1357-0.0264,0.2646-0.0781,0.3867c-0.0527,0.123-0.124,0.2295-0.2148,0.3203c-0.0918,0.0918-0.1982,0.1631-0.3203,0.2148
+              c-0.123,0.0527-0.252,0.0781-0.3867,0.0781c-0.1357,0-0.2646-0.0254-0.3867-0.0781c-0.1226-0.0518-0.2295-0.123-0.3203-0.2148
+              c-0.0913-0.0908-0.1631-0.1973-0.2148-0.3203C15.0259,22.7334,15,22.6045,15,22.4688v-5.5H9.5
+              c-0.1357,0-0.2646-0.0254-0.3867-0.0781c-0.1226-0.0518-0.2295-0.123-0.3203-0.2148c-0.0913-0.0908-0.1631-0.1973-0.2148-0.3203
+              C8.5259,16.2334,8.5,16.1045,8.5,15.9688c0-0.1353,0.0259-0.2642,0.0781-0.3867c0.0518-0.1221,0.1235-0.229,0.2148-0.3203
+              c0.0908-0.0908,0.1978-0.1626,0.3203-0.2148c0.1221-0.0518,0.251-0.0781,0.3867-0.0781H15v-5.5
+              c0-0.1353,0.0259-0.2642,0.0781-0.3867c0.0518-0.1221,0.1235-0.229,0.2148-0.3203c0.0908-0.0908,0.1978-0.1626,0.3203-0.2148
+              C15.7354,8.4951,15.8643,8.4688,16,8.4688c0.1348,0,0.2637,0.0264,0.3867,0.0781c0.1221,0.0522,0.2285,0.124,0.3203,0.2148
+              C16.7979,8.853,16.8691,8.96,16.9219,9.082C16.9736,9.2046,17,9.3335,17,9.4688v5.5h5.5c0.1348,0,0.2637,0.0264,0.3867,0.0781
+              c0.1221,0.0522,0.2285,0.124,0.3203,0.2148c0.0908,0.0913,0.1621,0.1982,0.2148,0.3203C23.4736,15.7046,23.5,15.8335,23.5,15.9688z"
+      />
+    </g>
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/teams/components/Icon/svg/icons/index.ts b/src/themes/teams/components/Icon/svg/icons/index.ts
index 7869940321..a008acb4d0 100644
--- a/src/themes/teams/components/Icon/svg/icons/index.ts
+++ b/src/themes/teams/components/Icon/svg/icons/index.ts
@@ -1,5 +1,6 @@
 import { TeamsSvgIconSpec } from '../types'
 
+import add from './add'
 import bookmark from './bookmark'
 import call from './call'
 import callEnd from './callEnd'
@@ -23,6 +24,7 @@ import gallery from './gallery'
 import menu from './menu'
 
 export default {
+  add,
   bookmark,
   call,
   'call-end': callEnd,

From ed128fd72ef1c68482a2aa7701af24ed450e6490 Mon Sep 17 00:00:00 2001
From: Vyshnavi Dasari <vydasari@microsoft.com>
Date: Fri, 16 Nov 2018 13:13:00 +0530
Subject: [PATCH 3/5] Modified classNames

---
 .../teams/components/Icon/svg/icons/add.tsx   | 26 +------
 .../components/Icon/svg/icons/bookmark.tsx    |  7 +-
 .../components/Icon/svg/icons/bullets.tsx     | 38 ++++------
 .../components/Icon/svg/icons/gallery.tsx     | 75 ++++++++++---------
 .../teams/components/Icon/svg/icons/menu.tsx  |  7 +-
 5 files changed, 59 insertions(+), 94 deletions(-)

diff --git a/src/themes/teams/components/Icon/svg/icons/add.tsx b/src/themes/teams/components/Icon/svg/icons/add.tsx
index 3d98180cb5..420c434e2f 100644
--- a/src/themes/teams/components/Icon/svg/icons/add.tsx
+++ b/src/themes/teams/components/Icon/svg/icons/add.tsx
@@ -2,32 +2,14 @@ import * as React from 'react'
 import { TeamsSvgIconSpec } from '../types'
 
 export default (
-  <svg viewBox="0 0 32 32" role="presentation" className="app-svg icons-add" focusable="false">
-    <g className="icons-default-fill">
-      <path
-        className="icons-unfilled"
-        d="M23.3516,16.1172C23.4502,16.2168,23.5,16.334,23.5,16.4688c0,0.1357-0.0498,0.2529-0.1484,0.3516
+  <svg viewBox="0 0 32 32" role="presentation" focusable="false">
+    <path
+      d="M23.3516,16.1172C23.4502,16.2168,23.5,16.334,23.5,16.4688c0,0.1357-0.0498,0.2529-0.1484,0.3516
               C23.252,16.9199,23.1348,16.9688,23,16.9688h-6v6c0,0.1357-0.0498,0.2529-0.1484,0.3516c-0.0996,0.0996-0.2168,0.1484-0.3516,0.1484
               c-0.1357,0-0.2529-0.0488-0.3516-0.1484C16.0488,23.2217,16,23.1045,16,22.9688v-6h-6c-0.1357,0-0.2529-0.0488-0.3516-0.1484
               C9.5493,16.7217,9.5,16.6045,9.5,16.4688c0-0.1348,0.0493-0.252,0.1484-0.3516C9.7471,16.0186,9.8643,15.9688,10,15.9688h6v-6
               c0-0.1353,0.0488-0.2524,0.1484-0.3516c0.0986-0.0986,0.2158-0.1484,0.3516-0.1484c0.1348,0,0.252,0.0498,0.3516,0.1484
               C16.9502,9.7163,17,9.8335,17,9.9688v6h6C23.1348,15.9688,23.252,16.0186,23.3516,16.1172z"
-      />
-      <path
-        className="icons-filled"
-        d="M23.5,15.9688c0,0.1357-0.0264,0.2646-0.0781,0.3867c-0.0527,0.123-0.124,0.2295-0.2148,0.3203
-              c-0.0918,0.0918-0.1982,0.1631-0.3203,0.2148c-0.123,0.0527-0.252,0.0781-0.3867,0.0781H17v5.5
-              c0,0.1357-0.0264,0.2646-0.0781,0.3867c-0.0527,0.123-0.124,0.2295-0.2148,0.3203c-0.0918,0.0918-0.1982,0.1631-0.3203,0.2148
-              c-0.123,0.0527-0.252,0.0781-0.3867,0.0781c-0.1357,0-0.2646-0.0254-0.3867-0.0781c-0.1226-0.0518-0.2295-0.123-0.3203-0.2148
-              c-0.0913-0.0908-0.1631-0.1973-0.2148-0.3203C15.0259,22.7334,15,22.6045,15,22.4688v-5.5H9.5
-              c-0.1357,0-0.2646-0.0254-0.3867-0.0781c-0.1226-0.0518-0.2295-0.123-0.3203-0.2148c-0.0913-0.0908-0.1631-0.1973-0.2148-0.3203
-              C8.5259,16.2334,8.5,16.1045,8.5,15.9688c0-0.1353,0.0259-0.2642,0.0781-0.3867c0.0518-0.1221,0.1235-0.229,0.2148-0.3203
-              c0.0908-0.0908,0.1978-0.1626,0.3203-0.2148c0.1221-0.0518,0.251-0.0781,0.3867-0.0781H15v-5.5
-              c0-0.1353,0.0259-0.2642,0.0781-0.3867c0.0518-0.1221,0.1235-0.229,0.2148-0.3203c0.0908-0.0908,0.1978-0.1626,0.3203-0.2148
-              C15.7354,8.4951,15.8643,8.4688,16,8.4688c0.1348,0,0.2637,0.0264,0.3867,0.0781c0.1221,0.0522,0.2285,0.124,0.3203,0.2148
-              C16.7979,8.853,16.8691,8.96,16.9219,9.082C16.9736,9.2046,17,9.3335,17,9.4688v5.5h5.5c0.1348,0,0.2637,0.0264,0.3867,0.0781
-              c0.1221,0.0522,0.2285,0.124,0.3203,0.2148c0.0908,0.0913,0.1621,0.1982,0.2148,0.3203C23.4736,15.7046,23.5,15.8335,23.5,15.9688z"
-      />
-    </g>
+    />
   </svg>
 ) as TeamsSvgIconSpec
diff --git a/src/themes/teams/components/Icon/svg/icons/bookmark.tsx b/src/themes/teams/components/Icon/svg/icons/bookmark.tsx
index d18eb73023..8dd33a1c07 100644
--- a/src/themes/teams/components/Icon/svg/icons/bookmark.tsx
+++ b/src/themes/teams/components/Icon/svg/icons/bookmark.tsx
@@ -3,13 +3,8 @@ import { TeamsSvgIconSpec } from '../types'
 
 export default {
   icon: ({ classes }) => (
-    <svg
-      viewBox="0 0 32 32"
-      role="presentation"
-      className="app-svg icons-bookmark icon-hide-on-hover"
-    >
+    <svg viewBox="0 0 32 32" role="presentation" className={classes.svg}>
       <path
-        className="icons-default-fill"
         d="M12,23.3c-0.1,0-0.3,0-0.4-0.1c-0.4-0.2-0.6-0.5-0.6-0.9V9.9c0-0.7,0.5-1.3,1.2-1.5c2.4-0.6,5.2-0.6,7.7,0
            C20.5,8.6,21,9.2,21,9.9v12.4c0,0.4-0.2,0.8-0.6,0.9c-0.4,0.2-0.8,0.1-1.1-0.2L16,19.7L12.7,23C12.5,23.2,12.3,23.3,12,23.3z
            M16,18.7c0.3,0,0.5,0.1,0.7,0.3l3.3,3.3V9.9c0-0.2-0.2-0.4-0.4-0.5c-2.3-0.5-4.9-0.5-7.2,0C12.2,9.4,12,9.6,12,9.9v12.4l3.3-3.3
diff --git a/src/themes/teams/components/Icon/svg/icons/bullets.tsx b/src/themes/teams/components/Icon/svg/icons/bullets.tsx
index 5e013ed31d..1443b4fadd 100644
--- a/src/themes/teams/components/Icon/svg/icons/bullets.tsx
+++ b/src/themes/teams/components/Icon/svg/icons/bullets.tsx
@@ -2,33 +2,21 @@ import * as React from 'react'
 import { TeamsSvgIconSpec } from '../types'
 
 export default (
-  <svg viewBox="0 0 32 32" role="presentation" className="app-svg icons-bullets">
-    <g className="icons-default-fill">
-      <g className="icons-unfilled">
-        <path d="M13.4999,11h9c0.2761,0,0.5-0.2236,0.5-0.5s-0.2239-0.5-0.5-0.5h-9c-0.2761,0-0.5,0.2236-0.5,0.5S13.2238,11,13.4999,11z" />
-        <path d="M22.4999,15h-9c-0.2761,0-0.5,0.2236-0.5,0.5s0.2239,0.5,0.5,0.5h9c0.2761,0,0.5-0.2236,0.5-0.5S22.776,15,22.4999,15z" />
-        <path d="M22.4999,20h-9c-0.2761,0-0.5,0.2236-0.5,0.5s0.2239,0.5,0.5,0.5h9c0.2761,0,0.5-0.2236,0.5-0.5S22.776,20,22.4999,20z" />
-        <circle cx="10.5" cy="10.5" r="1" />
-        <circle cx="10.5" cy="20.5" r="1" />
-        <circle cx="10.5" cy="15.5" r="1" />
-      </g>
-      <g className="icons-filled">
-        <path
-          d="M13.4999,11.25h9c0.4143,0,0.75-0.3359,0.75-0.75s-0.3357-0.75-0.75-0.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75
+  <svg viewBox="0 0 32 32" role="presentation">
+    <path
+      d="M13.4999,11.25h9c0.4143,0,0.75-0.3359,0.75-0.75s-0.3357-0.75-0.75-0.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75
              S13.0856,11.25,13.4999,11.25z"
-        />
-        <path
-          d="M22.4999,14.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75s0.3357,0.75,0.75,0.75h9c0.4143,0,0.75-0.3359,0.75-0.75
+    />
+    <path
+      d="M22.4999,14.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75s0.3357,0.75,0.75,0.75h9c0.4143,0,0.75-0.3359,0.75-0.75
              S22.9142,14.75,22.4999,14.75z"
-        />
-        <path
-          d="M22.4999,19.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75s0.3357,0.75,0.75,0.75h9c0.4143,0,0.75-0.3359,0.75-0.75
+    />
+    <path
+      d="M22.4999,19.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75s0.3357,0.75,0.75,0.75h9c0.4143,0,0.75-0.3359,0.75-0.75
              S22.9142,19.75,22.4999,19.75z"
-        />
-        <circle cx="10.5" cy="10.5" r="1" />
-        <circle cx="10.5" cy="15.5" r="1" />
-        <circle cx="10.5" cy="20.5" r="1" />
-      </g>
-    </g>
+    />
+    <circle cx="10.5" cy="10.5" r="1" />
+    <circle cx="10.5" cy="15.5" r="1" />
+    <circle cx="10.5" cy="20.5" r="1" />
   </svg>
 ) as TeamsSvgIconSpec
diff --git a/src/themes/teams/components/Icon/svg/icons/gallery.tsx b/src/themes/teams/components/Icon/svg/icons/gallery.tsx
index 07507e39d5..186972772a 100644
--- a/src/themes/teams/components/Icon/svg/icons/gallery.tsx
+++ b/src/themes/teams/components/Icon/svg/icons/gallery.tsx
@@ -10,64 +10,67 @@ export default {
       xmlns="http://www.w3.org/2000/svg"
       aria-labelledby="icons-gallery"
     >
-      <title id="icons-gallery" translate-once="{{::$root.resources.strings.icons_gallery}}" />
-      <g className="icons-default-fill" role="presentation">
-        <g className="icons-unfilled">
-          <path
-            d="M16,9.5v5c0,0.1357,0.0498,0.2529,0.1484,0.3516C16.2471,14.9507,16.3643,15,16.5,15h5
+      <path
+        className={classes.secondaryPath}
+        d="M16,9.5v5c0,0.1357,0.0498,0.2529,0.1484,0.3516C16.2471,14.9507,16.3643,15,16.5,15h5
 	      c0.1357,0,0.2529-0.0493,0.3516-0.1484C21.9502,14.7529,22,14.6357,22,14.5v-4c0-0.2031-0.04-0.3945-0.1211-0.5742
 	      s-0.1904-0.3384-0.3281-0.4766c-0.1377-0.1377-0.2969-0.2471-0.4766-0.3281C20.8945,9.0405,20.7031,9,20.5,9h-4
 	      c-0.1357,0-0.2529,0.0498-0.3516,0.1484C16.0498,9.2476,16,9.3647,16,9.5z M17,10h3.5c0.1357,0,0.2529,0.0498,0.3516,0.1484
 	      C20.9502,10.2476,21,10.3647,21,10.5V14h-4V10z"
-          />
-          <path
-            d="M9.4492,9.4492C9.3115,9.5874,9.2021,9.7461,9.1211,9.9258S9,10.2969,9,10.5v4c0,0.1357,0.0498,0.2529,0.1484,0.3516
+      />
+      <path
+        className={classes.secondaryPath}
+        d="M9.4492,9.4492C9.3115,9.5874,9.2021,9.7461,9.1211,9.9258S9,10.2969,9,10.5v4c0,0.1357,0.0498,0.2529,0.1484,0.3516
 	      C9.2471,14.9507,9.3643,15,9.5,15h5c0.1357,0,0.2529-0.0493,0.3516-0.1484C14.9502,14.7529,15,14.6357,15,14.5v-5
 	      c0-0.1353-0.0498-0.2524-0.1484-0.3516C14.7529,9.0498,14.6357,9,14.5,9h-4c-0.2031,0-0.3945,0.0405-0.5742,0.1211
 	      C9.7461,9.2021,9.5869,9.3115,9.4492,9.4492z M10,10.5c0-0.1353,0.0498-0.2524,0.1484-0.3516C10.2471,10.0498,10.3643,10,10.5,10H14
 	      v4h-4V10.5z"
-          />
-          <path
-            d="M16.5,22h4c0.2031,0,0.3945-0.04,0.5742-0.1211c0.1797-0.0801,0.3389-0.1895,0.4766-0.3281
+      />
+      <path
+        className={classes.secondaryPath}
+        d="M16.5,22h4c0.2031,0,0.3945-0.04,0.5742-0.1211c0.1797-0.0801,0.3389-0.1895,0.4766-0.3281
 	      c0.1377-0.1377,0.2471-0.2969,0.3281-0.4766S22,20.7031,22,20.5v-4c0-0.1353-0.0498-0.2524-0.1484-0.3516
 	      C21.7529,16.0498,21.6357,16,21.5,16h-5c-0.1357,0-0.2529,0.0498-0.3516,0.1484C16.0498,16.2476,16,16.3647,16,16.5v5
 	      c0,0.1357,0.0498,0.2529,0.1484,0.3516C16.2471,21.9512,16.3643,22,16.5,22z M17,17h4v3.5c0,0.1357-0.0498,0.2529-0.1484,0.3516
 	      C20.7529,20.9512,20.6357,21,20.5,21H17V17z"
-          />
-          <path
-            d="M9.4492,21.5508c0.1377,0.1387,0.2969,0.248,0.4766,0.3281C10.1055,21.96,10.2969,22,10.5,22h4
+      />
+      <path
+        className={classes.secondaryPath}
+        d="M9.4492,21.5508c0.1377,0.1387,0.2969,0.248,0.4766,0.3281C10.1055,21.96,10.2969,22,10.5,22h4
 	      c0.1357,0,0.2529-0.0488,0.3516-0.1484C14.9502,21.7529,15,21.6357,15,21.5v-5c0-0.1353-0.0498-0.2524-0.1484-0.3516
 	      C14.7529,16.0498,14.6357,16,14.5,16h-5c-0.1357,0-0.2529,0.0498-0.3516,0.1484C9.0498,16.2476,9,16.3647,9,16.5v4
 	      c0,0.2031,0.04,0.3945,0.1211,0.5742S9.3115,21.4131,9.4492,21.5508z M10,17h4v4h-3.5c-0.1357,0-0.2529-0.0488-0.3516-0.1484
 	      C10.0498,20.7529,10,20.6357,10,20.5V17z"
-          />
-        </g>
-        <g className="icons-filled">
-          <path
-            d="M22,15v-4.5c0-0.2031-0.04-0.3955-0.1211-0.5781c-0.0811-0.1821-0.1885-0.3408-0.3242-0.4766
+      />
+
+      <path
+        className={classes.path}
+        d="M22,15v-4.5c0-0.2031-0.04-0.3955-0.1211-0.5781c-0.0811-0.1821-0.1885-0.3408-0.3242-0.4766
 	      C21.419,9.31,21.2608,9.2021,21.0781,9.1211C20.8955,9.0405,20.7031,9,20.5,9H16v6H22z"
-          />
-          <path
-            d="M9.4453,21.5547c0.1357,0.1357,0.2939,0.2441,0.4766,0.3242C10.1045,21.96,10.2969,22,10.5,22H15v-6H9v4.5
+      />
+      <path
+        className={classes.path}
+        d="M9.4453,21.5547c0.1357,0.1357,0.2939,0.2441,0.4766,0.3242C10.1045,21.96,10.2969,22,10.5,22H15v-6H9v4.5
 	      c0,0.2031,0.04,0.3965,0.1211,0.5781C9.2021,21.2607,9.3096,21.4199,9.4453,21.5547z"
-          />
-          <path
-            d="M9.4453,9.4453C9.3096,9.581,9.2021,9.7397,9.1211,9.9219C9.04,10.1045,9,10.2969,9,10.5V15h6V9h-4.5
+      />
+      <path
+        className={classes.path}
+        d="M9.4453,9.4453C9.3096,9.581,9.2021,9.7397,9.1211,9.9219C9.04,10.1045,9,10.2969,9,10.5V15h6V9h-4.5
 	      c-0.2031,0-0.3955,0.0405-0.5781,0.1211C9.7393,9.2021,9.5811,9.3101,9.4453,9.4453z"
-          />
-          <path
-            d="M21.0781,21.8789c0.1826-0.0801,0.3408-0.1885,0.4766-0.3242c0.1357-0.1348,0.2432-0.2939,0.3242-0.4766
+      />
+      <path
+        className={classes.path}
+        d="M21.0781,21.8789c0.1826-0.0801,0.3408-0.1885,0.4766-0.3242c0.1357-0.1348,0.2432-0.2939,0.3242-0.4766
 	      C21.96,20.8965,22,20.7031,22,20.5V16h-6v6h4.5C20.7031,22,20.8955,21.96,21.0781,21.8789z"
-          />
-        </g>
-      </g>
+      />
     </svg>
   ),
   styles: {
-    svg: ({ variables }) => {
-      return {
-        fill: variables.color,
-      }
-    },
+    path: ({ variables: v }) => ({
+      fill: v.color,
+    }),
+    secondaryPath: ({ variables: v }) => ({
+      fill: v.secondaryColor,
+    }),
   },
 } as TeamsSvgIconSpec
diff --git a/src/themes/teams/components/Icon/svg/icons/menu.tsx b/src/themes/teams/components/Icon/svg/icons/menu.tsx
index c016df53e5..5ff53d0eab 100644
--- a/src/themes/teams/components/Icon/svg/icons/menu.tsx
+++ b/src/themes/teams/components/Icon/svg/icons/menu.tsx
@@ -2,10 +2,7 @@ import * as React from 'react'
 import { TeamsSvgIconSpec } from '../types'
 
 export default (
-  <svg viewBox="0 0 32 32" role="presentation" className="app-svg icons-menu">
-    <path
-      className="icons-default-fill"
-      d="M9,11h13c0.6,0,1-0.4,1-1s-0.4-1-1-1H9c-0.6,0-1,0.4-1,1S8.4,11,9,11zM22,19H9c-0.6,0-1,0.4-1,1s0.4,1,1,1h13c0.6,0,1-0.4,1-1S22.6,19,22,19zM22,14H9c-0.6,0-1,0.4-1,1s0.4,1,1,1h13c0.6,0,1-0.4,1-1S22.6,14,22,14z"
-    />
+  <svg viewBox="0 0 32 32" role="presentation">
+    <path d="M9,11h13c0.6,0,1-0.4,1-1s-0.4-1-1-1H9c-0.6,0-1,0.4-1,1S8.4,11,9,11zM22,19H9c-0.6,0-1,0.4-1,1s0.4,1,1,1h13c0.6,0,1-0.4,1-1S22.6,19,22,19zM22,14H9c-0.6,0-1,0.4-1,1s0.4,1,1,1h13c0.6,0,1-0.4,1-1S22.6,14,22,14z" />
   </svg>
 ) as TeamsSvgIconSpec

From 88026b9e98f2dc62dc85c98cf397ffb911d856eb Mon Sep 17 00:00:00 2001
From: Vyshnavi Dasari <vydasari@microsoft.com>
Date: Mon, 19 Nov 2018 13:11:26 +0530
Subject: [PATCH 4/5]  Arranged icons in alphabetical order

---
 .../teams/components/Icon/svg/icons/gallery.tsx      |  1 -
 src/themes/teams/components/Icon/svg/icons/index.ts  | 12 ++++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/themes/teams/components/Icon/svg/icons/gallery.tsx b/src/themes/teams/components/Icon/svg/icons/gallery.tsx
index 186972772a..1ebc1f4b51 100644
--- a/src/themes/teams/components/Icon/svg/icons/gallery.tsx
+++ b/src/themes/teams/components/Icon/svg/icons/gallery.tsx
@@ -6,7 +6,6 @@ export default {
     <svg
       viewBox="0 0 32 32"
       role="img"
-      className="app-svg icons-gallery"
       xmlns="http://www.w3.org/2000/svg"
       aria-labelledby="icons-gallery"
     >
diff --git a/src/themes/teams/components/Icon/svg/icons/index.ts b/src/themes/teams/components/Icon/svg/icons/index.ts
index a008acb4d0..6f65cfade7 100644
--- a/src/themes/teams/components/Icon/svg/icons/index.ts
+++ b/src/themes/teams/components/Icon/svg/icons/index.ts
@@ -2,6 +2,7 @@ import { TeamsSvgIconSpec } from '../types'
 
 import add from './add'
 import bookmark from './bookmark'
+import bullets from './bullets'
 import call from './call'
 import callEnd from './callEnd'
 import callVideo from './callIncomingVideo'
@@ -10,6 +11,8 @@ import callStartPresenting from './callControlPresentNew'
 import callStopPresenting from './callControlStopPresentingNew'
 import callMicrophone from './callMicrophone'
 import callMicrophoneOff from './callMicrophoneOff'
+import gallery from './gallery'
+import menu from './menu'
 import more from './more'
 import teamCreate from './teamCreate'
 import umbrella from './umbrella'
@@ -19,13 +22,11 @@ import giphy from './giphy'
 import fontColor from './fontColor'
 import fontSize from './fontSize'
 import highlight from './highlight'
-import bullets from './bullets'
-import gallery from './gallery'
-import menu from './menu'
 
 export default {
   add,
   bookmark,
+  bullets,
   call,
   'call-end': callEnd,
   'call-video': callVideo,
@@ -34,6 +35,8 @@ export default {
   'call-stop-presenting': callStopPresenting,
   'call-microphone': callMicrophone,
   'call-microphone-off': callMicrophoneOff,
+  gallery,
+  menu,
   more,
   'team-create': teamCreate,
   umbrella,
@@ -41,9 +44,6 @@ export default {
   format,
   giphy,
   highlight,
-  bullets,
-  gallery,
-  menu,
   'font-color': fontColor,
   'font-size': fontSize,
 } as { [iconName: string]: TeamsSvgIconSpec }

From 60d2ee92d152c626cfba060335dc01915812bd31 Mon Sep 17 00:00:00 2001
From: Vyshnavi Dasari <vydasari@microsoft.com>
Date: Thu, 22 Nov 2018 13:07:56 +0530
Subject: [PATCH 5/5]  Added outlines for icons

---
 .../teams/components/Icon/svg/icons/add.tsx   |  33 +++--
 .../components/Icon/svg/icons/bookmark.tsx    |  14 ++-
 .../components/Icon/svg/icons/bullets.tsx     |  51 +++++---
 .../components/Icon/svg/icons/gallery.tsx     | 113 ++++++++----------
 .../teams/components/Icon/svg/icons/menu.tsx  |  15 ++-
 5 files changed, 128 insertions(+), 98 deletions(-)

diff --git a/src/themes/teams/components/Icon/svg/icons/add.tsx b/src/themes/teams/components/Icon/svg/icons/add.tsx
index 420c434e2f..9993b1f592 100644
--- a/src/themes/teams/components/Icon/svg/icons/add.tsx
+++ b/src/themes/teams/components/Icon/svg/icons/add.tsx
@@ -1,15 +1,34 @@
 import * as React from 'react'
 import { TeamsSvgIconSpec } from '../types'
 
-export default (
-  <svg viewBox="0 0 32 32" role="presentation" focusable="false">
-    <path
-      d="M23.3516,16.1172C23.4502,16.2168,23.5,16.334,23.5,16.4688c0,0.1357-0.0498,0.2529-0.1484,0.3516
+export default {
+  icon: ({ classes }) => (
+    <svg viewBox="0 0 32 32" role="presentation" focusable="false" className={classes.svg}>
+      <path
+        className={classes.outlinePart}
+        d="M23.3516,16.1172C23.4502,16.2168,23.5,16.334,23.5,16.4688c0,0.1357-0.0498,0.2529-0.1484,0.3516
               C23.252,16.9199,23.1348,16.9688,23,16.9688h-6v6c0,0.1357-0.0498,0.2529-0.1484,0.3516c-0.0996,0.0996-0.2168,0.1484-0.3516,0.1484
               c-0.1357,0-0.2529-0.0488-0.3516-0.1484C16.0488,23.2217,16,23.1045,16,22.9688v-6h-6c-0.1357,0-0.2529-0.0488-0.3516-0.1484
               C9.5493,16.7217,9.5,16.6045,9.5,16.4688c0-0.1348,0.0493-0.252,0.1484-0.3516C9.7471,16.0186,9.8643,15.9688,10,15.9688h6v-6
               c0-0.1353,0.0488-0.2524,0.1484-0.3516c0.0986-0.0986,0.2158-0.1484,0.3516-0.1484c0.1348,0,0.252,0.0498,0.3516,0.1484
               C16.9502,9.7163,17,9.8335,17,9.9688v6h6C23.1348,15.9688,23.252,16.0186,23.3516,16.1172z"
-    />
-  </svg>
-) as TeamsSvgIconSpec
+      />
+      <path
+        className={classes.filledPart}
+        d="M23.5,15.9688c0,0.1357-0.0264,0.2646-0.0781,0.3867c-0.0527,0.123-0.124,0.2295-0.2148,0.3203
+	           c-0.0918,0.0918-0.1982,0.1631-0.3203,0.2148c-0.123,0.0527-0.252,0.0781-0.3867,0.0781H17v5.5
+	           c0,0.1357-0.0264,0.2646-0.0781,0.3867c-0.0527,0.123-0.124,0.2295-0.2148,0.3203c-0.0918,0.0918-0.1982,0.1631-0.3203,0.2148
+	           c-0.123,0.0527-0.252,0.0781-0.3867,0.0781c-0.1357,0-0.2646-0.0254-0.3867-0.0781c-0.1226-0.0518-0.2295-0.123-0.3203-0.2148
+	           c-0.0913-0.0908-0.1631-0.1973-0.2148-0.3203C15.0259,22.7334,15,22.6045,15,22.4688v-5.5H9.5
+	           c-0.1357,0-0.2646-0.0254-0.3867-0.0781c-0.1226-0.0518-0.2295-0.123-0.3203-0.2148c-0.0913-0.0908-0.1631-0.1973-0.2148-0.3203
+	           C8.5259,16.2334,8.5,16.1045,8.5,15.9688c0-0.1353,0.0259-0.2642,0.0781-0.3867c0.0518-0.1221,0.1235-0.229,0.2148-0.3203
+	           c0.0908-0.0908,0.1978-0.1626,0.3203-0.2148c0.1221-0.0518,0.251-0.0781,0.3867-0.0781H15v-5.5
+	           c0-0.1353,0.0259-0.2642,0.0781-0.3867c0.0518-0.1221,0.1235-0.229,0.2148-0.3203c0.0908-0.0908,0.1978-0.1626,0.3203-0.2148
+	           C15.7354,8.4951,15.8643,8.4688,16,8.4688c0.1348,0,0.2637,0.0264,0.3867,0.0781c0.1221,0.0522,0.2285,0.124,0.3203,0.2148
+	           C16.7979,8.853,16.8691,8.96,16.9219,9.082C16.9736,9.2046,17,9.3335,17,9.4688v5.5h5.5c0.1348,0,0.2637,0.0264,0.3867,0.0781
+	           c0.1221,0.0522,0.2285,0.124,0.3203,0.2148c0.0908,0.0913,0.1621,0.1982,0.2148,0.3203C23.4736,15.7046,23.5,15.8335,23.5,15.9688z"
+      />
+    </svg>
+  ),
+  styles: {},
+} as TeamsSvgIconSpec
diff --git a/src/themes/teams/components/Icon/svg/icons/bookmark.tsx b/src/themes/teams/components/Icon/svg/icons/bookmark.tsx
index 8dd33a1c07..dd5fe18a50 100644
--- a/src/themes/teams/components/Icon/svg/icons/bookmark.tsx
+++ b/src/themes/teams/components/Icon/svg/icons/bookmark.tsx
@@ -4,12 +4,14 @@ import { TeamsSvgIconSpec } from '../types'
 export default {
   icon: ({ classes }) => (
     <svg viewBox="0 0 32 32" role="presentation" className={classes.svg}>
-      <path
-        d="M12,23.3c-0.1,0-0.3,0-0.4-0.1c-0.4-0.2-0.6-0.5-0.6-0.9V9.9c0-0.7,0.5-1.3,1.2-1.5c2.4-0.6,5.2-0.6,7.7,0
-           C20.5,8.6,21,9.2,21,9.9v12.4c0,0.4-0.2,0.8-0.6,0.9c-0.4,0.2-0.8,0.1-1.1-0.2L16,19.7L12.7,23C12.5,23.2,12.3,23.3,12,23.3z
-           M16,18.7c0.3,0,0.5,0.1,0.7,0.3l3.3,3.3V9.9c0-0.2-0.2-0.4-0.4-0.5c-2.3-0.5-4.9-0.5-7.2,0C12.2,9.4,12,9.6,12,9.9v12.4l3.3-3.3
-           C15.5,18.8,15.7,18.7,16,18.7z"
-      />
+      <g className={classes.outlinePart}>
+        <path
+          d="M12,23.3c-0.1,0-0.3,0-0.4-0.1c-0.4-0.2-0.6-0.5-0.6-0.9V9.9c0-0.7,0.5-1.3,1.2-1.5c2.4-0.6,5.2-0.6,7.7,0
+            C20.5,8.6,21,9.2,21,9.9v12.4c0,0.4-0.2,0.8-0.6,0.9c-0.4,0.2-0.8,0.1-1.1-0.2L16,19.7L12.7,23C12.5,23.2,12.3,23.3,12,23.3z
+            M16,18.7c0.3,0,0.5,0.1,0.7,0.3l3.3,3.3V9.9c0-0.2-0.2-0.4-0.4-0.5c-2.3-0.5-4.9-0.5-7.2,0C12.2,9.4,12,9.6,12,9.9v12.4l3.3-3.3
+            C15.5,18.8,15.7,18.7,16,18.7z"
+        />
+      </g>
     </svg>
   ),
   styles: {
diff --git a/src/themes/teams/components/Icon/svg/icons/bullets.tsx b/src/themes/teams/components/Icon/svg/icons/bullets.tsx
index 1443b4fadd..eeb33d5ca2 100644
--- a/src/themes/teams/components/Icon/svg/icons/bullets.tsx
+++ b/src/themes/teams/components/Icon/svg/icons/bullets.tsx
@@ -1,22 +1,35 @@
 import * as React from 'react'
 import { TeamsSvgIconSpec } from '../types'
 
-export default (
-  <svg viewBox="0 0 32 32" role="presentation">
-    <path
-      d="M13.4999,11.25h9c0.4143,0,0.75-0.3359,0.75-0.75s-0.3357-0.75-0.75-0.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75
-             S13.0856,11.25,13.4999,11.25z"
-    />
-    <path
-      d="M22.4999,14.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75s0.3357,0.75,0.75,0.75h9c0.4143,0,0.75-0.3359,0.75-0.75
-             S22.9142,14.75,22.4999,14.75z"
-    />
-    <path
-      d="M22.4999,19.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75s0.3357,0.75,0.75,0.75h9c0.4143,0,0.75-0.3359,0.75-0.75
-             S22.9142,19.75,22.4999,19.75z"
-    />
-    <circle cx="10.5" cy="10.5" r="1" />
-    <circle cx="10.5" cy="15.5" r="1" />
-    <circle cx="10.5" cy="20.5" r="1" />
-  </svg>
-) as TeamsSvgIconSpec
+export default {
+  icon: ({ classes }) => (
+    <svg viewBox="0 0 32 32" role="presentation" className={classes.svg}>
+      <g className={classes.outlinePart}>
+        <path d="M13.4999,11h9c0.2761,0,0.5-0.2236,0.5-0.5s-0.2239-0.5-0.5-0.5h-9c-0.2761,0-0.5,0.2236-0.5,0.5S13.2238,11,13.4999,11z" />
+        <path d="M22.4999,15h-9c-0.2761,0-0.5,0.2236-0.5,0.5s0.2239,0.5,0.5,0.5h9c0.2761,0,0.5-0.2236,0.5-0.5S22.776,15,22.4999,15z" />
+        <path d="M22.4999,20h-9c-0.2761,0-0.5,0.2236-0.5,0.5s0.2239,0.5,0.5,0.5h9c0.2761,0,0.5-0.2236,0.5-0.5S22.776,20,22.4999,20z" />
+        <circle cx="10.5" cy="10.5" r="1" />
+        <circle cx="10.5" cy="20.5" r="1" />
+        <circle cx="10.5" cy="15.5" r="1" />
+      </g>
+      <g className={classes.filledPart}>
+        <path
+          d="M13.4999,11.25h9c0.4143,0,0.75-0.3359,0.75-0.75s-0.3357-0.75-0.75-0.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75
+	          S13.0856,11.25,13.4999,11.25z"
+        />
+        <path
+          d="M22.4999,14.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75s0.3357,0.75,0.75,0.75h9c0.4143,0,0.75-0.3359,0.75-0.75
+	          S22.9142,14.75,22.4999,14.75z"
+        />
+        <path
+          d="M22.4999,19.75h-9c-0.4143,0-0.75,0.3359-0.75,0.75s0.3357,0.75,0.75,0.75h9c0.4143,0,0.75-0.3359,0.75-0.75
+	          S22.9142,19.75,22.4999,19.75z"
+        />
+        <circle cx="10.5" cy="10.5" r="1" />
+        <circle cx="10.5" cy="15.5" r="1" />
+        <circle cx="10.5" cy="20.5" r="1" />
+      </g>
+    </svg>
+  ),
+  styles: {},
+} as TeamsSvgIconSpec
diff --git a/src/themes/teams/components/Icon/svg/icons/gallery.tsx b/src/themes/teams/components/Icon/svg/icons/gallery.tsx
index 1ebc1f4b51..8a122f22e0 100644
--- a/src/themes/teams/components/Icon/svg/icons/gallery.tsx
+++ b/src/themes/teams/components/Icon/svg/icons/gallery.tsx
@@ -6,70 +6,61 @@ export default {
     <svg
       viewBox="0 0 32 32"
       role="img"
+      className={classes.svg}
       xmlns="http://www.w3.org/2000/svg"
       aria-labelledby="icons-gallery"
     >
-      <path
-        className={classes.secondaryPath}
-        d="M16,9.5v5c0,0.1357,0.0498,0.2529,0.1484,0.3516C16.2471,14.9507,16.3643,15,16.5,15h5
-	      c0.1357,0,0.2529-0.0493,0.3516-0.1484C21.9502,14.7529,22,14.6357,22,14.5v-4c0-0.2031-0.04-0.3945-0.1211-0.5742
-	      s-0.1904-0.3384-0.3281-0.4766c-0.1377-0.1377-0.2969-0.2471-0.4766-0.3281C20.8945,9.0405,20.7031,9,20.5,9h-4
-	      c-0.1357,0-0.2529,0.0498-0.3516,0.1484C16.0498,9.2476,16,9.3647,16,9.5z M17,10h3.5c0.1357,0,0.2529,0.0498,0.3516,0.1484
-	      C20.9502,10.2476,21,10.3647,21,10.5V14h-4V10z"
-      />
-      <path
-        className={classes.secondaryPath}
-        d="M9.4492,9.4492C9.3115,9.5874,9.2021,9.7461,9.1211,9.9258S9,10.2969,9,10.5v4c0,0.1357,0.0498,0.2529,0.1484,0.3516
-	      C9.2471,14.9507,9.3643,15,9.5,15h5c0.1357,0,0.2529-0.0493,0.3516-0.1484C14.9502,14.7529,15,14.6357,15,14.5v-5
-	      c0-0.1353-0.0498-0.2524-0.1484-0.3516C14.7529,9.0498,14.6357,9,14.5,9h-4c-0.2031,0-0.3945,0.0405-0.5742,0.1211
-	      C9.7461,9.2021,9.5869,9.3115,9.4492,9.4492z M10,10.5c0-0.1353,0.0498-0.2524,0.1484-0.3516C10.2471,10.0498,10.3643,10,10.5,10H14
-	      v4h-4V10.5z"
-      />
-      <path
-        className={classes.secondaryPath}
-        d="M16.5,22h4c0.2031,0,0.3945-0.04,0.5742-0.1211c0.1797-0.0801,0.3389-0.1895,0.4766-0.3281
-	      c0.1377-0.1377,0.2471-0.2969,0.3281-0.4766S22,20.7031,22,20.5v-4c0-0.1353-0.0498-0.2524-0.1484-0.3516
-	      C21.7529,16.0498,21.6357,16,21.5,16h-5c-0.1357,0-0.2529,0.0498-0.3516,0.1484C16.0498,16.2476,16,16.3647,16,16.5v5
-	      c0,0.1357,0.0498,0.2529,0.1484,0.3516C16.2471,21.9512,16.3643,22,16.5,22z M17,17h4v3.5c0,0.1357-0.0498,0.2529-0.1484,0.3516
-	      C20.7529,20.9512,20.6357,21,20.5,21H17V17z"
-      />
-      <path
-        className={classes.secondaryPath}
-        d="M9.4492,21.5508c0.1377,0.1387,0.2969,0.248,0.4766,0.3281C10.1055,21.96,10.2969,22,10.5,22h4
-	      c0.1357,0,0.2529-0.0488,0.3516-0.1484C14.9502,21.7529,15,21.6357,15,21.5v-5c0-0.1353-0.0498-0.2524-0.1484-0.3516
-	      C14.7529,16.0498,14.6357,16,14.5,16h-5c-0.1357,0-0.2529,0.0498-0.3516,0.1484C9.0498,16.2476,9,16.3647,9,16.5v4
-	      c0,0.2031,0.04,0.3945,0.1211,0.5742S9.3115,21.4131,9.4492,21.5508z M10,17h4v4h-3.5c-0.1357,0-0.2529-0.0488-0.3516-0.1484
-	      C10.0498,20.7529,10,20.6357,10,20.5V17z"
-      />
-
-      <path
-        className={classes.path}
-        d="M22,15v-4.5c0-0.2031-0.04-0.3955-0.1211-0.5781c-0.0811-0.1821-0.1885-0.3408-0.3242-0.4766
-	      C21.419,9.31,21.2608,9.2021,21.0781,9.1211C20.8955,9.0405,20.7031,9,20.5,9H16v6H22z"
-      />
-      <path
-        className={classes.path}
-        d="M9.4453,21.5547c0.1357,0.1357,0.2939,0.2441,0.4766,0.3242C10.1045,21.96,10.2969,22,10.5,22H15v-6H9v4.5
-	      c0,0.2031,0.04,0.3965,0.1211,0.5781C9.2021,21.2607,9.3096,21.4199,9.4453,21.5547z"
-      />
-      <path
-        className={classes.path}
-        d="M9.4453,9.4453C9.3096,9.581,9.2021,9.7397,9.1211,9.9219C9.04,10.1045,9,10.2969,9,10.5V15h6V9h-4.5
-	      c-0.2031,0-0.3955,0.0405-0.5781,0.1211C9.7393,9.2021,9.5811,9.3101,9.4453,9.4453z"
-      />
-      <path
-        className={classes.path}
-        d="M21.0781,21.8789c0.1826-0.0801,0.3408-0.1885,0.4766-0.3242c0.1357-0.1348,0.2432-0.2939,0.3242-0.4766
-	      C21.96,20.8965,22,20.7031,22,20.5V16h-6v6h4.5C20.7031,22,20.8955,21.96,21.0781,21.8789z"
-      />
+      <g role="presentation">
+        <g className={classes.outlinePart}>
+          <path
+            d="M16,9.5v5c0,0.1357,0.0498,0.2529,0.1484,0.3516C16.2471,14.9507,16.3643,15,16.5,15h5
+            c0.1357,0,0.2529-0.0493,0.3516-0.1484C21.9502,14.7529,22,14.6357,22,14.5v-4c0-0.2031-0.04-0.3945-0.1211-0.5742
+            s-0.1904-0.3384-0.3281-0.4766c-0.1377-0.1377-0.2969-0.2471-0.4766-0.3281C20.8945,9.0405,20.7031,9,20.5,9h-4
+            c-0.1357,0-0.2529,0.0498-0.3516,0.1484C16.0498,9.2476,16,9.3647,16,9.5z M17,10h3.5c0.1357,0,0.2529,0.0498,0.3516,0.1484
+            C20.9502,10.2476,21,10.3647,21,10.5V14h-4V10z"
+          />
+          <path
+            d="M9.4492,9.4492C9.3115,9.5874,9.2021,9.7461,9.1211,9.9258S9,10.2969,9,10.5v4c0,0.1357,0.0498,0.2529,0.1484,0.3516
+            C9.2471,14.9507,9.3643,15,9.5,15h5c0.1357,0,0.2529-0.0493,0.3516-0.1484C14.9502,14.7529,15,14.6357,15,14.5v-5
+            c0-0.1353-0.0498-0.2524-0.1484-0.3516C14.7529,9.0498,14.6357,9,14.5,9h-4c-0.2031,0-0.3945,0.0405-0.5742,0.1211
+            C9.7461,9.2021,9.5869,9.3115,9.4492,9.4492z M10,10.5c0-0.1353,0.0498-0.2524,0.1484-0.3516C10.2471,10.0498,10.3643,10,10.5,10H14
+            v4h-4V10.5z"
+          />
+          <path
+            d="M16.5,22h4c0.2031,0,0.3945-0.04,0.5742-0.1211c0.1797-0.0801,0.3389-0.1895,0.4766-0.3281
+            c0.1377-0.1377,0.2471-0.2969,0.3281-0.4766S22,20.7031,22,20.5v-4c0-0.1353-0.0498-0.2524-0.1484-0.3516
+            C21.7529,16.0498,21.6357,16,21.5,16h-5c-0.1357,0-0.2529,0.0498-0.3516,0.1484C16.0498,16.2476,16,16.3647,16,16.5v5
+            c0,0.1357,0.0498,0.2529,0.1484,0.3516C16.2471,21.9512,16.3643,22,16.5,22z M17,17h4v3.5c0,0.1357-0.0498,0.2529-0.1484,0.3516
+            C20.7529,20.9512,20.6357,21,20.5,21H17V17z"
+          />
+          <path
+            d="M9.4492,21.5508c0.1377,0.1387,0.2969,0.248,0.4766,0.3281C10.1055,21.96,10.2969,22,10.5,22h4
+            c0.1357,0,0.2529-0.0488,0.3516-0.1484C14.9502,21.7529,15,21.6357,15,21.5v-5c0-0.1353-0.0498-0.2524-0.1484-0.3516
+            C14.7529,16.0498,14.6357,16,14.5,16h-5c-0.1357,0-0.2529,0.0498-0.3516,0.1484C9.0498,16.2476,9,16.3647,9,16.5v4
+            c0,0.2031,0.04,0.3945,0.1211,0.5742S9.3115,21.4131,9.4492,21.5508z M10,17h4v4h-3.5c-0.1357,0-0.2529-0.0488-0.3516-0.1484
+            C10.0498,20.7529,10,20.6357,10,20.5V17z"
+          />
+        </g>
+        <g className={classes.filledPart}>
+          <path
+            d="M22,15v-4.5c0-0.2031-0.04-0.3955-0.1211-0.5781c-0.0811-0.1821-0.1885-0.3408-0.3242-0.4766
+            C21.419,9.31,21.2608,9.2021,21.0781,9.1211C20.8955,9.0405,20.7031,9,20.5,9H16v6H22z"
+          />
+          <path
+            d="M9.4453,21.5547c0.1357,0.1357,0.2939,0.2441,0.4766,0.3242C10.1045,21.96,10.2969,22,10.5,22H15v-6H9v4.5
+            c0,0.2031,0.04,0.3965,0.1211,0.5781C9.2021,21.2607,9.3096,21.4199,9.4453,21.5547z"
+          />
+          <path
+            d="M9.4453,9.4453C9.3096,9.581,9.2021,9.7397,9.1211,9.9219C9.04,10.1045,9,10.2969,9,10.5V15h6V9h-4.5
+            c-0.2031,0-0.3955,0.0405-0.5781,0.1211C9.7393,9.2021,9.5811,9.3101,9.4453,9.4453z"
+          />
+          <path
+            d="M21.0781,21.8789c0.1826-0.0801,0.3408-0.1885,0.4766-0.3242c0.1357-0.1348,0.2432-0.2939,0.3242-0.4766
+            C21.96,20.8965,22,20.7031,22,20.5V16h-6v6h4.5C20.7031,22,20.8955,21.96,21.0781,21.8789z"
+          />
+        </g>
+      </g>
     </svg>
   ),
-  styles: {
-    path: ({ variables: v }) => ({
-      fill: v.color,
-    }),
-    secondaryPath: ({ variables: v }) => ({
-      fill: v.secondaryColor,
-    }),
-  },
+  styles: {},
 } as TeamsSvgIconSpec
diff --git a/src/themes/teams/components/Icon/svg/icons/menu.tsx b/src/themes/teams/components/Icon/svg/icons/menu.tsx
index 5ff53d0eab..ffc99aeba3 100644
--- a/src/themes/teams/components/Icon/svg/icons/menu.tsx
+++ b/src/themes/teams/components/Icon/svg/icons/menu.tsx
@@ -1,8 +1,13 @@
 import * as React from 'react'
 import { TeamsSvgIconSpec } from '../types'
 
-export default (
-  <svg viewBox="0 0 32 32" role="presentation">
-    <path d="M9,11h13c0.6,0,1-0.4,1-1s-0.4-1-1-1H9c-0.6,0-1,0.4-1,1S8.4,11,9,11zM22,19H9c-0.6,0-1,0.4-1,1s0.4,1,1,1h13c0.6,0,1-0.4,1-1S22.6,19,22,19zM22,14H9c-0.6,0-1,0.4-1,1s0.4,1,1,1h13c0.6,0,1-0.4,1-1S22.6,14,22,14z" />
-  </svg>
-) as TeamsSvgIconSpec
+export default {
+  icon: ({ classes }) => (
+    <svg className={classes.svg} viewBox="0 0 32 32" role="presentation">
+      <g className={classes.filledPart}>
+        <path d="M9,11h13c0.6,0,1-0.4,1-1s-0.4-1-1-1H9c-0.6,0-1,0.4-1,1S8.4,11,9,11zM22,19H9c-0.6,0-1,0.4-1,1s0.4,1,1,1h13c0.6,0,1-0.4,1-1S22.6,19,22,19zM22,14H9c-0.6,0-1,0.4-1,1s0.4,1,1,1h13c0.6,0,1-0.4,1-1S22.6,14,22,14z" />
+      </g>
+    </svg>
+  ),
+  styles: {},
+} as TeamsSvgIconSpec