Replace FontAwesome with Vaadin Icons (#8208)

* Include FontAwesome by default for easier migration
* Fix JSComponentLoadingIndicatorTest

Fixes #7979
Addresses part of #8219

3 files changed, 50 insertions, 4 deletions

diff --git a/themes/.gitignore b/themes/.gitignore
new file mode 100644
index 0000000000..9f11b838a5
--- /dev/null
+++ b/themes/.gitignore
@@ -0,0 +1 @@
+src/main/themes/VAADIN/addons/*
diff --git a/themes/pom.xml b/themes/pom.xml
index 76af861d0c..9181af2e21 100644
--- a/themes/pom.xml
+++ b/themes/pom.xml
@@ -36,6 +36,12 @@
         </dependency>
 
         <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-icons</artifactId>
+            <scope>provided</scope>
+        </dependency>
+
+        <dependency>
             <groupId>com.carrotsearch</groupId>
             <artifactId>smartsprites</artifactId>
             <scope>provided</scope>
@@ -51,6 +57,29 @@
     <build>
         <plugins>
             <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-dependency-plugin</artifactId>
+                <version>3.0.0</version>
+                <executions>
+                    <execution>
+                        <id>copy-font-icons</id>
+                        <phase>process-resources</phase>
+                        <goals>
+                            <goal>unpack-dependencies</goal>
+                        </goals>
+                        <!-- Vaadin Icons font files and .scss to included with Valo -->
+                        <configuration>
+                            <includeGroupIds>com.vaadin</includeGroupIds>
+                            <includeArtifactIds>vaadin-icons</includeArtifactIds>
+                            <excludeTransitive>true</excludeTransitive>
+                            <includes>VAADIN\/addons\/vaadin-icons\/**</includes>
+                            <overWrite>true</overWrite>
+                            <outputDirectory>${project.basedir}/src/main/themes/</outputDirectory>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+            <plugin>
                 <artifactId>maven-resources-plugin</artifactId>
                 <executions>
                     <execution>
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");
   }
 }