Replace FontAwesome with Vaadin Icons (#8208)

* Include FontAwesome by default for easier migration
* Fix JSComponentLoadingIndicatorTest

Fixes #7979
Addresses part of #8219

all/src/main/templates/release-notes.html

@@ -154,7 +154,7 @@
             <li>Valo is the only included theme, all other themes have been moved to the <tt>compatiblity-themes</tt> package and are available as a separate dependency</li>
             <li><tt>SharedState</tt> and the getter methods for it have been added to each component, regardless of whether those are used for anything or not</li>
             <li>The old liferay theme (Liferay 6.0 look) has been removed</li>
-            <li>FontAwesome icon constants have been deprecated, and will not be updated. It will be replaced with <a href="https://vaadin.com/icons">Vaadin icons</a> in an upcoming beta</li>
+            <li>FontAwesome icon constants have been deprecated, and will not be updated. It is replaced with <a href="https://vaadin.com/icons">Vaadin Icons</a> that are included in the Framework</li>
         </ul>
         <ul><h4>Component specific API changes</h4>
             <li><tt>setDescription(String)</tt> now renders tooltip as inner text by default, instead of HTML. HTML can be still used by using <tt>setDescription(String, ContentMode)</tt></li>

documentation/themes/themes-creating.asciidoc

@@ -7,8 +7,6 @@ layout: page
 [[themes.creating]]
 = Creating and Using Themes
 
-*_This section has not yet been updated for Vaadin Framework 8._*
-
 Custom themes are placed in the [filename]#VAADIN/themes# folder of the web
 application, in an Eclipse project under the [filename]#WebContent# folder or
 [filename]#src/main/webapp# in Maven projects, as was illustrated in
@@ -31,7 +29,7 @@ on-the-fly when the theme is requested by a browser.
 
 We recommend that you organize the theme in at least two SCSS files so that you
 import the actual theme from a Sass file that is named more uniquely than the
-[filename]#styles.scss#, to make it distinquishable in the editor. This
+[filename]#styles.scss#, to make it distinguishable in the editor. This
 organization is how the Vaadin Plugin for Eclipse creates a new theme.
 
 If you use Vaadin add-ons that contain themes, Vaadin Plugin for Eclipse and
@@ -123,17 +121,16 @@ generated by the Vaadin Plugin for Eclipse or Maven.
 == Plain Old CSS Themes
 
 In addition to Sass themes, you can create plain old CSS themes. CSS theme are
-more restricted than Sass styles - you can't parameterize CSS themes in any way,
-unlike you can Valo, for example. Further, an application can only have one CSS
-theme while you can have multiple Sass themes.
+more restricted than Sass styles - you can't parameterize CSS themes in any way.
+Further, an application can only have one CSS theme while you can have multiple Sass themes.
 
 A CSS theme is defined in a [filename]#styles.css# file in the
 [filename]#VAADIN/themes/mytheme# folder. You need to import the
-[filename]#legacy-styles.css# of the built-in theme as follows:
+[filename]#styles.css# of Valo theme as follows:
 
 
 ----
-@import "../reindeer/legacy-styles.css";
+@import "../valo/styles.css";
 
 .v-app {
     background: yellow;
@@ -156,8 +153,6 @@ of the style names are determined in the client-side widget of each component.
 The easiest way to find out the styles of the elements is to use a HTML
 inspector such as FireBug.
 
-//TODO add reference to a Firebug section when available
-
 Some client-side components or component styles can be shared by different
 server-side components. For example, [literal]#++v-textfield++# style is used
 for all text input boxes in components, in addition to [classname]#TextField#.
@@ -166,17 +161,19 @@ for all text input boxes in components, in addition to [classname]#TextField#.
 [[themes.creating.builtin]]
 == Built-in Themes
 
-Vaadin currently includes the following built-in themes:
+Since version 8.0, Vaadin Framework includes only one built-in theme:
 
 * [literal]#++valo++#, the primary theme since Vaadin 7.3
+
+The following legacy themes can be found in the [filename]#vaadin-compability-themes.jar# package
+for easier migrating from framework version 7 to 8:
+
 * [literal]#++reindeer++#, the primary theme in Vaadin 6 and 7
 * [literal]#++chameleon++#, an easily customizable theme
 * [literal]#++runo++#, the default theme in IT Mill Toolkit 5
+* [literal]#++base++#, which was never to be used directly, but is the base for other legacy themes
 
-In addition, there is the [literal]#++base++# theme, which should not be used
-directly, but is extended by the other built-in themes, except valo.
-
-The built-in themes are provided in the respective
+The themes are provided in the respective
 [filename]#VAADIN/themes/<theme>/styles.scss# stylesheets in the
 [filename]#vaadin-themes# JAR. Also the precompiled CSS files are included, in
 case you want to use the themes directly.
@@ -187,34 +184,26 @@ style names for specific components.
 
 
 ----
-@Theme("runo")
 public class MyUI extends UI {
     @Override
     protected void init(VaadinRequest request) {
         ...
-        Panel panel = new Panel("Regular Panel in the Runo Theme");
-        panel.addComponent(new Button("Regular Runo Button"));
+        Panel panel = new Panel("Regular Panel in the Valo Theme");
+        panel.addComponent(new Button("Regular Valo Button"));
 
         // A button with the "small" style
-        Button smallButton = new Button("Small Runo Button");
-        smallButton.addStyleName(Runo.BUTTON_SMALL);
+        Button smallButton = new Button("Small Valo Button");
+        smallButton.addStyleName(ValoTheme.BUTTON_SMALL);
 
-        Panel lightPanel = new Panel("Light Panel");
-        lightPanel.addStyleName(Runo.PANEL_LIGHT);
+        Panel lightPanel = new Panel("Borderless Panel");
+        lightPanel.addStyleName(ValoTheme.PANEL_BORDERLESS);
         lightPanel.addComponent(
             new Label("With addStyleName(\"light\")"));
         ...
 ----
 
-The example with the Runo theme is shown in
-<<figure.themes.creating.builtin.runo>>.
-
-[[figure.themes.creating.builtin.runo]]
-.Runo Theme
-image::img/builtin-runo.png[]
-
-The built-in themes come with a custom icon font, FontAwesome, which is used for
-icons in the theme, and which you can use as font icons, as described in
+The Valo theme comes with a custom icon font, VaadinIcons,
+which you can use as font icons, as described in
 <<dummy/../../../framework/themes/themes-fonticon#themes.fonticon,"Font
 Icons">>.
 

documentation/themes/themes-fonticon.asciidoc

@@ -7,7 +7,6 @@ layout: page
 [[themes.fonticon]]
 = Font Icons
 
-*_This section has not yet been updated for Vaadin Framework 8._*
 
 Font icons are icons included in a font. Fonts have many advantages over bitmap
 images. Browsers are usually faster in rendering fonts than loading image files.
@@ -18,18 +17,11 @@ property.
 [[themes.fonticon.enabling]]
 == Loading Icon Fonts
 
-Vaadin currently comes with one custom icon font: FontAwesome. It is
-automatically enabled in the Valo theme. For other themes, you need to include
-it with the following line in your project theme, after importing the base
-theme:
+Vaadin currently comes with one custom icon font: [literal]#++Vaadin Icons++#. It is
+automatically included in the Valo theme.
 
-----
-@include fonticons;
-----
-
-If you use other icon fonts, as described in <<themes.fonticon.custom>>, and the
-font is not loaded by a base theme, you need to load it with a
-`font` mixin in Sass, as described in
+If you use other icon fonts, as described in <<themes.fonticon.custom>>,
+ you need to load it with a `font` mixin in Sass, as described in
 <<themes-fonts#themes.fonts.loading,"Loading Local Fonts">>.
 
 
@@ -40,20 +32,22 @@ Font icons are resources of type [classname]#FontIcon#, which implements the
 [interfacename]#Resource# interface. You can use these special resources for
 component icons and such, but not as embedded images, for example.
 
-Each icon has a Unicode codepoint, by which you can use it. Vaadin includes an
-awesome icon font, [literal]#++FontAwesome++#, which comes with an enumeration
-of all the icons included in the font.
+Each icon has a Unicode codepoint, by which you can use it. Vaadin Framework includes its
+own icon font, [literal]#++Vaadin Icons++#, which comes with an enumeration [classname]#VaadinIcons# with all the icons included in the font.
 
 Most typically, you set a component icon as follows:
 
+////
+This code and rest of examples in this file are in uitest/src/main/.../VaadinIconUI.java
+////
 [source, Java]
 ----
 TextField name = new TextField("Name");
-name.setIcon(FontAwesome.USER);
+name.setIcon(VaadinIcons.USER);
 layout.addComponent(name);
 
 // Button allows specifying icon resource in constructor
-Button ok = new Button("OK", FontAwesome.CHECK);
+Button ok = new Button("OK", VaadinIcons.CHECK);
 layout.addComponent(ok);
 ----
 
@@ -73,7 +67,7 @@ HTML elements that display icons in Vaadin have the [literal]#++v-icon++# style
 name.
 
 ----
-.v-icon {
+.blueicon .v-icon {
     color: blue;
 }
 ----
@@ -91,20 +85,11 @@ generating the HTML to display the icon with the [methodname]#getHtml()# method.
 [source, Java]
 ----
 Label label = new Label("I " +
-    FontAwesome.HEART.getHtml() + " Vaadin",
+    VaadinIcons.HEART.getHtml() + Vaadin",
     ContentMode.HTML);
 label.addStyleName("redicon");
-layout.addComponent(label);
 ----
 
-The HTML code has the [stylename]#v-icon# style, which you can modify in CSS:
-
-[source, css]
-----
-.redicon .v-icon {
-    color: red;
-}
-----
 
 The result is illustrated in <<figure.themes.fonticon-html.label>>, with the color
 styling described next.
@@ -137,15 +122,15 @@ public String getHtml() {
 You can include a font icon in any text by its Unicode codepoint, which you can
 get with the [methodname]#getCodePoint()# method. In such case, however, you
 need to use the same font for other text in the same string as well. The
-FontAwesome provided in Vaadin includes a basic character set.
+VaadinIcons provided with Valo theme includes a basic character set.
 
 
 ----
 TextField amount = new TextField("Amount (in " +
    new String(Character.toChars(
-           FontAwesome.BTC.getCodepoint())) +
+           VaadinIcons.DOLLAR.getCodepoint())) +
    ")");
-amount.addStyleName("awesomecaption");
+amount.addStyleName("amount");
 layout.addComponent(amount);
 ----
 
@@ -153,8 +138,8 @@ You need to set the font family in CSS.
 
 
 ----
-.v-caption-awesomecaption .v-captiontext {
-    font-family: FontAwesome;
+.v-caption-amount .v-captiontext {
+    font-family: Vaadin-Icons;
 }
 ----
 
@@ -172,10 +157,6 @@ fonts. Here, we give basic instructions for using the
 link:http://icomoon.io/app/[IcoMoon] service, where you can pick icons from a
 large library of well-designed icons.
 
-Font Awesome is included in IcoMoon's selection of icon libraries. Note that the
-codepoints of the icons are not fixed, so the [classname]#FontAwesome# enum is
-not compatible with such custom icon fonts.
-
 After you have selected the icons that you want in your font, you can download
 them in a ZIP package. The package contains the icons in multiple formats,
 including WOFF, TTF, EOT, and SVG. Not all browsers support any one of them, so
@@ -193,7 +174,7 @@ ifdef::web[]
 You can define a font icon for any font available in the browser by implementing
 the [interfacename]#FontIcon# interface. The normal pattern for implementing it
 is to implement an enumeration for all the symbols available in the font. See
-the implementation of [classname]#FontAwesome# for more details.
+the implementation of [classname]#VaadinIcons# for more details.
 
 You need a FontIcon API for the icons. In the following, we define a font icon
 using a normal sans-serif font built-in in the browser.

pom.xml

@@ -53,6 +53,7 @@
         <sonar.analysis.mode>preview</sonar.analysis.mode>
         <sonar.issuesReport.console.enable>true</sonar.issuesReport.console.enable>
         <sonar.issuesReport.html.enable>true</sonar.issuesReport.html.enable>
+        <vaadin.icons.version>3.0.0</vaadin.icons.version>
     </properties>
 
     <!-- TODO: remove this after maven plugin has been released -->
@@ -280,6 +281,11 @@
                 <artifactId>japicmp-maven-plugin</artifactId>
                 <version>0.9.1</version>
             </dependency>
+            <dependency>
+                <groupId>com.vaadin</groupId>
+                <artifactId>vaadin-icons</artifactId>
+                <version>${vaadin.icons.version}</version>
+            </dependency>
         </dependencies>
     </dependencyManagement>
 

server/pom.xml

@@ -67,6 +67,11 @@
             <scope>provided</scope>
         </dependency>
 
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-icons</artifactId>
+        </dependency>
+
         <!-- Jsoup for BootstrapHandler -->
         <dependency>
             <groupId>org.jsoup</groupId>

server/src/main/java/com/vaadin/server/FontAwesome.java

@@ -31,10 +31,10 @@ package com.vaadin.server;
  *
  * @since 7.2
  * @author Vaadin Ltd
- * @see http://fortawesome.github.io/Font-Awesome/
- * @deprecated Planned to replace with Vaadin Icons https://vaadin.com/icons for
- *             8.0.0 (#7979). Will be moved to {@code compability-server}
- *             package and not updated to include new icons
+ * @see http://fontawesome.github.io/Font-Awesome/
+ * @deprecated Since 8.0 replaced with included Vaadin Icons
+ *             https://vaadin.com/icons (#7979). Will not be updated to include
+ *             new icons.
  */
 @Deprecated
 public enum FontAwesome implements FontIcon {

server/src/main/java/com/vaadin/ui/declarative/converters/DesignResourceConverter.java

@@ -17,13 +17,16 @@ package com.vaadin.ui.declarative.converters;
 
 import java.io.File;
 import java.io.Serializable;
+import java.util.Arrays;
 import java.util.HashMap;
 import java.util.Locale;
 import java.util.Map;
+import java.util.stream.Collectors;
 
 import com.vaadin.data.Converter;
 import com.vaadin.data.Result;
 import com.vaadin.data.ValueContext;
+import com.vaadin.icons.VaadinIcons;
 import com.vaadin.server.ExternalResource;
 import com.vaadin.server.FileResource;
 import com.vaadin.server.FontAwesome;
@@ -38,12 +41,15 @@ import com.vaadin.ui.declarative.DesignAttributeHandler;
  * A converter for {@link Resource} implementations supported by
  * {@link DesignAttributeHandler}.
  *
- * @since 7.4
  * @author Vaadin Ltd
+ * @since 7.4
  */
 @SuppressWarnings("serial")
 public class DesignResourceConverter implements Converter<String, Resource> {
 
+    private static final Map<Integer, VaadinIcons> CODE_POINTS =
+            Arrays.stream(VaadinIcons.values()).collect(Collectors.toMap(VaadinIcons::getCodepoint, icon -> icon));
+
     @Override
     public Result<Resource> convertToModel(String value, ValueContext context) {
         if (!value.contains("://")) {
@@ -101,14 +107,18 @@ public class DesignResourceConverter implements Converter<String, Resource> {
         FONTICON {
             @Override
             public Resource parse(String value) {
-                final String address = (value.split("://", 2))[1];
+                final String address = value.split("://", 2)[1];
                 final String[] familyAndCode = address.split("/", 2);
                 final int codepoint = Integer.valueOf(familyAndCode[1], 16);
 
-                if (FontAwesome.FONT_FAMILY.equals(familyAndCode[0])) {
-                    return FontAwesome.fromCodepoint(codepoint);
+                if (VAADIN_ICONS_NAME.equals(familyAndCode[0])) {
+                    return CODE_POINTS.get(codepoint);
                 }
 
+                if (FontAwesome.FONT_FAMILY.equals(familyAndCode[0])) { //Left for compatibility
+                    return FontAwesome.fromCodepoint(codepoint);
+                }
+                // all vaadin icons should have a codepoint
                 FontIcon generic = new GenericFontIcon(familyAndCode[0],
                         codepoint);
                 return generic;
@@ -128,7 +138,7 @@ public class DesignResourceConverter implements Converter<String, Resource> {
             public Resource parse(String value) {
                 // Deprecated, 7.4 syntax is
                 // font://"+FontAwesome.valueOf(foo) eg. "font://AMBULANCE"
-                final String iconName = (value.split("://", 2))[1];
+                final String iconName = value.split("://", 2)[1];
                 return FontAwesome.valueOf(iconName);
             }
 
@@ -158,6 +168,8 @@ public class DesignResourceConverter implements Converter<String, Resource> {
 
         };
 
+        public static final String VAADIN_ICONS_NAME = VaadinIcons.ABACUS.getFontFamily();
+
         @Override
         public Resource parse(String value) {
             // default behavior for HTTP, HTTPS, FTP and FTPS
@@ -171,6 +183,7 @@ public class DesignResourceConverter implements Converter<String, Resource> {
         }
 
         private static final Map<Class<? extends Resource>, ResourceConverterByProtocol> typeToConverter = new HashMap<>();
+
         static {
             typeToConverter.put(ExternalResource.class, HTTP);
             // ^ any of non-specialized would actually work

server/src/main/java/com/vaadin/ui/themes/ValoTheme.java

@@ -15,7 +15,6 @@
  */
 package com.vaadin.ui.themes;
 
-import com.vaadin.server.FontAwesome;
 import com.vaadin.ui.Notification.Type;
 
 /**
@@ -1036,14 +1035,14 @@ public class ValoTheme {
      * <p>
      * The text content of the logo should be very short, since the logo area
      * only shows approximately three letters. Using one of the
-     * {@link FontAwesome} icons is a good way to quickly create a logo for your
-     * application.
+     * Vaadin Icons is a good way to quickly create a logo for your
+     * application. Vaadin Icons are included in the Valo theme.
      * <p>
      *
      * <h4>Example</h4>
      *
      * <pre>
-     * Label logo = new Label(FontAwesome.ROCKET.getHtml(), ContentMode.HTML);
+     * Label logo = new Label(VaadinIcons.ROCKET.getHtml(), ContentMode.HTML);
      * logo.setSizeUndefined();
      * logo.setPrimaryStyleName(ValoTheme.MENU_LOGO);
      * </pre>

test/servlet-containers/generic/ivy.xml

@@ -68,6 +68,10 @@
             <exclude org="javax.servlet"></exclude>
             <exclude type="pom" />
         </dependency>
+        <dependency org="com.vaadin" name="vaadin-icons" rev="3.0.0"
+            conf="build->default">
+            <exclude type="pom" />
+        </dependency>
 
         <!-- For compiling TestingWidgetSet -->
         <dependency org="com.vaadin" name="vaadin-client-compiler"

test/servlet-containers/generic/ivysettings.xml

@@ -71,6 +71,8 @@
             resolver="vaadin-maven" />
         <module organisation="com.vaadin" name="vaadin-uitest-common"
             resolver="vaadin-maven" />
+        <module organisation="com.vaadin" name="vaadin-icons"
+            resolver="vaadin-maven" />
     </modules>
 
 

tests/screenshots

@@ -1 +1 @@
-Subproject commit 1163ee1b0d2523d39b326592e1a5918a27f8618c
+Subproject commit 226fe492dbbda2e4ee654c4f4701dabf1ff35da8

themes/.gitignore

@@ -0,0 +1 @@
+src/main/themes/VAADIN/addons/*

themes/pom.xml

@@ -35,6 +35,12 @@
             <scope>provided</scope>
         </dependency>
 
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-icons</artifactId>
+            <scope>provided</scope>
+        </dependency>
+
         <dependency>
             <groupId>com.carrotsearch</groupId>
             <artifactId>smartsprites</artifactId>
@@ -50,6 +56,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>

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");
   }
 }
 

uitest/src/main/java/com/vaadin/tests/components/checkbox/CheckBoxGroupTestUI.java

@@ -15,7 +15,7 @@
  */
 package com.vaadin.tests.components.checkbox;
 
-import com.vaadin.server.FontAwesome;
+import com.vaadin.icons.VaadinIcons;
 import com.vaadin.tests.components.abstractlisting.AbstractMultiSelectTestUI;
 import com.vaadin.ui.CheckBoxGroup;
 import com.vaadin.ui.IconGenerator;
@@ -60,7 +60,7 @@ public class CheckBoxGroupTestUI
             boolean activate, Object data) {
         if (activate) {
             group.setItemIconGenerator(
-                    item -> FontAwesome.values()[getIndex(item) + 1]);
+                    item -> VaadinIcons.values()[getIndex(item) + 1]);
         } else {
             group.setItemIconGenerator(DEFAULT_ICON_GENERATOR);
         }

uitest/src/main/java/com/vaadin/tests/components/combobox/ComboBoxClickIcon.java

@@ -15,7 +15,7 @@
  */
 package com.vaadin.tests.components.combobox;
 
-import com.vaadin.server.FontAwesome;
+import com.vaadin.icons.VaadinIcons;
 import com.vaadin.server.VaadinRequest;
 import com.vaadin.tests.components.AbstractReindeerTestUI;
 import com.vaadin.ui.ComboBox;
@@ -31,7 +31,7 @@ public class ComboBoxClickIcon extends AbstractReindeerTestUI {
     protected void setup(VaadinRequest request) {
         final ComboBox<String> combo = new ComboBox<>();
         combo.setItems("A", "B", "C");
-        combo.setItemIconGenerator(item -> FontAwesome.ALIGN_CENTER);
+        combo.setItemIconGenerator(item -> VaadinIcons.ALIGN_CENTER);
         combo.setTextInputAllowed(false);
         addComponent(combo);
     }

uitest/src/main/java/com/vaadin/tests/components/draganddropwrapper/SingleUseDragAndDropUpload.java

@@ -24,7 +24,7 @@ import com.vaadin.event.dd.DragAndDropEvent;
 import com.vaadin.event.dd.DropHandler;
 import com.vaadin.event.dd.acceptcriteria.AcceptAll;
 import com.vaadin.event.dd.acceptcriteria.AcceptCriterion;
-import com.vaadin.server.FontAwesome;
+import com.vaadin.icons.VaadinIcons;
 import com.vaadin.server.StreamVariable;
 import com.vaadin.server.VaadinRequest;
 import com.vaadin.shared.ui.ContentMode;
@@ -39,7 +39,7 @@ public class SingleUseDragAndDropUpload extends AbstractTestUIWithLog {
 
     @Override
     protected void setup(VaadinRequest request) {
-        Label upload = new Label(FontAwesome.UPLOAD.getHtml(),
+        Label upload = new Label(VaadinIcons.UPLOAD.getHtml(),
                 ContentMode.HTML);
         upload.setSizeUndefined();
         upload.setStyleName("upload");

uitest/src/main/java/com/vaadin/tests/components/menubar/MenuBarsWithNesting.java

@@ -15,7 +15,7 @@
  */
 package com.vaadin.tests.components.menubar;
 
-import com.vaadin.server.FontAwesome;
+import com.vaadin.icons.VaadinIcons;
 import com.vaadin.server.Resource;
 import com.vaadin.server.ThemeResource;
 import com.vaadin.server.VaadinRequest;
@@ -27,7 +27,7 @@ import com.vaadin.ui.MenuBar.MenuItem;
 /**
  * A UI for testing VMenuBar.getSubPartElement(String). The UI contains two
  * MenuBars, one without icons and one containing items with and without icons.
- * Some of the icons are textual (using FontAwesome) and should behave like
+ * Some of the icons are textual (using VaadinIcons) and should behave like
  * items with image icons: the icon should not be considered to be a part of the
  * item's caption.
  *
@@ -44,13 +44,13 @@ public class MenuBarsWithNesting extends AbstractReindeerTestUI {
     public final static String[] itemNames = { "Icon item", "Arrow down",
             "Arrow up", "Warning" };
     private final static Resource[] itemIcons = {
-            new ThemeResource("window/img/restore.png"), FontAwesome.ARROW_DOWN,
-            FontAwesome.ARROW_UP, FontAwesome.WARNING };
+            new ThemeResource("window/img/restore.png"), VaadinIcons.ARROW_DOWN,
+            VaadinIcons.ARROW_UP, VaadinIcons.WARNING };
 
     // The last menu item is nested with the following submenu items.
     public final static String[] nestedItemnames = { "No icon", "Font icon",
             "Image icon" };
-    private final static Resource[] nestedItemIcons = { null, FontAwesome.LINK,
+    private final static Resource[] nestedItemIcons = { null, VaadinIcons.LINK,
             new ThemeResource("window/img/restore.png") };
 
     private MenuBar.Command selectionCommand;

uitest/src/main/java/com/vaadin/tests/components/radiobutton/RadioButtonGroupTestUI.java

@@ -18,7 +18,7 @@ package com.vaadin.tests.components.radiobutton;
 import java.util.LinkedHashMap;
 import java.util.stream.IntStream;
 
-import com.vaadin.server.FontAwesome;
+import com.vaadin.icons.VaadinIcons;
 import com.vaadin.tests.components.abstractlisting.AbstractListingTestUI;
 import com.vaadin.ui.ItemCaptionGenerator;
 import com.vaadin.ui.RadioButtonGroup;
@@ -71,7 +71,7 @@ public class RadioButtonGroupTestUI
             boolean activate, Object data) {
         if (activate) {
             group.setItemIconGenerator(
-                    item -> FontAwesome.values()[getIndex(item) + 1]);
+                    item -> VaadinIcons.values()[getIndex(item) + 1]);
         } else {
             group.setItemIconGenerator(item -> null);
         }

uitest/src/main/java/com/vaadin/tests/fonticon/FontIcons.java

@@ -57,6 +57,11 @@ import com.vaadin.v7.ui.TextArea;
 import com.vaadin.v7.ui.Tree;
 import com.vaadin.v7.ui.TwinColSelect;
 
+/**
+ * This is a legacy test ui for using font icons (font awesome).
+ * <p>
+ * {@link VaadinIconSet} is the newer one for testing valo+vaadin icons.
+ */
 public class FontIcons extends AbstractReindeerTestUI {
 
     @Override

uitest/src/main/java/com/vaadin/tests/fonticon/VaadinIconSet.java

@@ -0,0 +1,181 @@
+package com.vaadin.tests.fonticon;
+
+import java.util.List;
+
+import com.vaadin.icons.VaadinIcons;
+import com.vaadin.server.FontIcon;
+import com.vaadin.server.Page;
+import com.vaadin.server.Resource;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.shared.Position;
+import com.vaadin.shared.ui.ContentMode;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.AbstractListing;
+import com.vaadin.ui.Accordion;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.CheckBoxGroup;
+import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.DateField;
+import com.vaadin.ui.Grid;
+import com.vaadin.ui.GridLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Link;
+import com.vaadin.ui.ListSelect;
+import com.vaadin.ui.MenuBar;
+import com.vaadin.ui.MenuBar.MenuItem;
+import com.vaadin.ui.NativeButton;
+import com.vaadin.ui.NativeSelect;
+import com.vaadin.ui.Notification;
+import com.vaadin.ui.Panel;
+import com.vaadin.ui.RadioButtonGroup;
+import com.vaadin.ui.Slider;
+import com.vaadin.ui.TabSheet;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.TwinColSelect;
+import com.vaadin.ui.Upload;
+import com.vaadin.ui.VerticalLayout;
+
+public class VaadinIconSet extends AbstractTestUI {
+
+    private List<Component> componentz;
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        buildUI(com.vaadin.icons.VaadinIcons.VAADIN_V);
+    }
+
+    @SuppressWarnings({ "rawtypes", "unchecked" })
+    private void buildUI(final Resource icon) {
+        VerticalLayout layout = new VerticalLayout();
+        addComponent(layout);
+        layout.setSpacing(false);
+
+        layout.setIcon(icon);
+
+        GridLayout gl = new GridLayout(5, 5);
+
+        layout.addComponent(new Button("Switch icon type",
+                event -> gl.iterator().forEachRemaining(
+                        c -> c.setIcon(VaadinIcons.AIRPLANE))));
+
+        // Notification
+        Notification n = new Notification("Hey there!");
+        n.setIcon(icon);
+        n.setPosition(Position.BOTTOM_CENTER);
+        n.setDelayMsec(300000);
+        n.show(Page.getCurrent());
+
+        // grid of compoents
+        layout.addComponent(gl);
+
+        // Basic components, caption icon only
+        Class<?>[] components = { Button.class, CheckBox.class, DateField.class,
+                NativeButton.class, Link.class, Label.class, Panel.class,
+                Slider.class, TextArea.class, TextField.class, Upload.class };
+        for (Class<?> clazz : components) {
+            Component c;
+            try {
+                c = (Component) clazz.newInstance();
+            } catch (Exception e) {
+                e.printStackTrace();
+                continue;
+            }
+            c.setCaption(clazz.getSimpleName());
+            c.setIcon(icon);
+            gl.addComponent(c);
+        }
+
+        // TabSheet, caption + tab icons
+        TabSheet tabs = new TabSheet();
+        tabs.setCaption("TabSheet");
+        tabs.setIcon(icon);
+        tabs.addStyleName("myTabs");
+        tabs.addTab(createLabel("Content 1"), "Tab 1", icon);
+        tabs.addTab(createLabel("Content 2"), "Tab 2", icon);
+        tabs.setWidth("150px");
+        gl.addComponent(tabs);
+
+        // Accordion, caption + tab icons
+        Accordion acc = new Accordion();
+        acc.setCaption("Accordion");
+        acc.setIcon(icon);
+        acc.addTab(createLabel(""), "Section 1", icon);
+        acc.addTab(createLabel(""), "Section 2", icon);
+        gl.addComponent(acc);
+
+        Grid<String> grid = new Grid<>();
+        grid.setCaption("Grid");
+        grid.setIcon(icon);
+        grid.setItems("item 1", "item 2", "item 3");
+        grid.addColumn(string -> string).setCaption("column 1");
+        grid.addColumn(string -> "Another " + string).setCaption("column 2");
+        // vaadin/framework#8207
+        // grid.setHeightByRows(3);
+        grid.setHeight("150px");
+        gl.addComponent(grid);
+
+        // Selects, caption + item icons
+        Class<?>[] selects = { ComboBox.class, NativeSelect.class,
+                ListSelect.class, TwinColSelect.class, RadioButtonGroup.class,
+                CheckBoxGroup.class };
+        for (Class<?> clazz : selects) {
+            AbstractListing<String> sel;
+            try {
+                sel = (AbstractListing<String>) clazz.newInstance();
+            } catch (Exception e) {
+                e.printStackTrace();
+                continue;
+            }
+            sel.setCaption(clazz.getSimpleName());
+            sel.setIcon(icon);
+            sel.setItems("One", "Two");
+            if (sel instanceof RadioButtonGroup) {
+                ((RadioButtonGroup) sel).setItemIconGenerator(item -> icon);
+            } else if (sel instanceof CheckBoxGroup) {
+                ((CheckBoxGroup) sel).setItemIconGenerator(item -> icon);
+            } else if (sel instanceof ComboBox) {
+                ((ComboBox) sel).setItemIconGenerator(item -> icon);
+            }
+            gl.addComponent(sel);
+        }
+
+        // MenuBar, caption + item + sub-item icons
+        MenuBar menu = new MenuBar();
+        menu.setIcon(icon);
+        menu.setCaption("MenuBar");
+        MenuItem mi = menu.addItem("File", icon, null);
+        MenuItem smi = mi.addItem("Item", icon, null);
+        smi = mi.addItem("Item", icon, null);
+        smi = smi.addItem("Item", icon, null);
+        gl.addComponent(menu);
+
+        // All of Vaadin Icons
+        String allIcons = "";
+        for (FontIcon ic : com.vaadin.icons.VaadinIcons.values()) {
+            allIcons += ic.getHtml() + " ";
+        }
+        Label label = new Label(allIcons, ContentMode.HTML);
+        label.setWidth("100%");
+        layout.addComponent(label);
+    }
+
+    private Label createLabel(String caption) {
+        Label label = new Label(caption);
+        label.setWidth("100%");
+        return label;
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Vaadin Icons should show up in all the right places";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 7979;
+    }
+
+}

uitest/src/main/java/com/vaadin/tests/fonticon/VaadinIconUI.java

@@ -0,0 +1,45 @@
+package com.vaadin.tests.fonticon;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.icons.VaadinIcons;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.shared.ui.ContentMode;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.UI;
+import com.vaadin.ui.VerticalLayout;
+
+@Theme("tests-valo")
+public class VaadinIconUI extends UI {
+
+    @Override
+    protected void init(VaadinRequest request) {
+        VerticalLayout layout = new VerticalLayout();
+
+        TextField name = new TextField("Name");
+        name.setIcon(VaadinIcons.USER);
+        name.addStyleName("blueicon");
+        layout.addComponent(name);
+
+        // Button allows specifying icon resource in constructor
+        Button ok = new Button("OK", VaadinIcons.CHECK);
+        ok.addStyleName("blueicon");
+        layout.addComponent(ok);
+
+        setContent(layout);
+
+        Label label = new Label("I " + VaadinIcons.HEART.getHtml() + " Vaadin",
+                ContentMode.HTML);
+        label.addStyleName("redicon");
+        layout.addComponent(label);
+
+        TextField amount = new TextField("Amount (in "
+                + new String(
+                        Character.toChars(VaadinIcons.DOLLAR.getCodepoint()))
+                + ")");
+        amount.addStyleName("amount");
+        layout.addComponent(amount);
+    }
+
+}

uitest/src/main/java/com/vaadin/tests/themes/valo/CommonParts.java

@@ -16,11 +16,11 @@
 package com.vaadin.tests.themes.valo;
 
 import com.vaadin.event.ShortcutAction.KeyCode;
+import com.vaadin.icons.VaadinIcons;
 import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
 import com.vaadin.server.AbstractErrorMessage;
 import com.vaadin.server.ErrorMessage.ErrorLevel;
-import com.vaadin.server.FontAwesome;
 import com.vaadin.server.Page;
 import com.vaadin.server.UserError;
 import com.vaadin.shared.Position;
@@ -267,7 +267,7 @@ public class CommonParts extends VerticalLayout implements View {
                         delay.setValue("");
                     }
                 });
-                clear.setIcon(FontAwesome.TIMES_CIRCLE);
+                clear.setIcon(VaadinIcons.CLOSE_CIRCLE);
                 clear.addStyleName("last");
                 clear.addStyleName(ValoTheme.BUTTON_SMALL);
                 clear.addStyleName(ValoTheme.BUTTON_ICON_ONLY);

uitest/src/main/java/com/vaadin/tests/themes/valo/MenuBars.java

@@ -15,9 +15,9 @@
  */
 package com.vaadin.tests.themes.valo;
 
+import com.vaadin.icons.VaadinIcons;
 import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
-import com.vaadin.server.FontAwesome;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.MenuBar;
@@ -192,12 +192,12 @@ public class MenuBars extends VerticalLayout implements View {
         fav.setCheckable(true);
         fav.setCheckable(true);
 
-        menubar.addItem("Attach", click).setIcon(FontAwesome.PAPERCLIP);
-        menubar.addItem("Undo", click).setIcon(FontAwesome.UNDO);
+        menubar.addItem("Attach", click).setIcon(VaadinIcons.PAPERCLIP);
+        menubar.addItem("Undo", click).setIcon(VaadinIcons.ROTATE_LEFT);
         MenuItem redo = menubar.addItem("Redo", click);
-        redo.setIcon(FontAwesome.REPEAT);
+        redo.setIcon(VaadinIcons.ROTATE_RIGHT);
         redo.setEnabled(false);
-        menubar.addItem("Upload", click).setIcon(FontAwesome.UPLOAD);
+        menubar.addItem("Upload", click).setIcon(VaadinIcons.UPLOAD);
 
         return menubar;
     }
@@ -207,31 +207,31 @@ public class MenuBars extends VerticalLayout implements View {
         menubar.setWidth("100%");
 
         MenuItem fav = menubar.addItem("", null);
-        fav.setIcon(FontAwesome.ALIGN_LEFT);
+        fav.setIcon(VaadinIcons.ALIGN_LEFT);
         fav.setStyleName("icon-only");
         fav.setCheckable(true);
         // fav.setChecked(true);
 
         fav = menubar.addItem("", null);
-        fav.setIcon(FontAwesome.ALIGN_CENTER);
+        fav.setIcon(VaadinIcons.ALIGN_CENTER);
         fav.setStyleName("icon-only");
         fav.setCheckable(true);
 
         fav = menubar.addItem("", null);
-        fav.setIcon(FontAwesome.ALIGN_RIGHT);
+        fav.setIcon(VaadinIcons.ALIGN_RIGHT);
         fav.setStyleName("icon-only");
         fav.setCheckable(true);
 
         MenuItem clip = menubar.addItem("", null);
-        clip.setIcon(FontAwesome.PAPERCLIP);
+        clip.setIcon(VaadinIcons.PAPERCLIP);
         clip.setStyleName("icon-only");
 
         MenuItem undo = menubar.addItem("", null);
-        undo.setIcon(FontAwesome.UNDO);
+        undo.setIcon(VaadinIcons.ROTATE_LEFT);
         undo.setStyleName("icon-only");
 
         MenuItem redo = menubar.addItem("", null);
-        redo.setIcon(FontAwesome.REPEAT);
+        redo.setIcon(VaadinIcons.ROTATE_RIGHT);
         redo.setEnabled(false);
         redo.setStyleName("icon-only");
 

uitest/src/main/java/com/vaadin/tests/themes/valo/Panels.java

@@ -15,9 +15,9 @@
  */
 package com.vaadin.tests.themes.valo;
 
+import com.vaadin.icons.VaadinIcons;
 import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
-import com.vaadin.server.FontAwesome;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.Component;
 import com.vaadin.ui.CssLayout;
@@ -112,7 +112,7 @@ public class Panels extends VerticalLayout implements View {
         panelCaption.setExpandRatio(label, 1);
 
         Button action = new Button();
-        action.setIcon(FontAwesome.PENCIL);
+        action.setIcon(VaadinIcons.PENCIL);
         action.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
         action.addStyleName(ValoTheme.BUTTON_SMALL);
         action.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
@@ -120,7 +120,7 @@ public class Panels extends VerticalLayout implements View {
         MenuBar dropdown = new MenuBar();
         dropdown.addStyleName(ValoTheme.MENUBAR_BORDERLESS);
         dropdown.addStyleName(ValoTheme.MENUBAR_SMALL);
-        MenuItem addItem = dropdown.addItem("", FontAwesome.CHEVRON_DOWN, null);
+        MenuItem addItem = dropdown.addItem("", VaadinIcons.CHEVRON_DOWN, null);
         addItem.setStyleName("icon-only");
         addItem.addItem("Settings", null);
         addItem.addItem("Preferences", null);

uitest/src/main/resources/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html

@@ -14,11 +14,11 @@
          <strong>Application</strong>
         </v-label>
        </v-horizontal-layout>
-       <v-button icon="fonticon://FontAwesome/f03a" style-name="primary small valo-menu-toggle" plain-text="" >
+       <v-button icon="fonticon://Vaadin-Icons/e7f1" style-name="primary small valo-menu-toggle" plain-text="" >
          Menu
        </v-button>
        <v-css-layout style-name="valo-menuitems" >
-        <v-button icon="fonticon://FontAwesome/f01c" primary-style-name="valo-menu-item" >
+        <v-button icon="fonticon://Vaadin-Icons/e71b" primary-style-name="valo-menu-item" >
           Inbox
          <span class="valo-menu-badge">7</span>
         </v-button>
@@ -39,11 +39,11 @@
          <strong>Application</strong>
         </v-label>
        </v-horizontal-layout>
-       <v-button icon="fonticon://FontAwesome/f03a" style-name="primary small valo-menu-toggle" plain-text="" >
+       <v-button icon="fonticon://Vaadin-Icons/e7f1" style-name="primary small valo-menu-toggle" plain-text="" >
          Menu
        </v-button>
        <v-css-layout style-name="valo-menuitems" >
-        <v-button icon="fonticon://FontAwesome/f01c" primary-style-name="valo-menu-item" >
+        <v-button icon="fonticon://Vaadin-Icons/e71b" primary-style-name="valo-menu-item" >
           Inbox
          <span class="valo-menu-badge">7</span>
         </v-button>
@@ -64,11 +64,11 @@
          <strong>Application</strong>
         </v-label>
        </v-horizontal-layout>
-       <v-button icon="fonticon://FontAwesome/f03a" style-name="primary small valo-menu-toggle" plain-text="">
+       <v-button icon="fonticon://Vaadin-Icons/e7f1" style-name="primary small valo-menu-toggle" plain-text="">
          Menu
        </v-button>
        <v-css-layout style-name="valo-menuitems">
-        <v-button icon="fonticon://FontAwesome/f01c" primary-style-name="valo-menu-item" >
+        <v-button icon="fonticon://Vaadin-Icons/e71b" primary-style-name="valo-menu-item" >
           Inbox
          <span class="valo-menu-badge">7</span>
         </v-button>

uitest/src/main/themes/VAADIN/themes/tests-valo-disabled-animations/_variables.scss

@@ -1,3 +1,4 @@
 $v-animations-enabled: false;
+$v-font-awesome: true;
 
 @import "../valo/valo";

uitest/src/main/themes/VAADIN/themes/tests-valo/_valotest.scss

@@ -145,4 +145,18 @@
   .v-menubar-color1 {
     @include valo-menubar-style($background-color: $v-selection-color, $unit-size: null);
   }
+
+  .redicon .v-icon {
+    color: #ff3a49;
+  }
+  .v-caption-blueicon,
+  .blueicon {
+    .v-icon {
+      color: #00b4f0;
+  }}
+
+  .v-caption-amount .v-captiontext {
+    font-family: Vaadin-Icons;
+  }
+
 }

uitest/src/test/java/com/vaadin/tests/components/checkboxgroup/CheckBoxGroupTest.java

@@ -32,7 +32,7 @@ import org.junit.Test;
 import org.openqa.selenium.By;
 import org.openqa.selenium.WebElement;
 
-import com.vaadin.server.FontAwesome;
+import com.vaadin.icons.VaadinIcons;
 import com.vaadin.testbench.elements.CheckBoxGroupElement;
 import com.vaadin.tests.components.checkbox.CheckBoxGroupTestUI;
 import com.vaadin.tests.tb3.MultiBrowserTest;
@@ -168,9 +168,10 @@ public class CheckBoxGroupTest extends MultiBrowserTest {
                 "Use Item Icon Generator");
         assertItemSuffices(20);
         List<WebElement> icons = getSelect()
-                .findElements(By.cssSelector(".v-icon.FontAwesome"));
+                .findElements(By.cssSelector(".v-select-optiongroup .v-icon"));
+        Assert.assertTrue(icons.size() > 0);
         for (int i = 0; i < icons.size(); i++) {
-            Assert.assertEquals(FontAwesome.values()[i + 1].getCodepoint(),
+            Assert.assertEquals(VaadinIcons.values()[i + 1].getCodepoint(),
                     icons.get(i).getText().charAt(0));
         }
     }

uitest/src/test/java/com/vaadin/tests/components/javascriptcomponent/JSComponentLoadingIndicatorTest.java

@@ -12,9 +12,9 @@ public class JSComponentLoadingIndicatorTest extends SingleBrowserTest {
     @Test
     public void ensureLoadingIndicatorShown() {
         openTestURL();
+        WebElement js = findElement(By.id("js"));
         testBench().disableWaitForVaadin();
 
-        WebElement js = findElement(By.id("js"));
         js.click();
         waitUntilLoadingIndicatorVisible();
         waitUntilLoadingIndicatorNotVisible();

uitest/src/test/java/com/vaadin/tests/components/radiobuttongroup/RadioButtonGroupTest.java

@@ -25,7 +25,7 @@ import org.junit.Before;
 import org.junit.Test;
 import org.openqa.selenium.WebElement;
 
-import com.vaadin.server.FontAwesome;
+import com.vaadin.icons.VaadinIcons;
 import com.vaadin.testbench.By;
 import com.vaadin.testbench.elements.RadioButtonGroupElement;
 import com.vaadin.tests.components.radiobutton.RadioButtonGroupTestUI;
@@ -131,7 +131,7 @@ public class RadioButtonGroupTest extends MultiBrowserTest {
         assertEquals(20, icons.size());
 
         for (int i = 0; i < icons.size(); i++) {
-            Assert.assertEquals(FontAwesome.values()[i + 1].getCodepoint(),
+            Assert.assertEquals(VaadinIcons.values()[i + 1].getCodepoint(),
                     icons.get(i).getText().charAt(0));
         }
     }

uitest/src/test/java/com/vaadin/tests/fonticon/FontIconsTest.java

@@ -30,7 +30,7 @@ public class FontIconsTest extends MultiBrowserTest {
     @Test
     public void checkScreenshot() throws IOException {
         openTestURL();
-        compareScreen("allFontIcons");
+        compareScreen("allVaadinIcons");
     }
 
     @Test

uitest/src/test/java/com/vaadin/tests/fonticon/VaadinIconSetTest.java

@@ -0,0 +1,51 @@
+package com.vaadin.tests.fonticon;
+
+import static org.junit.Assert.assertEquals;
+
+import java.io.IOException;
+
+import org.junit.Test;
+import org.openqa.selenium.Keys;
+
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.ComboBoxElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class VaadinIconSetTest extends MultiBrowserTest {
+
+    @Test
+    public void checkScreenshot_initial() throws IOException {
+        openTestURL();
+        compareScreen("allVaadinIcons");
+    }
+
+    @Test
+    public void checkScreenshot_changeIcon() throws IOException {
+        openTestURL();
+
+        $(ButtonElement.class).first().click();
+
+        compareScreen("allVaadinIcons-switch");
+    }
+
+    @Test
+    public void comboBoxItemIconsOnKeyboardNavigation() throws Exception {
+        openTestURL();
+        ComboBoxElement comboBox = $(ComboBoxElement.class).first();
+
+        // No initial value.
+        assertEquals("", comboBox.getText());
+
+        // Navigate to the first item with keyboard navigation.
+        comboBox.sendKeys(400, Keys.ARROW_DOWN, Keys.ARROW_DOWN);
+
+        // Value must be "One" without any extra characters.
+        // See ticket #14660
+        assertEquals("One", comboBox.getText());
+
+        // Check also the second item.
+        comboBox.sendKeys(Keys.ARROW_DOWN);
+        assertEquals("Two", comboBox.getText());
+    }
+
+}