Search code examples
vaadinvaadin7

Using font icons with declarative UIs

While developing a new application with Vaadin 7.4.6, I found myself needing to supply icons for various buttons. Normally I'd be doing this with dashboardButton.setIcon(FontAwesome.BAR_CHART_O); but I'm trying to do this declaratively.

Now, I can achieve a similar effect if I include a span inside the button definition like below...

<v-button _id="dashboardButton" primary-style-name="valo-menu-item" style-name="borderless">
    <span class="v-icon FontAwesome">&#xF080</span>
    Dashboard
</v-button>

... and I already know that the books mentions that mapping objects to attributes is not supported (at least so far), but I was wondering if anyone knows a better alternative or if there's a way of using the font-icons enums instead of the code points, eg: FontAwesome.BAR_CHART_O instead of &#xF080.

Solution

  • The following also works (at least in v7.5.0 and Valo).

    <v-button icon="fonticon://FontAwesome/f0c7">Save</v-button>

    You still have to use the hex code but it's a little more elegant than your example. It's also what the Eclipse WYSIWYG Vaadin designer uses.

    Later edit: Detailed guide to creating and using custom font icons with Vaadin