Custom font icons (Vaadin 7)

Hi, I’m trying to use custom font-icons instead of FontAwesome or Vaadin icons.

I’ve followed these steps:
And watched this video:

Here’s my code and attached an image of the working directory.


@import "../valo/valo.scss";

@include v-font(IcoMoon, '../../mytheme/fonts/icomoon');

@mixin mytheme {
  @include valo;

IcoMoon enum

public enum IcoMoon implements FontIcon {

	private int codepoint;
	IcoMoon(int codepoint) {
		this.codepoint = codepoint;
	public String getMIMEType() {
		// TODO Auto-generated method stub
		return null;

	public String getFontFamily() {
		return "IcoMoon";

	public int getCodepoint() {
		return codepoint;

	public String getHtml() {
		return "<span class=\"v-icon IcoMoon\">$#x" + Integer.toHexString(codepoint) + ";</span>";


Implementation in a Label

public class MyUI extends UI {

    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        Label testText = new Label("Test text. " + IcoMoon.LIFEBUOY.getHtml() + " wow dun ");

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {


Nevermind, I fixed the problem after a long search.

  • Make sure you disable caching in your browser when refreshing the webapplication.
  • The scss import is in styles.scss like this for me:

@include v-font(IcoMoon, '../../../../mytheme/fonts/icomoon/icomoon');

  • Also in the FontIcon implementation you can write the getHtml method like this:
	public String getHtml() {
		return GenericFontIcon.getHtml(FONT_FAMILY, this.codepoint);