Change ValoIcons to ThemeIcons and moved to base (#18472)

Change-Id: I7122252e9b238fdca0383d0698623fe5a9e3f262

21 files changed, 40 insertions, 31 deletions

diff --git a/WebContent/VAADIN/themes/base/fonts/fonts.scss b/WebContent/VAADIN/themes/base/fonts/fonts.scss
index 608fe7c280..1f5c0cf6a2 100644
--- a/WebContent/VAADIN/themes/base/fonts/fonts.scss
+++ b/WebContent/VAADIN/themes/base/fonts/fonts.scss
@@ -1,9 +1,14 @@
+$v-font-awesome: true !default; // Set to false to exclude Font Awesome
+
 @mixin fonts {
 	@include fonticons;
+	@include v-font(ThemeIcons, themeicons-webfont);
 }
 
 @mixin fonticons {
-	@include v-font(FontAwesome, fontawesome-webfont);
+	@if $v-font-awesome {
+		@include v-font(FontAwesome, fontawesome-webfont);
+	}
 }
 
 @mixin v-font($font-family, $file-name) {
diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.eot b/WebContent/VAADIN/themes/base/fonts/themeicons-webfont.eot
index 7b95e11d7b..9cc04785e2 100644
--- a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.eot
+++ b/WebContent/VAADIN/themes/base/fonts/themeicons-webfont.eot
diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.svg b/WebContent/VAADIN/themes/base/fonts/themeicons-webfont.svg
index c975dce73b..59685c3b3a 100644
--- a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.svg
+++ b/WebContent/VAADIN/themes/base/fonts/themeicons-webfont.svg
@@ -5,7 +5,10 @@
 <defs>
 <font id="fontawesomeregular" horiz-adv-x="2048" >
 <font-face units-per-em="2048" ascent="1755" descent="-293" />
-<missing-glyph horiz-adv-x="500" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode=" "  horiz-adv-x="512" />
+<glyph unicode="&#x09;" horiz-adv-x="512" />
+<glyph unicode="&#xa0;" horiz-adv-x="512" />
 <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" />
@@ -23,6 +26,7 @@
 <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="&#xf0c9;" horiz-adv-x="1755" d="M0 73v146q0 30 21.5 52t51.5 22h1609q30 0 51.5 -22t21.5 -52v-146q0 -30 -21.5 -51.5t-51.5 -21.5h-1609q-30 0 -51.5 21.5t-21.5 51.5zM0 658v147q0 30 21.5 51.5t51.5 21.5h1609q30 0 51.5 -21.5t21.5 -51.5v-147q0 -30 -21.5 -51.5t-51.5 -21.5h-1609 q-30 0 -51.5 21.5t-21.5 51.5zM0 1243v147q0 30 21.5 51.5t51.5 21.5h1609q30 0 51.5 -21.5t21.5 -51.5v-147q0 -30 -21.5 -51.5t-51.5 -21.5h-1609q-30 0 -51.5 21.5t-21.5 51.5z" />
 <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" />
diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.ttf b/WebContent/VAADIN/themes/base/fonts/themeicons-webfont.ttf
index 1bf68bf55b..1b7dd4a6ad 100644
--- a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.ttf
+++ b/WebContent/VAADIN/themes/base/fonts/themeicons-webfont.ttf
diff --git a/WebContent/VAADIN/themes/base/fonts/themeicons-webfont.woff b/WebContent/VAADIN/themes/base/fonts/themeicons-webfont.woff
new file mode 100644
index 0000000000..7d055f6dd0
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/fonts/themeicons-webfont.woff
diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index 341f486d26..a176114fb6 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -121,7 +121,7 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
       &:after {
         content: "\f0c9";
         display: block;
-        font-family: FontAwesome, sans-serif;
+        font-family: ThemeIcons, sans-serif;
         font-size: $v-grid-header-font-size;
       }
     }
@@ -247,7 +247,7 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
       padding-right: round($v-grid-header-font-size * 1.2) + $v-grid-cell-padding-horizontal;
 
       &:after {
-        font-family: FontAwesome, sans-serif;
+        font-family: ThemeIcons, sans-serif;
         content: "\f0de" " " attr(sort-order);
         position: absolute;
         right: $v-grid-cell-padding-horizontal;
diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
index 690aa57f36..569a414734 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: ValoIcons;
+  font-family: ThemeIcons;
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
index fe365aa6ff..3f334e893c 100644
--- a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
+++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
@@ -160,7 +160,7 @@
       outline: none;
 
       &:before {
-        font-family: ValoIcons;
+        font-family: ThemeIcons;
         content: "\f141";
       }
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index a200641a0d..606a948dfb 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: ValoIcons;
+  font-family: ThemeIcons;
   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: ValoIcons;
+    font-family: ThemeIcons;
     @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 f27bc9073a..6ff8a70dba 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: ValoIcons;
+  font-family: ThemeIcons;
   content: "\f073";
 }
 
@@ -570,7 +570,7 @@
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-nextmonth-icon-style {
-  font-family: ValoIcons;
+  font-family: ThemeIcons;
   content: "\f105";
 }
 
@@ -581,7 +581,7 @@
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-prevmonth-icon-style {
-  font-family: ValoIcons;
+  font-family: ThemeIcons;
   content: "\f104";
 }
 
@@ -592,7 +592,7 @@
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-nextyear-icon-style {
-  font-family: ValoIcons;
+  font-family: ThemeIcons;
   content: "\f101";
 }
 
@@ -603,7 +603,7 @@
  * @group datefield
  */
 @mixin valo-datefield-calendarpanel-prevyear-icon-style {
-  font-family: ValoIcons;
+  font-family: ThemeIcons;
   content: "\f100";
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index f94fc1ff9f..95500ceafe 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: ValoIcons;
+        font-family: ThemeIcons;
         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 e1350ff9e7..4b4a657d6a 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: ValoIcons;
+      font-family: ThemeIcons;
       content: "\f078";
       font-size: 0.7em;
       vertical-align: .15em;
@@ -285,7 +285,7 @@
  * @group menubar
  */
 @mixin valo-menubar-submenu-indicator-style {
-  font-family: ValoIcons;
+  font-family: ThemeIcons;
   content: "\f054";
   line-height: $v-selection-item-height + 2px;
 }
@@ -298,7 +298,7 @@
  */
 @mixin valo-menubar-checked-icon-style {
   content: "\f00c";
-  font-family: ValoIcons;
+  font-family: ThemeIcons;
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss
index cf288cca25..ee3cf67a7c 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: ValoIcons;
+          font-family: ThemeIcons;
           content: "\f00c";
           margin-right: .5em;
         }
diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
index ca731e6373..7aa55b0fce 100644
--- a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
@@ -73,7 +73,7 @@ $valo-richtextarea-use-valo-icons: true !default;
       }
 
       div:before {
-        font-family: ValoIcons;
+        font-family: ThemeIcons;
       }
 
       @each $pair in $icons {
@@ -84,7 +84,7 @@ $valo-richtextarea-use-valo-icons: true !default;
         }
       }
     }
