[FEATURE] FontAwesome Icons

src/main/java/com/example/Application.java

@@ -4,6 +4,8 @@ import com.vaadin.flow.theme.aura.Aura;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 
+import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.dependency.StyleSheet;
 import com.vaadin.flow.component.page.AppShellConfigurator;
 import com.vaadin.flow.component.page.Push;
@@ -12,6 +14,8 @@ import com.vaadin.flow.server.PWA;
 @SpringBootApplication
 @StyleSheet(Aura.STYLESHEET)
 @StyleSheet("styles.css") // Your custom styles
+@NpmPackage(value = "@fortawesome/fontawesome-free", version = "6.7.2")
+@CssImport("@fortawesome/fontawesome-free/css/all.min.css")
 @Push
 @PWA(name = "Dialect Charts", shortName = "Dialect", offlinePath = "offline.html")
 public class Application implements AppShellConfigurator {

src/main/java/com/example/components/Fa.java

@@ -0,0 +1,34 @@
+package com.example.components;
+
+import com.vaadin.flow.component.icon.FontIcon;
+
+/**
+ * Font Awesome Free icon references, mirroring the ergonomics of
+ * {@code VaadinIcon.create()}. Backed by the {@code fa-*} CSS classes
+ * shipped in the bundled {@code @fortawesome/fontawesome-free} package.
+ *
+ * <p>Font Awesome paints glyphs via {@code content: var(--fa)} on
+ * {@code ::before}; the glyph-specific class (e.g. {@code fa-sun}) is what
+ * defines that {@code --fa} custom property, so both the family class
+ * ({@code fa-solid}) and the glyph class must be present.
+ */
+public enum Fa {
+
+    MOON("fa-solid", "fa-moon"),
+    SUN("fa-solid", "fa-sun"),
+    DASHBOARD("fa-solid", "fa-gauge-high"),
+    FORM("fa-solid", "fa-rectangle-list"),
+    TABLE("fa-solid", "fa-table"),
+    GLOBE("fa-solid", "fa-globe"),
+    SEARCH("fa-solid", "fa-magnifying-glass");
+
+    private final String[] classes;
+
+    Fa(String... classes) {
+        this.classes = classes;
+    }
+
+    public FontIcon create() {
+        return new FontIcon(classes);
+    }
+}

src/main/java/com/example/views/MainLayout.java

@@ -1,5 +1,6 @@
 package com.example.views;
 
+import com.example.components.Fa;
 import com.example.js.CommonJS;
 import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.applayout.AppLayout;
@@ -7,7 +8,6 @@ import com.vaadin.flow.component.applayout.DrawerToggle;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.button.ButtonVariant;
 import com.vaadin.flow.component.html.Span;
-import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.menubar.MenuBar;
 import com.vaadin.flow.component.menubar.MenuBarVariant;
 import com.vaadin.flow.component.sidenav.SideNav;
@@ -20,7 +20,7 @@ import java.util.Locale;
 @Layout
 public class MainLayout extends AppLayout {
 
-    private final Button themeToggle = new Button(VaadinIcon.MOON.create());
+    private final Button themeToggle = new Button(Fa.MOON.create());
 
     public MainLayout() {
         DrawerToggle toggle = new DrawerToggle();
@@ -44,11 +44,11 @@ public class MainLayout extends AppLayout {
 
         SideNav nav = new SideNav();
         nav.addItem(new SideNavItem(getTranslation("nav.dashboard"), DashboardView.class,
-                VaadinIcon.DASHBOARD.create()));
+                Fa.DASHBOARD.create()));
         nav.addItem(new SideNavItem(getTranslation("nav.form"), FormView.class,
-                VaadinIcon.FORM.create()));
+                Fa.FORM.create()));
         nav.addItem(new SideNavItem(getTranslation("nav.table"), TableView.class,
-                VaadinIcon.TABLE.create()));
+                Fa.TABLE.create()));
 
         addToDrawer(nav);
     }
@@ -57,7 +57,7 @@ public class MainLayout extends AppLayout {
         MenuBar menuBar = new MenuBar();
         menuBar.addThemeVariants(MenuBarVariant.LUMO_TERTIARY_INLINE);
 
-        var root = menuBar.addItem(VaadinIcon.GLOBE_WIRE.create());
+        var root = menuBar.addItem(Fa.GLOBE.create());
         root.setAriaLabel(getTranslation("action.language"));
 
         root.getSubMenu().addItem(getTranslation("lang.de"), e -> switchLanguage(Locale.GERMAN));
@@ -73,6 +73,6 @@ public class MainLayout extends AppLayout {
     }
 
     private void applyIconFor(String theme) {
-        themeToggle.setIcon("dark".equals(theme) ? VaadinIcon.SUN_O.create() : VaadinIcon.MOON.create());
+        themeToggle.setIcon("dark".equals(theme) ? Fa.SUN.create() : Fa.MOON.create());
     }
 }

src/main/java/com/example/views/TableView.java

@@ -1,9 +1,9 @@
 package com.example.views;
 
 import com.example.components.Card;
+import com.example.components.Fa;
 import com.vaadin.flow.component.grid.Grid;
 import com.vaadin.flow.component.grid.dataview.GridListDataView;
-import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.textfield.TextField;
 import com.vaadin.flow.data.value.ValueChangeMode;
@@ -45,7 +45,7 @@ public class TableView extends VerticalLayout implements HasDynamicTitle {
 
         TextField suche = new TextField();
         suche.setPlaceholder(getTranslation("table.search"));
-        suche.setPrefixComponent(VaadinIcon.SEARCH.create());
+        suche.setPrefixComponent(Fa.SEARCH.create());
         suche.setClearButtonVisible(true);
         suche.setValueChangeMode(ValueChangeMode.EAGER);
         suche.setWidthFull();

src/main/resources/META-INF/resources/styles.css

@@ -63,6 +63,17 @@
   border-style: solid;
 }
 
+/* Icon-only buttons (e.g. theme toggle): Font Awesome's icon-font metrics give
+   the button's label part an inflated line box, growing the button and pushing
+   the icon toward the top instead of centering it. Vaadin SVG icons didn't hit
+   this because they don't route through font line-height at all. */
+vaadin-button[theme~="icon"]::part(label) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
 /* Top bar: solid white, opaque, divider + soft shadow below.
    Separates it from the sidebar/content instead of blending into one surface. */
 vaadin-app-layout::part(navbar) {