Display large icon in Vaadin 8 - icons

Question

Some versions of Vaadin offered FontAwesome built-in. Later Vaadin came with its own collection of icons.
How can I use either of those in Vaadin 8?
With the new emphasis on Vaadin Flow (Vaadin 10+) and re-implementing with Web Components, I have not been able to find any documentation on how to use either of those Vaadin 8 compatible font sources.
How can I conveniently get some large icons displayed as widgets within my Vaadin 8 layout?

Answer 1

There is some 8.x documentation regarding font icons and VaadinIcons, as well as creating your own font icons.
Using them is as simple as new Button("Add", VaadinIcons.PLUS);, but you mentioned something about some large icons which you don't get out of the box AFAIK.
However, based on the above doc, the quick and dirty solution is using a label and some styles:
Theme:
.big-icon .v-icon{
font-size: 300px;
}
Code:
public class Icon extends VerticalLayout {
public Icon() {
Label image = new Label();
image.setContentMode(ContentMode.HTML);
image.setValue(VaadinIcons.EYE.getHtml());
image.addStyleName("big-icon");
addComponent(image);
}
}
Result:
Obviously you can proceed with the madness, and create a slightly more flexible label of your own that does not require modifying the styles, and can be updated at runtim. Something along the lines of:
public class Icon extends Label {
private static final String CONTENT = "<span class=\"v-icon v-icon-%s\" style=\"font-family: %s; color: %s; font-size: %spx;\">&#x%s;</span>";
private Color color;
private int size;
private VaadinIcons icon;
public Icon(VaadinIcons icon) {
this(icon, Color.BLACK, 16);
}
public Icon(VaadinIcons icon, Color color, int size) {
this.icon = icon;
this.color = color;
this.size = size;
setContentMode(ContentMode.HTML);
updateIcon();
}
public void setIcon(VaadinIcons icon) {
this.icon = icon;
updateIcon();
}
public void setSize(int size) {
this.size = size;
updateIcon();
}
private void updateIcon() {
setValue(String.format(CONTENT,
icon.name(),
icon.getFontFamily(),
color.name(),
size,
Integer.toHexString(icon.getCodepoint())));
}
public void setColor(Color color) {
this.color = color;
}
public enum Color {
BLACK, GREEN
}
}
Where myLayout.addComponents(new Icon(VaadinIcons.PLUS), new Icon(VaadinIcons.INFO, Icon.Color.GREEN, 200)); results in:
There could be more elegant solutions, but this is as far as I went brainstorming because I didn't have such a need so far. I always used regular sized icons with buttons and labels. Anyhow, hopefully this should get you started.