-  } // Use ValoIcons
+  } // Use ThemeIcons
 
   .#{$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 f7e17483d8..63735cb4b9 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: ValoIcons;
+  font-family: ThemeIcons;
 }
 
 /**
@@ -610,7 +610,7 @@ $v-table-background-color: null !default;
  */
 @mixin valo-table-sort-desc-icon-style {
   content: '\f0dd';
-  font-family: ValoIcons;
+  font-family: ThemeIcons;
 }
 
 /**
@@ -620,7 +620,7 @@ $v-table-background-color: null !default;
  * @group table
  */
 @mixin valo-table-column-selector-icon-style {
-  font-family: ValoIcons;
+  font-family: ThemeIcons;
   content: "\f013";
 }
 
@@ -632,7 +632,7 @@ $v-table-background-color: null !default;
  */
 @mixin valo-table-column-visible-icon-style {
   content: "\f00c";
-  font-family: ValoIcons;
+  font-family: ThemeIcons;
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
index be6796db97..07fdb4650b 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: ValoIcons;
+  font-family: ThemeIcons;
   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: ValoIcons;
+  font-family: ThemeIcons;
   content: "\f054";
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss
index f8c46ac08f..95ae8d3b5e 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: ValoIcons;
+  font-family: ThemeIcons;
 }
 
 /**
@@ -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: ValoIcons;
+    font-family: ThemeIcons;
   }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss
index b9b9bcd06d..51063e236f 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: ValoIcons;
+  font-family: ThemeIcons;
   content: "\f054";
 }
 
@@ -100,6 +100,6 @@
  * @group twin-column-select
  */
 @mixin valo-twincolselect-remove-icon-style {
-  font-family: ValoIcons;
+  font-family: ThemeIcons;
   content: "\f053";
 }
diff --git a/WebContent/VAADIN/themes/valo/fonts/_fonts.scss b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss
index e330612e92..b947106f38 100644
--- a/WebContent/VAADIN/themes/valo/fonts/_fonts.scss
+++ b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss
@@ -15,7 +15,7 @@ $fontawesome-pathPrefix: null;
 
 @mixin valo-fonts {
   // Valo Icons
-  @include v-font(ValoIcons, "#{$fontawesome-pathPrefix}../valo/fonts/valoicons/valoicons-webfont");
+  @include v-font(ThemeIcons, "#{$fontawesome-pathPrefix}../base/fonts/themeicons-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.woff b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff
deleted file mode 100644
index 7c7dda4ed4..0000000000
--- a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff
+++ /dev/null
diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff2 b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff2
deleted file mode 100644
index f9f5f5031d..0000000000
--- a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff2
+++ /dev/null