Create a Valo icon font for icons used in Valo (#18472)

Valo uses only a handful of icons from Font Awesome. This change
introduces a separate icon font for valo (9KB instead of 80KB) and
decouples Valo from Font Awesome to enable updating Font Awesome
without taking Valo into account.

This change also makes it easy to not load Font Awesome when using Valo
by setting $v-font-awesome:false

For backwards compatibility, Font Awesome is loaded by default

Change-Id: Ib01e3cf34e2468c885fcb8c7859cd1d1af4491aa

20 files changed, 91 insertions, 32 deletions

diff --git a/WebContent/VAADIN/themes/tests-valo-no-font-awesome/_variables.scss b/WebContent/VAADIN/themes/tests-valo-no-font-awesome/_variables.scss
new file mode 100644
index 0000000000..59b31a4a68
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo-no-font-awesome/_variables.scss
@@ -0,0 +1,3 @@
+$v-font-awesome: false;
+
+@import "../valo/valo";
diff --git a/WebContent/VAADIN/themes/tests-valo-no-font-awesome/styles.scss b/WebContent/VAADIN/themes/tests-valo-no-font-awesome/styles.scss
new file mode 100644
index 0000000000..d66db2b0d6
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo-no-font-awesome/styles.scss
@@ -0,0 +1,6 @@
+@import "variables";
+@import "../tests-valo/valotest";
+
+.tests-valo-no-font-awesome {
+   @include valotest;
+}
diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
index 1be12d3533..690aa57f36 100644
--- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
@@ -35,7 +35,7 @@
  */
 @mixin valo-checkbox-icon-style {
   content: "\f00c";
-  font-family: FontAwesome;
+  font-family: ValoIcons;
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
index 18f92500dc..fe365aa6ff 100644
--- a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
+++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
@@ -160,8 +160,8 @@
       outline: none;
 
       &:before {
-        font-family: FontAwesome;
-        content: "\F141";
+        font-family: ValoIcons;
+        content: "\f141";
       }
     }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index ace3dbb4bb..a200641a0d 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -334,7 +334,7 @@
  * @group combobox
  */
 @mixin valo-combobox-button-icon-style {
-  font-family: FontAwesome;
+  font-family: ValoIcons;
   content: "\f078";
 }
 
@@ -420,7 +420,7 @@
     height: ceil($v-unit-size/1.5);
     line-height: ceil($v-unit-size/1.5);
     text-align: center;
-    font-family: FontAwesome;
+    font-family: ValoIcons;
     @include transform( scale(.8) );
 
     color: valo-font-color($v-background-color);
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index 52a4acf821..f27bc9073a 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -266,7 +266,7 @@
  * @group datefield
  */
 @mixin valo-datefield-button-icon-style {
-  font-family: FontAwesome;
+  font-family: ValoIcons;
   content: "\f073";
 }
 
@@ -570,7 +570,7 @@
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-nextmonth-icon-style {
-  font-family: FontAwesome;
+  font-family: ValoIcons;
   content: "\f105";
 }
 
@@ -581,7 +581,7 @@
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-prevmonth-icon-style {
-  font-family: FontAwesome;
+  font-family: ValoIcons;
   content: "\f104";
 }
 
@@ -592,7 +592,7 @@
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-nextyear-icon-style {
-  font-family: FontAwesome;
+  font-family: ValoIcons;
   content: "\f101";
 }
 
@@ -603,7 +603,7 @@
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-prevyear-icon-style {
-  font-family: FontAwesome;
+  font-family: ValoIcons;
   content: "\f100";
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index 3057aaa40f..f94fc1ff9f 100644
--- a/WebContent/VAADIN/themes/valo/components/_label.scss
+++ b/WebContent/VAADIN/themes/valo/components/_label.scss
@@ -259,7 +259,7 @@ $v-letter-spacing--h4: 0 !default;
       font-size: round($v-font-size * 0.95);
 
       &:before {
-        font-family: FontAwesome;
+        font-family: ValoIcons;
         content: "\f00c";
         margin-right: .5em;
         margin-left: round($v-unit-size/-2);
diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss
index 0f9c61d2ce..e1350ff9e7 100644
--- a/WebContent/VAADIN/themes/valo/components/_menubar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss
@@ -54,7 +54,7 @@
     display: none;
 
     + .#{$primary-stylename}-menuitem-caption:after {
-      font-family: FontAwesome;
+      font-family: ValoIcons;
       content: "\f078";
       font-size: 0.7em;
       vertical-align: .15em;
@@ -285,7 +285,7 @@
  * @group menubar
  */
 @mixin valo-menubar-submenu-indicator-style {
-  font-family: FontAwesome;
+  font-family: ValoIcons;
   content: "\f054";
   line-height: $v-selection-item-height + 2px;
 }
@@ -298,7 +298,7 @@
  */
 @mixin valo-menubar-checked-icon-style {
   content: "\f00c";
-  font-family: FontAwesome;
+  font-family: ValoIcons;
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss
index 9538ebdc29..cf288cca25 100644
--- a/WebContent/VAADIN/themes/valo/components/_notification.scss
+++ b/WebContent/VAADIN/themes/valo/components/_notification.scss
@@ -185,7 +185,7 @@ $v-notification-title-color: $v-focus-color !default;
         font-weight: $v-font-weight + 100;
 
         &:before {
-          font-family: FontAwesome;
+          font-family: ValoIcons;
           content: "\f00c";
           margin-right: .5em;
         }
diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
index 0dc3ee274c..ca731e6373 100644
--- a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
@@ -2,7 +2,7 @@
  *
  * @group richtextarea
  */
-$valo-richtextarea-use-font-awesome: true !default;
+$valo-richtextarea-use-valo-icons: true !default;
 
 /**
  *
@@ -45,9 +45,9 @@ $valo-richtextarea-use-font-awesome: true !default;
     @include valo-gradient($color: darken($v-background-color, 10%), $gradient: $grad, $direction: to top);
   }
 
-  @if $valo-richtextarea-use-font-awesome {
+  @if $valo-richtextarea-use-valo-icons {
 
-    // List of title attribute values and Font Awesome icons for the formatting buttons
+    // List of title attribute values and Valo Icons for the formatting buttons
     $icons:  "Toggle Bold" "\f032",
               "Toggle Italic" "\f033",
               "Toggle Underline" "\f0cd",
@@ -73,7 +73,7 @@ $valo-richtextarea-use-font-awesome: true !default;
       }
 
       div:before {
-        font-family: FontAwesome;
+        font-family: ValoIcons;
       }
 
       @each $pair in $icons {
@@ -84,7 +84,7 @@ $valo-richtextarea-use-font-awesome: true !default;
         }
       }
     }
-  } // Use FontAwesome
+  } // Use ValoIcons
 
   .#{$primary-stylename} .gwt-RichTextToolbar-bottom {
     font-size: round($v-font-size * 0.8);
diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index 671506ed6e..f7e17483d8 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -599,7 +599,7 @@ $v-table-background-color: null !default;
  */
 @mixin valo-table-sort-asc-icon-style {
   content: '\f0de';
-  font-family: FontAwesome;
+  font-family: ValoIcons;
 }
 
 /**
@@ -610,7 +610,7 @@ $v-table-background-color: null !default;
  */
 @mixin valo-table-sort-desc-icon-style {
   content: '\f0dd';
-  font-family: FontAwesome;
+  font-family: ValoIcons;
 }
 
 /**
@@ -620,7 +620,7 @@ $v-table-background-color: null !default;
  * @group table
  */
 @mixin valo-table-column-selector-icon-style {
-  font-family: FontAwesome;
+  font-family: ValoIcons;
   content: "\f013";
 }
 
@@ -632,7 +632,7 @@ $v-table-background-color: null !default;
  */
 @mixin valo-table-column-visible-icon-style {
   content: "\f00c";
-  font-family: FontAwesome;
+  font-family: ValoIcons;
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
index bb3e55042a..be6796db97 100644
--- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
@@ -378,7 +378,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
  * @group tabsheet
  */
 @mixin valo-tabsheet-scroller-prev-icon-style {
-  font-family: FontAwesome;
+  font-family: ValoIcons;
   content: "\f053";
 }
 
@@ -389,7 +389,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
  * @group tabsheet
  */
 @mixin valo-tabsheet-scroller-next-icon-style {
-  font-family: FontAwesome;
+  font-family: ValoIcons;
   content: "\f054";
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss
index db8b3ba795..f8c46ac08f 100644
--- a/WebContent/VAADIN/themes/valo/components/_tree.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tree.scss
@@ -290,7 +290,7 @@ $v-tree-expand-animation-enabled: false !default;
  */
 @mixin valo-tree-collapsed-icon-style {
   content: "\f0da";
-  font-family: FontAwesome;
+  font-family: ValoIcons;
 }
 
 /**
@@ -303,6 +303,6 @@ $v-tree-expand-animation-enabled: false !default;
 @mixin valo-tree-expanded-icon-style ($force: false) {
   @if $v-tree-animations-enabled == false or $force {
     content: "\f0d7";
-    font-family: FontAwesome;
+    font-family: ValoIcons;
   }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss
index 11a81159c0..b9b9bcd06d 100644
--- a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss
+++ b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss
@@ -89,7 +89,7 @@
  * @group twin-column-select
  */
 @mixin valo-twincolselect-add-icon-style {
-  font-family: FontAwesome;
+  font-family: ValoIcons;
   content: "\f054";
 }
 
@@ -100,6 +100,6 @@
  * @group twin-column-select
  */
 @mixin valo-twincolselect-remove-icon-style {
-  font-family: FontAwesome;
+  font-family: ValoIcons;
   content: "\f053";
 }
diff --git a/WebContent/VAADIN/themes/valo/fonts/_fonts.scss b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss
index 8f0a129335..e330612e92 100644
--- a/WebContent/VAADIN/themes/valo/fonts/_fonts.scss
+++ b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss
@@ -5,6 +5,7 @@
 @import "lato/lato";
 @import "lora/lora";
 
+$v-font-awesome: true !default;
 
 $fontawesome-pathPrefix: null;
   
@@ -13,8 +14,11 @@ $fontawesome-pathPrefix: null;
 }
 
 @mixin valo-fonts {
-  // Font Awesome icons from the Base theme
-  @include v-font(FontAwesome, "#{$fontawesome-pathPrefix}../base/fonts/fontawesome-webfont");
+  // Valo Icons
+  @include v-font(ValoIcons, "#{$fontawesome-pathPrefix}../valo/fonts/valoicons/valoicons-webfont");
+  @if $v-font-awesome {
+  	@include v-font(FontAwesome, "#{$fontawesome-pathPrefix}../base/fonts/fontawesome-webfont");
+  }
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.eot
new file mode 100644
index 0000000000..7b95e11d7b
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.eot
diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.svg b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.svg
new file mode 100644
index 0000000000..c975dce73b
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.svg
@@ -0,0 +1,46 @@
+<?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" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+<metadata></metadata>
+<defs>
+<font id="fontawesomeregular" horiz-adv-x="2048" >
+<font-face units-per-em="2048" ascent="1755" descent="-293" />
+<missing-glyph horiz-adv-x="500" />
+<glyph unicode="&#x25fc;" horiz-adv-x="571" d="M0 0z" />
+<glyph unicode="&#xf00c;" d="M138 695q0 46 32 78l156 155q32 32 77 32q46 0 78 -32l336 -337l750 751q32 32 78 32q45 0 77 -32l156 -156q32 -32 32 -77q0 -46 -32 -78l-828 -828l-155 -155q-32 -32 -78 -32t-78 32l-155 155l-414 414q-32 32 -32 78z" />
+<glyph unicode="&#xf013;" horiz-adv-x="1755" d="M0 607v254q0 13 9.5 26t21.5 15l212 32q14 46 45 105q-50 71 -122 158q-12 14 -12 27q0 11 11 26q29 40 111.5 122.5t108.5 82.5q15 0 30 -12l158 -122q56 29 104 44q17 152 33 212q9 32 41 32h254q16 0 27.5 -10t13.5 -24l32 -210q50 -16 103 -43l162 123q10 10 27 10 q15 0 29 -12q143 -131 188 -194q8 -9 8 -25q0 -14 -9 -26q-18 -24 -58.5 -76t-61.5 -81q33 -65 47 -112l209 -32q14 -2 23.5 -14t9.5 -27v-254q0 -13 -9.5 -26t-22.5 -15l-211 -32q-21 -60 -45 -104q39 -56 123 -158q11 -13 11 -28t-10 -26q-30 -41 -112.5 -123t-108.5 -82 q-14 0 -29 10l-158 124q-56 -29 -104 -44q-17 -152 -33 -212q-9 -32 -41 -32h-254q-16 0 -27.5 10t-13.5 24l-32 210q-50 16 -103 43l-161 -123q-11 -10 -29 -10q-15 0 -28 13q-143 129 -189 192q-8 11 -8 26q0 14 9 26q18 24 58.5 76t61.5 81q-34 65 -47 113l-209 31 q-14 2 -23.5 14t-9.5 27zM585 731q0 -121 86 -206.5t207 -85.5t206.5 85.5t85.5 206.5t-85.5 207t-206.5 86t-207 -86t-86 -207z" />
+<glyph unicode="&#xf032;" horiz-adv-x="1609" d="M0 -146l2 107q16 4 96.5 17.5t122.5 31.5q8 14 14.5 31t10 38t5.5 37.5t3 42.5t1 39v40.5v34.5q0 1122 -25 1172q-5 9 -25.5 16.5t-50 12t-56.5 7.5t-55.5 5.5t-35.5 3.5l-5 95q107 2 385.5 13t429.5 11q25 0 77.5 -0.5t78.5 -0.5q80 0 156 -15t146.5 -48t123.5 -81 t84.5 -119.5t31.5 -157.5q0 -50 -11 -92t-36 -75.5t-49.5 -58.5t-67 -50t-72.5 -40t-80 -38q84 -19 156 -55.5t130 -90t91 -128.5t33 -162q0 -114 -40 -205t-106.5 -149.5t-157.5 -97.5t-187 -55.5t-201 -16.5q-51 0 -151 3.5t-151 3.5q-121 0 -353 -12.5t-262 -13.5z M609 1477q0 -57 4.5 -173t4.5 -174q0 -30 -0.5 -90t-0.5 -91q0 -53 1 -79q47 -8 125 -8q94 0 163 15t125.5 50.5t85.5 102t29 162.5q0 80 -33 140t-90 93.5t-123 49.5t-142 16q-63 0 -149 -14zM615.5 188.5q0.5 -42.5 5 -95.5t13.5 -76q82 -36 160 -36q430 0 430 382 q0 131 -47 206q-31 50 -70.5 84.5t-77 53t-91.5 28.5t-96 12.5t-108 2.5q-81 0 -116 -12q0 -61 -0.5 -181.5t-0.5 -180.5q0 -9 -1 -77t-0.5 -110.5z" />
+<glyph unicode="&#xf033;" horiz-adv-x="1170" d="M0 -144l19 97q25 8 70.5 19t82.5 22t68 27q32 41 47 115q1 7 71 330t130 621.5t59 338.5v29q-28 15 -62.5 21t-79 9t-66.5 6l22 118q30 -1 135.5 -7t174.5 -8.5t136 -2.5q55 0 111.5 2.5t140.5 8t111 7.5q-8 -54 -21 -102q-33 -11 -115 -32t-125 -38q-9 -22 -16 -50 t-10.5 -44t-9 -54t-7.5 -47q-32 -171 -101 -486t-87 -399q-2 -8 -21 -92.5t-31.5 -151t-10.5 -87.5l1 -20q45 -10 211 -36q-3 -48 -18 -113q-13 0 -37 -1.5t-37 -1.5q-33 0 -99.5 11.5t-98.5 11.5q-158 2 -235 2q-59 0 -164.5 -10.5t-137.5 -12.5z" />
+<glyph unicode="&#xf036;" d="M0 73v146q0 30 21.5 52t51.5 22h1902q30 0 51.5 -22t21.5 -52v-146q0 -30 -21.5 -51.5t-51.5 -21.5h-1902q-30 0 -51.5 21.5t-21.5 51.5zM0 512v146q0 30 21.5 51.5t51.5 21.5h1463q30 0 51.5 -21.5t21.5 -51.5v-146q0 -30 -21.5 -51.5t-51.5 -21.5h-1463 q-30 0 -51.5 21.5t-21.5 51.5zM0 951v146q0 30 21.5 51.5t51.5 21.5h1756q30 0 51.5 -21.5t21.5 -51.5v-146q0 -30 -21.5 -51.5t-51.5 -21.5h-1756q-30 0 -51.5 21.5t-21.5 51.5zM0 1390v146q0 30 21.5 51.5t51.5 21.5h1317q30 0 51.5 -21.5t21.5 -51.5v-146 q0 -30 -21.5 -51.5t-51.5 -21.5h-1317q-30 0 -51.5 21.5t-21.5 51.5z" />
+<glyph unicode="&#xf037;" d="M0 73v146q0 30 21.5 52t51.5 22h1902q30 0 51.5 -22t21.5 -52v-146q0 -30 -21.5 -51.5t-51.5 -21.5h-1902q-30 0 -51.5 21.5t-21.5 51.5zM146 951v146q0 30 21.5 51.5t51.5 21.5h1610q30 0 51.5 -21.5t21.5 -51.5v-146q0 -30 -21.5 -51.5t-51.5 -21.5h-1610 q-30 0 -51.5 21.5t-21.5 51.5zM439 512v146q0 30 21.5 51.5t51.5 21.5h1024q30 0 51.5 -21.5t21.5 -51.5v-146q0 -30 -21.5 -51.5t-51.5 -21.5h-1024q-30 0 -51.5 21.5t-21.5 51.5zM585 1390v146q0 30 21.5 51.5t51.5 21.5h732q30 0 51.5 -21.5t21.5 -51.5v-146 q0 -30 -21.5 -51.5t-51.5 -21.5h-732q-30 0 -51.5 21.5t-21.5 51.5z" />
+<glyph unicode="&#xf038;" d="M0 73v146q0 30 21.5 52t51.5 22h1902q30 0 51.5 -22t21.5 -52v-146q0 -30 -21.5 -51.5t-51.5 -21.5h-1902q-30 0 -51.5 21.5t-21.5 51.5zM146 951v146q0 30 21.5 51.5t51.5 21.5h1756q30 0 51.5 -21.5t21.5 -51.5v-146q0 -30 -21.5 -51.5t-51.5 -21.5h-1756 q-30 0 -51.5 21.5t-21.5 51.5zM439 512v146q0 30 21.5 51.5t51.5 21.5h1463q30 0 51.5 -21.5t21.5 -51.5v-146q0 -30 -21.5 -51.5t-51.5 -21.5h-1463q-30 0 -51.5 21.5t-21.5 51.5zM585 1390v146q0 30 21.5 51.5t51.5 21.5h1317q30 0 51.5 -21.5t21.5 -51.5v-146 q0 -30 -21.5 -51.5t-51.5 -21.5h-1317q-30 0 -51.5 21.5t-21.5 51.5z" />
+<glyph unicode="&#xf03b;" d="M0 37v219q0 14 11.5 25.5t25.5 11.5h1974q14 0 25.5 -11.5t11.5 -25.5v-219q0 -14 -11.5 -25.5t-25.5 -11.5h-1974q-14 0 -25.5 11.5t-11.5 25.5zM0 1353v220q0 14 11.5 25t25.5 11h1974q14 0 25.5 -11t11.5 -25v-220q0 -14 -11.5 -25t-25.5 -11h-1974q-14 0 -25.5 11 t-11.5 25zM37 805q0 16 10 26l329 329q10 10 26 10q14 0 25.5 -11t11.5 -25v-659q0 -14 -11.5 -25t-25.5 -11q-16 0 -26 10l-329 329q-10 10 -10 27zM731 475v220q0 14 11.5 25t25.5 11h1243q14 0 25.5 -11t11.5 -25v-220q0 -14 -11.5 -25t-25.5 -11h-1243q-14 0 -25.5 11 t-11.5 25zM731 914v220q0 14 11.5 25t25.5 11h1243q14 0 25.5 -11t11.5 -25v-220q0 -14 -11.5 -25t-25.5 -11h-1243q-14 0 -25.5 11t-11.5 25z" />
+<glyph unicode="&#xf03c;" d="M0 37v219q0 14 11.5 25.5t25.5 11.5h1974q14 0 25.5 -11.5t11.5 -25.5v-219q0 -14 -11.5 -25.5t-25.5 -11.5h-1974q-14 0 -25.5 11.5t-11.5 25.5zM0 475v659q0 14 11.5 25t25.5 11q16 0 26 -10l329 -329q10 -10 10 -26q0 -17 -10 -27l-329 -329q-10 -10 -26 -10 q-14 0 -25.5 11t-11.5 25zM0 1353v220q0 14 11.5 25t25.5 11h1974q14 0 25.5 -11t11.5 -25v-220q0 -14 -11.5 -25t-25.5 -11h-1974q-14 0 -25.5 11t-11.5 25zM731 475v220q0 14 11.5 25t25.5 11h1243q14 0 25.5 -11t11.5 -25v-220q0 -14 -11.5 -25t-25.5 -11h-1243 q-14 0 -25.5 11t-11.5 25zM731 914v220q0 14 11.5 25t25.5 11h1243q14 0 25.5 -11t11.5 -25v-220q0 -14 -11.5 -25t-25.5 -11h-1243q-14 0 -25.5 11t-11.5 25z" />
+<glyph unicode="&#xf03e;" horiz-adv-x="2194" d="M0 37v1389q0 76 53.5 129.5t129.5 53.5h1828q76 0 129.5 -53.5t53.5 -129.5v-1389q0 -76 -53.5 -129.5t-129.5 -53.5h-1828q-76 0 -129.5 53.5t-53.5 129.5zM146 37q0 -14 11.5 -25.5t25.5 -11.5h1828q14 0 25.5 11.5t11.5 25.5v1389q0 14 -11.5 25.5t-25.5 11.5h-1828 q-14 0 -25.5 -11.5t-11.5 -25.5v-1389zM293 146v220l365 365l183 -182l585 585l476 -476v-512h-1609zM293 1097q0 91 64 155.5t155 64.5t155 -64.5t64 -155.5t-64 -155t-155 -64t-155 64t-64 155z" />
+<glyph unicode="&#xf053;" horiz-adv-x="1462" d="M176 804.5q0 29.5 22 51.5l848 848q22 22 51.5 22t51.5 -22l189 -190q22 -22 22 -51.5t-22 -51.5l-607 -606l607 -607q22 -22 22 -51.5t-22 -51.5l-189 -190q-22 -22 -51.5 -22t-51.5 22l-848 848q-22 22 -22 51.5z" />
+<glyph unicode="&#xf054;" horiz-adv-x="1462" d="M103 146.5q0 29.5 22 51.5l606 607l-606 606q-22 22 -22 51.5t22 51.5l189 190q22 22 51.5 22t51.5 -22l848 -848q22 -22 22 -51.5t-22 -51.5l-848 -848q-22 -22 -51.5 -22t-51.5 22l-189 190q-22 22 -22 51.5z" />
+<glyph unicode="&#xf05e;" horiz-adv-x="1755" d="M0 735q0 179 69.5 342t187 281t280 187.5t341.5 69.5t341.5 -69.5t279.5 -187.5t186.5 -281t69.5 -342q0 -120 -31.5 -234t-88 -211t-137.5 -178t-177 -138t-210 -88.5t-233 -31.5q-143 0 -277 44.5t-242 126t-189 189.5t-125.5 242.5t-44.5 278.5zM256 735 q0 -186 102 -342l863 862q-154 104 -343 104q-169 0 -312 -83.5t-226.5 -227.5t-83.5 -313zM538 211q155 -101 340 -101q126 0 241 49.5t198.5 133t132.5 199.5t49 243q0 185 -99 337z" />
+<glyph unicode="&#xf073;" horiz-adv-x="1901" d="M0 -146v1463q0 60 43 103t103 43h147v110q0 76 53 129t129 53h74q76 0 129 -53t53 -129v-110h439v110q0 76 53.5 129t129.5 53h73q76 0 129.5 -53t53.5 -129v-110h146q60 0 103.5 -43t43.5 -103v-1463q0 -60 -43.5 -103.5t-103.5 -43.5h-1609q-60 0 -103 43.5t-43 103.5z M146 -146h329v329h-329v-329zM146 256h329v366h-329v-366zM146 695h329v329h-329v-329zM439 1243q0 -14 11 -25t25 -11h74q14 0 25 11t11 25v330q0 14 -11 25t-25 11h-74q-14 0 -25 -11t-11 -25v-330zM549 -146h365v329h-365v-329zM549 256h365v366h-365v-366zM549 695h365 v329h-365v-329zM987 -146h366v329h-366v-329zM987 256h366v366h-366v-366zM987 695h366v329h-366v-329zM1317 1243q0 -14 11 -25t25 -11h73q14 0 25.5 11t11.5 25v330q0 14 -11.5 25t-25.5 11h-73q-14 0 -25 -11t-11 -25v-330zM1426 -146h329v329h-329v-329zM1426 256h329 v366h-329v-366zM1426 695h329v329h-329v-329z" />
+<glyph unicode="&#xf078;" d="M103 884q0 30 22 52l189 189q22 22 51.5 22t51.5 -22l607 -607l607 607q22 22 51.5 22t51.5 -22l189 -189q22 -22 22 -52t-22 -52l-848 -847q-22 -22 -51 -22t-51 22l-848 847q-22 22 -22 52z" />
+<glyph unicode="&#xf0c1;" horiz-adv-x="1901" d="M18 1243q0 137 97 232l168 167q95 95 232 95q139 0 234 -97l235 -237q95 -95 95 -232q0 -139 -101 -238l101 -101q99 101 238 101q137 0 233 -96l237 -238q96 -96 96 -233t-97 -232l-168 -167q-95 -95 -232 -95q-138 0 -233 97l-235 237q-95 95 -95 232q0 141 100 239 l-100 100q-98 -100 -238 -100q-137 0 -233 96l-238 237q-96 96 -96 233zM238 1243q0 -45 32 -77l237 -238q31 -31 78 -31t82 36q-3 3 -22 21t-24.5 25t-16.5 22t-15 29t-4 31q0 46 32 77.5t78 31.5q17 0 31 -4t29 -15t22 -16.5t25 -24.5t21 -22q38 36 38 83q0 46 -32 78 l-236 237q-32 32 -78 32q-43 0 -77 -31l-168 -167q-32 -32 -32 -77zM1041 438q0 -46 32 -78l236 -237q30 -30 77 -30q46 0 78 29l168 167q32 32 32 77t-32 77l-238 238q-32 32 -77 32q-49 0 -83 -36q5 -5 22.5 -21.5t24 -24t17.5 -22.5t15 -29t4 -31q0 -46 -32 -78t-78 -32 q-17 0 -31 4t-29 15t-22 16.5t-25 24.5t-21 22q-38 -36 -38 -83z" />
+<glyph unicode="&#xf0ca;" d="M0 146q0 91 64 155.5t155 64.5t155.5 -64.5t64.5 -155.5t-64.5 -155t-155.5 -64t-155 64t-64 155zM0 731q0 91 64 155.5t155 64.5t155.5 -64.5t64.5 -155.5t-64.5 -155t-155.5 -64t-155 64t-64 155zM0 1317q0 91 64 155t155 64t155.5 -64t64.5 -155t-64.5 -155.5 t-155.5 -64.5t-155 64.5t-64 155.5zM585 37v219q0 14 11.5 25.5t25.5 11.5h1389q14 0 25.5 -11.5t11.5 -25.5v-219q0 -14 -11.5 -25.5t-25.5 -11.5h-1389q-14 0 -25.5 11.5t-11.5 25.5zM585 622v219q0 14 11.5 25.5t25.5 11.5h1389q14 0 25.5 -11.5t11.5 -25.5v-219 q0 -14 -11.5 -25.5t-25.5 -11.5h-1389q-14 0 -25.5 11.5t-11.5 25.5zM585 1207v219q0 14 11.5 25.5t25.5 11.5h1389q14 0 25.5 -11.5t11.5 -25.5v-219q0 -14 -11.5 -25.5t-25.5 -11.5h-1389q-14 0 -25.5 11.5t-11.5 25.5z" />
+<glyph unicode="&#xf0cb;" d="M17 501q0 59 26.5 106.5t64.5 77t76 54.5t64.5 50t26.5 51q0 59 -61 59q-54 0 -93 -66l-97 68q28 59 82 91t120 32q83 0 140.5 -47t57.5 -129q0 -40 -18.5 -74.5t-46 -57.5t-60 -46t-60 -39.5t-46.5 -37t-20 -41.5h145v69h120v-182h-414q-7 49 -7 62zM22 -217l65 100 q55 -51 121 -51q33 0 57.5 16.5t24.5 48.5q0 72 -120 64l-29 64q10 13 29.5 39.5t32 42.5t31 37t35.5 37v1q-19 0 -56 -1.5t-55 -1.5v-60h-121v174h380v-101l-108 -131q58 -14 92 -56t34 -101q0 -91 -62 -144t-155 -53q-120 0 -196 76zM39 1600l155 145h121v-462h124v-113 h-383v113h122q0 47 0.5 139t0.5 139v14h-2q-12 -23 -57 -62zM585 37v219q0 16 10.5 26.5t26.5 10.5h1389q15 0 26 -11t11 -26v-219q0 -14 -11.5 -25.5t-25.5 -11.5h-1389q-15 0 -26 11t-11 26zM585 622v219q0 16 10.5 26.5t26.5 10.5h1389q15 0 26 -11t11 -26v-219 q0 -14 -11.5 -25.5t-25.5 -11.5h-1389q-15 0 -26 11t-11 26zM585 1207v219q0 15 11 26t26 11h1389q14 0 25.5 -11.5t11.5 -25.5v-219q0 -14 -11.5 -25.5t-25.5 -11.5h-1389q-15 0 -26 11t-11 26z" />
+<glyph unicode="&#xf0cc;" d="M0 622v73q0 16 10.5 26t26.5 10h1974q16 0 26.5 -10t10.5 -26v-73q0 -16 -10.5 -26.5t-26.5 -10.5h-1974q-16 0 -26.5 10.5t-10.5 26.5zM439 1111q0 207 153 353q152 145 449 145q57 0 191 -22q74 -13 202 -54q12 -43 24 -135q16 -144 16 -209q0 -22 -5 -52l-14 -3l-96 7 l-16 2q-58 171 -118 234q-100 104 -240 104q-132 0 -208 -67t-76 -167q0 -83 75 -160q76 -77 319 -148q78 -23 198 -75q66 -31 108 -59h-849q-30 37 -58 91q-55 110 -55 215zM473 176q-1 34 0.5 76.5t1.5 43.5v50l117 3q17 -39 34 -81.5t25.5 -64t14.5 -30.5q39 -64 92 -108 q51 -41 120 -65q68 -25 151 -25q74 0 158 31q89 29 140 98q54 71 54 147q0 96 -93 180q-37 32 -157 81h470q8 -43 8 -105q0 -126 -47 -242q-26 -64 -81 -119q-46 -44 -124 -93q-91 -54 -175 -75q-92 -24 -232 -24q-131 0 -223 26l-160 46q-66 19 -82 32q-10 10 -10 25v15 q0 134 -2 178z" />
+<glyph unicode="&#xf0cd;" horiz-adv-x="1755" d="M0 -37v-73q0 -16 10.5 -26t26.5 -10h1682q16 0 26 10t10 26v73q0 16 -10 26.5t-26 10.5h-1682q-16 0 -26.5 -10.5t-10.5 -26.5zM0 1606q15 1 46 1q53 0 128 -5q143 -8 189 -8q66 0 192 4q134 4 167 5q48 0 99 3l-2 -16l3 -73v-11q-66 -10 -142 -10q-67 0 -90 -29 q-15 -17 -15 -150q0 -15 0.5 -37.5t0.5 -29.5l1 -261l16 -320q8 -142 58 -231q39 -67 110 -105q101 -54 202 -54q122 0 219 32q65 21 113 58q54 40 74 73q43 66 61 131q24 84 24 261q0 91 -4 147t-13 140t-15 182l-5 67q-5 77 -27 101q-39 40 -88 39l-115 -3l-16 4l3 98h96 l234 -11q93 -4 224 11l21 -2q6 -35 6 -58q0 -8 -4 -36q-53 -14 -96 -15q-83 -12 -90 -19q-18 -18 -18 -47q0 -7 1.5 -29t2.5 -37q9 -22 25 -453q8 -218 -17 -347q-16 -85 -47 -140q-45 -75 -128 -140q-88 -66 -208 -102q-126 -38 -291 -38q-189 0 -325 53q-135 53 -205 139 q-68 84 -94 223q-19 92 -19 271v381q0 217 -19 243q-29 42 -168 45q-43 2 -52 4z" />
+<glyph unicode="&#xf0d7;" horiz-adv-x="1170" d="M0 951q0 30 21.5 51.5t51.5 21.5h1024q30 0 51.5 -21.5t21.5 -51.5q0 -31 -21 -52l-512 -512q-21 -21 -52 -21q-30 0 -51 21l-512 512q-22 22 -22 52z" />
+<glyph unicode="&#xf0d8;" horiz-adv-x="1170" d="M0 366q0 29 22 51l512 512q22 22 51 22q30 0 52 -22l512 -512q21 -21 21 -51t-21.5 -51.5t-51.5 -21.5h-1024q-30 0 -51.5 21.5t-21.5 51.5z" />
+<glyph unicode="&#xf0d9;" horiz-adv-x="731" d="M73 731q0 30 22 52l512 512q22 22 51 22q30 0 51.5 -22t21.5 -52v-1024q0 -30 -21.5 -51.5t-51.5 -21.5q-29 0 -51 22l-512 512q-22 22 -22 51z" />
+<glyph unicode="&#xf0da;" horiz-adv-x="731" d="M0 219v1024q0 30 21.5 52t51.5 22t52 -22l512 -512q21 -21 21 -52q0 -30 -21 -51l-512 -512q-22 -22 -52 -22t-51.5 21.5t-21.5 51.5z" />
+<glyph unicode="&#xf0dd;" horiz-adv-x="1170" d="M0 512q0 30 21.5 51.5t51.5 21.5h1024q30 0 51.5 -21.5t21.5 -51.5t-21 -51l-512 -512q-22 -22 -52 -22q-29 0 -51 22l-512 512q-22 22 -22 51z" />
+<glyph unicode="&#xf0de;" horiz-adv-x="1170" d="M0 951q0 29 22 51l512 512q22 22 51 22q30 0 52 -22l512 -512q21 -21 21 -51t-21.5 -51.5t-51.5 -21.5h-1024q-30 0 -51.5 21.5t-21.5 51.5z" />
+<glyph unicode="&#xf100;" horiz-adv-x="1170" d="M51 658q0 15 12 27l532 532q12 12 27 12q14 0 26 -12l57 -57q12 -12 12 -26q0 -15 -12 -27l-449 -449l449 -449q12 -12 12 -26t-12 -26l-57 -58q-11 -11 -26 -11q-16 0 -27 11l-532 533q-12 12 -12 26zM490 658q0 15 12 27l532 532q12 12 27 12q14 0 26 -12l57 -57 q11 -11 11 -26q0 -16 -11 -27l-449 -449l449 -449q11 -11 11 -26t-11 -26l-57 -58q-11 -11 -26 -11q-16 0 -27 11l-532 533q-12 12 -12 26z" />
+<glyph unicode="&#xf101;" horiz-adv-x="1170" d="M15 183q0 15 11 26l449 449l-449 449q-11 11 -11 27q0 15 11 26l57 57q12 12 27 12q14 0 26 -12l533 -532q11 -11 11 -27q0 -15 -11 -26l-533 -533q-11 -11 -26 -11q-16 0 -27 11l-57 58q-11 11 -11 26zM454 183q0 15 11 26l449 449l-449 449q-11 11 -11 27q0 15 11 26 l57 57q12 12 27 12q14 0 26 -12l532 -532q12 -12 12 -27q0 -14 -12 -26l-532 -533q-11 -11 -26 -11q-16 0 -27 11l-57 58q-11 11 -11 26z" />
+<glyph unicode="&#xf104;" horiz-adv-x="731" d="M51 658q0 15 12 27l532 532q12 12 27 12q14 0 26 -12l57 -57q12 -12 12 -26q0 -15 -12 -27l-449 -449l449 -449q12 -12 12 -26t-12 -26l-57 -58q-11 -11 -26 -11q-16 0 -27 11l-532 533q-12 12 -12 26z" />
+<glyph unicode="&#xf105;" horiz-adv-x="731" d="M15 183q0 15 11 26l449 449l-449 449q-11 11 -11 27q0 15 11 26l57 57q12 12 27 12q14 0 26 -12l533 -532q11 -11 11 -27q0 -15 -11 -26l-533 -533q-11 -11 -26 -11q-16 0 -27 11l-57 58q-11 11 -11 26z" />
+<glyph unicode="&#xf127;" horiz-adv-x="1901" d="M0 512q0 16 10.5 26.5t26.5 10.5h365q16 0 26.5 -10.5t10.5 -26.5t-10.5 -26.5t-26.5 -10.5h-365q-16 0 -26.5 10.5t-10.5 26.5zM18 1243q0 137 97 232l168 167q95 95 232 95q139 0 234 -97l381 -383q23 -23 48 -64l-273 -20l-312 313q-32 32 -78 32q-43 0 -77 -31 l-168 -167q-32 -32 -32 -77t32 -77l313 -313l-21 -275q-41 25 -64 48l-384 384q-96 98 -96 233zM146 36.5q0 15.5 11 26.5l292 292q11 11 26.5 11t26.5 -11q10 -11 10 -26t-10 -26l-293 -293q-11 -10 -26 -10t-26 10q-11 11 -11 26.5zM622 -110v366q0 16 10 26.5t26 10.5 t26.5 -10.5t10.5 -26.5v-366q0 -16 -10.5 -26t-26.5 -10t-26 10t-10 26zM723 416l274 21l312 -314q31 -31 77.5 -31.5t77.5 30.5l168 167q32 32 32 77t-32 77l-313 315l20 273q41 -25 64 -48l384 -384q96 -98 96 -233q0 -137 -97 -232l-168 -167q-95 -95 -232 -95 q-138 0 -233 97l-382 383q-23 23 -48 64zM1207 1353v366q0 16 10 26t26 10t26.5 -10t10.5 -26v-366q0 -16 -10.5 -26t-26.5 -10t-26 10t-10 26zM1390 1280q0 15 10 26l293 293q11 11 26 11t26 -11t11 -26.5t-11 -26.5l-292 -292q-13 -11 -27 -11q-13 0 -26 11q-10 11 -10 26 zM1463 1097q0 16 10 26.5t26 10.5h366q16 0 26.5 -10.5t10.5 -26.5t-10.5 -26t-26.5 -10h-366q-16 0 -26 10t-10 26z" />
+<glyph unicode="&#xf12b;" horiz-adv-x="1755" d="M6 0v191h146l225 332l-211 311h-157v192h316l158 -260q10 -15 27 -48q8 -10 12 -24h4q3 12 12 24l29 48l160 260h294v-192h-143l-211 -305l234 -338h124v-191h-283l-182 288l-27 48q-10 11 -13 24h-3q-1 -4 -5.5 -12.5t-5.5 -11.5q-12 -23 -28 -50l-177 -286h-295z M1158 815q0 63 22 117t57.5 91t78 68.5t85 58t78 51.5t57.5 55t22 63q0 43 -34 71t-81 28q-57 0 -110 -44q-16 -13 -42 -44l-120 105q32 44 72 76q93 74 215 74q125 0 203 -68t78 -181q0 -64 -28 -117.5t-70.5 -87.5t-93 -67t-94 -58t-74.5 -59t-35 -72h265v92h144v-236 h-587l-4 31q-4 32 -4 53z" />
+<glyph unicode="&#xf12c;" horiz-adv-x="1755" d="M6 0v191h146l225 332l-211 311h-157v192h316l158 -260q10 -15 27 -48q8 -10 12 -24h4q3 12 12 24l29 48l160 260h294v-192h-143l-211 -305l234 -338h124v-191h-283l-182 288l-27 48q-10 11 -13 24h-3q-1 -4 -5.5 -12.5t-5.5 -11.5q-12 -23 -28 -50l-177 -286h-295z M1160 -209q0 63 22 117t57.5 91t78 68.5t85 58t78 51.5t57.5 55t22 63q0 43 -33.5 71t-80.5 28q-58 0 -111 -44q-12 -10 -41 -44l-120 105q32 44 72 76q91 74 215 74q125 0 203 -68t78 -181q0 -55 -21 -102t-55 -80t-75 -61.5t-82.5 -53t-76.5 -48.5t-59 -53.5t-27 -62.5 h265v92h144v-236h-587l-5 31q-3 51 -3 53z" />
+<glyph unicode="&#xf12d;" horiz-adv-x="2194" d="M2.5 168q6.5 42 34.5 74l1024 1171q42 50 109 50h878q43 0 79.5 -23.5t54.5 -62.5q17 -40 10.5 -82t-34.5 -74l-1024 -1171q-42 -50 -110 -50h-878q-43 0 -79 23t-54 63q-17 40 -10.5 82zM146 146h878l384 439h-878z" />
+<glyph unicode="&#xf141;" horiz-adv-x="1609" d="M0 695v219q0 46 32 78t78 32h219q46 0 78 -32t32 -78v-219q0 -46 -32 -78t-78 -32h-219q-46 0 -78 32t-32 78zM585 695v219q0 46 32 78t78 32h219q46 0 78 -32t32 -78v-219q0 -46 -32 -78t-78 -32h-219q-46 0 -78 32t-32 78zM1170 695v219q0 46 32 78t78 32h219 q46 0 78 -32t32 -78v-219q0 -46 -32 -78t-78 -32h-219q-46 0 -78 32t-32 78z" />
+</font>
+</defs></svg> 
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.ttf
new file mode 100644
index 0000000000..1bf68bf55b
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.ttf
diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff
new file mode 100644
index 0000000000..7c7dda4ed4
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff
diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff2 b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff2
new file mode 100644
index 0000000000..f9f5f5031d
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff2