Replace FontAwesome with Vaadin Icons (#8208)

* Include FontAwesome by default for easier migration
* Fix JSComponentLoadingIndicatorTest

Fixes #7979
Addresses part of #8219

1 files changed, 20 insertions, 4 deletions

diff --git a/themes/src/main/themes/VAADIN/themes/valo/fonts/_fonts.scss b/themes/src/main/themes/VAADIN/themes/valo/fonts/_fonts.scss
index 8a51b765b9..9c45d6deda 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/fonts/_fonts.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/fonts/_fonts.scss
@@ -4,20 +4,36 @@
 @import "roboto/roboto";
 @import "lato/lato";
 @import "lora/lora";
+@import "../../../VAADIN/addons/vaadin-icons/vaadin-icons.scss";
 
+/// Include VaadinIcons. They are included in Valo
+/// since Vaadin Framework version 8.0 (#7979)
+/// https://vaadin.com/icons
+
+$v-icons: true !default;
+
+/// Set the value of this variable to `false` if you want to exclude the Font Awesome icons.
+/// Only included to ease migration, and will not be updated in the future.
+/// We encourage you to use the FontAwesomeLabel add-on from the Directory instead:
+/// https://vaadin.com/directory/#!addon/fontawesomelabel
 $v-font-awesome: true !default;
 
-$fontawesome-pathPrefix: null;
+$font-icons-pathPrefix: null;
 
 @if $v-relative-paths == true {
-  $fontawesome-pathPrefix: "../../../";
+  $font-icons-pathPrefix: "../../../";
 }
 
 @mixin valo-fonts {
   // Valo Icons
-  @include v-font(ThemeIcons, "#{$fontawesome-pathPrefix}../valo/fonts/themeicons-webfont/themeicons-webfont");
+  @include v-font(ThemeIcons, "#{$font-icons-pathPrefix}../valo/fonts/themeicons-webfont/themeicons-webfont");
+  // Vaadin Icons
+  @if $v-icons {
+      @include vaadin-icons;
+  }
+  // FontAwesome
   @if $v-font-awesome {
-    @include v-font(FontAwesome, "#{$fontawesome-pathPrefix}../valo/fonts/fontawesome-webfont/fontawesome-webfont");
+    @include v-font(FontAwesome, "#{$font-icons-pathPrefix}../valo/fonts/fontawesome-webfont/fontawesome-webfont");
   }
 }