Changing behavior to use local fonts

src/client/components/Chat.js

@@ -60,7 +60,7 @@ export default class Chat extends React.PureComponent {
         <div className="chat-header">
           <div className="chat-close" onClick={this.handleCloseChat}>
             <div className="button button-icon">
-              <span className="material-icons">arrow_forward</span>
+              <span className="icon icon-arrow_forward" />
             </div>
           </div>
           <div className="chat-title">Chat</div>
@@ -95,7 +95,7 @@ export default class Chat extends React.PureComponent {
             ))
           ) : (
             <div className="chat-empty">
-              <div className="chat-empty-icon material-icons">chat</div>
+              <span className="chat-empty-icon icon icon-question_answer" />
               <div className="chat-empty-message">No Notifications</div>
             </div>
           )}

src/client/components/Input.js

@@ -68,7 +68,7 @@ export default class Input extends React.PureComponent {
           value={message}
         />
         <button type="submit" className="send">
-          <span className="material-icons">send</span>
+          <span className="icon icon-send" />
         </button>
       </form>
     )

src/client/components/Toolbar.js

@@ -59,7 +59,7 @@ export default class Toolbar extends React.PureComponent {
           data-blink={messages.length !== totalMessages && !isChatOpen}
           title="Chat"
         >
-          <span className="material-icons">chat</span>
+          <span className="icon icon-question_answer" />
         </div>
 
         {stream && (
@@ -67,8 +67,8 @@ export default class Toolbar extends React.PureComponent {
             className="button mute-audio"
             title="Mute audio"
           >
-            <span className="on material-icons">mic_off</span>
-            <span className="off material-icons">mic</span>
+            <span className="on icon icon-mic_off" />
+            <span className="off icon icon-mic" />
           </div>
         )}
 
@@ -77,8 +77,8 @@ export default class Toolbar extends React.PureComponent {
             className="button mute-video"
             title="Mute video"
           >
-            <span className="on material-icons">videocam_off</span>
-            <span className="off material-icons">videocam</span>
+            <span className="on icon icon-videocam_off" />
+            <span className="off icon icon-videocam" />
           </div>
         )}
 
@@ -86,15 +86,15 @@ export default class Toolbar extends React.PureComponent {
           className="button fullscreen"
           title="Enter fullscreen"
         >
-          <span className="on material-icons">fullscreen_exit</span>
-          <span className="off material-icons">fullscreen</span>
+          <span className="on icon icon-fullscreen_exit" />
+          <span className="off icon icon-fullscreen" />
         </div>
 
         <div onClick={this.handleHangoutClick}
           className="button hangup"
           title="Hangup"
         >
-          <span className="material-icons">call_end</span>
+          <span className="icon icon-call_end" />
         </div>
       </div>
     )

src/scss/_fonts.scss

@@ -0,0 +1,88 @@
+@font-face {
+  font-family: 'icons';
+  src: url('./fonts/icons.eot?ij9tsv');
+  src: url('./fonts/icons.eot?ij9tsv#iefix') format('embedded-opentype'),
+       url('./fonts/icons.woff?ij9tsv') format('woff'),
+       url('./fonts/icons.ttf?ij9tsv') format('truetype'),
+       url('./fonts/icons.svg?ij9tsv#icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+// Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it.
+// Note, that will break hinting! In other OS-es font will be not as sharp as it could be
+// @media screen and (-webkit-min-device-pixel-ratio:0) {
+//   @font-face {
+//     font-family: 'icons';
+//     src: url('./fonts/icons.svg?ij9tsv#icons') format('svg');
+//   }
+// }
+
+[class^="icon-"], [class*=" icon-"] {
+  font-family: "icons";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.icon-arrow_forward:before {
+  content: "\e5c8";
+}
+.icon-call_end:before {
+  content: "\e0b1";
+}
+.icon-question_answer:before {
+  content: "\e8af";
+}
+.icon-fullscreen:before {
+  content: "\e5d0";
+}
+.icon-fullscreen_exit:before {
+  content: "\e5d1";
+}
+.icon-mic:before {
+  content: "\e029";
+}
+.icon-mic_off:before {
+  content: "\e02b";
+}
+.icon-more_vert:before {
+  content: "\e5d4";
+}
+.icon-send:before {
+  content: "\e163";
+}
+.icon-videocam:before {
+  content: "\e04b";
+}
+.icon-videocam_off:before {
+  content: "\e04c";
+}

src/scss/_toolbar.scss

@@ -6,7 +6,7 @@
 
   /* on icons are hidden by default */
 
-  .material-icons {
+  .icon {
     &.on {
       display: none;
     }
@@ -24,7 +24,7 @@
   /* on icons are displayed when parent svg has class 'on' */
 
   .button {
-    &.on .material-icons {
+    &.on .icon {
       &.on {
         display: block;
       }

src/scss/fonts/icons.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icons" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="870.4" descent="-153.6" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="0" d="" />
+<glyph unicode="&#xe029;" glyph-name="mic" d="M738 383.333h72c0-146-116-266-256-286v-140h-84v140c-140 20-256 140-256 286h72c0-128 108-216 226-216s226 88 226 216zM512 255.333c-70 0-128 58-128 128v256c0 70 58 128 128 128s128-58 128-128v-256c0-70-58-128-128-128z" />
+<glyph unicode="&#xe02b;" glyph-name="mic_off" d="M182 725.333l714-714-54-54-178 178c-32-20-72-32-110-38v-140h-84v140c-140 20-256 140-256 286h72c0-128 108-216 226-216 34 0 68 8 98 22l-70 70c-8-2-18-4-28-4-70 0-128 58-128 128v32l-256 256zM640 377.333l-256 254v8c0 70 58 128 128 128s128-58 128-128v-262zM810 383.333c0-50-14-98-38-140l-52 54c12 26 18 54 18 86h72z" />
+<glyph unicode="&#xe04b;" glyph-name="videocam" d="M726 405.333l170 170v-468l-170 170v-150c0-24-20-42-44-42h-512c-24 0-42 18-42 42v428c0 24 18 42 42 42h512c24 0 44-18 44-42v-150z" />
+<glyph unicode="&#xe04c;" glyph-name="videocam_off" d="M140 767.333l756-756-54-54-136 136c-6-4-16-8-24-8h-512c-24 0-42 18-42 42v428c0 24 18 42 42 42h32l-116 116zM896 575.333v-456l-478 478h264c24 0 44-18 44-42v-150z" />
+<glyph unicode="&#xe0b1;" glyph-name="call_end" d="M512 469.333c-68 0-134-10-196-30v-132c0-16-10-34-24-40-42-20-80-46-114-78-8-8-18-12-30-12s-22 4-30 12l-106 106c-8 8-12 18-12 30s4 22 12 30c130 124 306 200 500 200s370-76 500-200c8-8 12-18 12-30s-4-22-12-30l-106-106c-8-8-18-12-30-12s-22 4-30 12c-34 32-72 58-114 78-14 6-24 20-24 38v132c-62 20-128 32-196 32z" />
+<glyph unicode="&#xe163;" glyph-name="send" d="M86-42.667v298l640 86-640 86v298l896-384z" />
+<glyph unicode="&#xe5c8;" glyph-name="arrow_forward" d="M512 683.333l342-342-342-342-60 60 238 240h-520v84h520l-238 240z" />
+<glyph unicode="&#xe5d0;" glyph-name="fullscreen" d="M598 639.333h212v-212h-84v128h-128v84zM726 127.333v128h84v-212h-212v84h128zM214 427.333v212h212v-84h-128v-128h-84zM298 255.333v-128h128v-84h-212v212h84z" />
+<glyph unicode="&#xe5d1;" glyph-name="fullscreen_exit" d="M682 511.333h128v-84h-212v212h84v-128zM598 43.333v212h212v-84h-128v-128h-84zM342 511.333v128h84v-212h-212v84h128zM214 171.333v84h212v-212h-84v128h-128z" />
+<glyph unicode="&#xe5d4;" glyph-name="more_vert" d="M512 171.333c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 427.333c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 511.333c-46 0-86 40-86 86s40 86 86 86 86-40 86-86-40-86-86-86z" />
+<glyph unicode="&#xe8af;" glyph-name="question_answer" d="M726 341.333c0-24-20-42-44-42h-426l-170-172v598c0 24 18 42 42 42h554c24 0 44-18 44-42v-384zM896 597.333c24 0 42-18 42-42v-640l-170 170h-470c-24 0-42 18-42 42v86h554v384h86z" />
+</font></defs></svg>

src/scss/style.scss

@@ -1,5 +1,5 @@
-@import './variables';
-@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+@import '_fonts';
+@import '_variables';
 
 *,
 *:before,
@@ -138,11 +138,11 @@ body.call {
 }
 
 .app {
-  @import './alert';
-  @import './notification';
-  @import './video';
-  @import './chat';
-  @import './toolbar';
+  @import '_alert';
+  @import '_notification';
+  @import '_video';
+  @import '_chat';
+  @import '_toolbar';
 }
 
 .fade-enter {