Icons

Hello :slight_smile: I need your help! I would like to add more icons to vaadin designer 10++ (the phone and the user icon). When I search for it, I only get code pieces, but that’s not helpful. I wanted to install the Icon Package, but I couldn’t find any instructions. How can I download the icons so that they are displayed in the Designer???

Hey there! Vaadin 10+ comes with Vaadin Icons as a dependency. That one has vaadin:user and vaadin:phone, which are the ones that you are most likely looking for. You can check them all at https://vaadin.com/components/vaadin-icons/html-examples.

You can use these in Designer, but how depends a bit on which version of Vaadin you are using. The below is for V14 in normal mode (not compatibility mode).

Easiest way is to add a “Prefix Icon Button” from the palette. It will give you a button with a ready made button with an iron-icon within it. The icon field in iron-icon has lumo:edit by default. Change this to vaadin:edit. Now you still have to import the Vaadin Icons set to your design. Go to the code view with the “</>” icon at the top. At the end of the imports, add one more to the list: import '@vaadin/vaadin-icons/vaadin-icons.js';. Now you have the full Vaadin icons list in use. Go back to the live editor with the pen icon, and you should see the user icon. You can similarily add iron-icon to other places.

Hope that helps to get the icons on the screen.