How to change the icon of DrawerToggle

Flow
1

Hi, I use AppLayout on latest V14. I would like to have the DrawerToggle’s icon switched between drawer’s on and off. Is it possible to do That? How?

Many thanks,
Joey

2

You can add any HTML content inside it to replace the default icon.

Not 100% sure how to do that in Java/Flow, but you should be able to append elements inside it with something like drawerToggle.getElement().appendChild(...).

If you’re using the web component, you can simply do <vaadin-drawer-toggle>Some custom content</vaadin-drawer-toggle>.

In addition to replacing the default icon, you can also customize it with CSS:

<dom-module id="my-drawer-toggle" theme-for="vaadin-drawer-toggle">
  <template>
    <style>
      [part=icon]
::before {
	    /* Use a custom font icon or background image */
        content: ...;
		background: ...;
      }
    </style>
  </template>
</dom-module>

The easier way to set those styles from Java is to place the CSS in an external file and use the @CssImport annotation: https://vaadin.com/tutorials/themes-and-styling-in-vaadin#_bundled_local_file_system

3

Thanks a lot.

4

In Java, I tried

DrawerToggle drawerToggleButton = new DrawerToggle();
        drawerToggleButton.setIcon(new Icon(VaadinIcon.ARROW_LEFT));
        drawerToggleButton.addClickListener(e -> e.getSource().setIcon(new Icon(VaadinIcon.ARROW_LEFT)));

and in pom i added

    <dependencies>
        <!-- Icons dependencies -->
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-icons-flow</artifactId>
        </dependency>
    </dependencies>

like described in https://vaadin.com/components/vaadin-icons/java-install.
But for some reason I get an empty icon instead of the default hamburger menu icon.
Any thoughts?

5

José Reis:
In Java, I tried

DrawerToggle drawerToggleButton = new DrawerToggle();
        drawerToggleButton.setIcon(new Icon(VaadinIcon.ARROW_LEFT));
        drawerToggleButton.addClickListener(e -> e.getSource().setIcon(new Icon(VaadinIcon.ARROW_LEFT)));

and in pom i added

    <dependencies>
        <!-- Icons dependencies -->
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-icons-flow</artifactId>
        </dependency>
    </dependencies>

like described in https://vaadin.com/components/vaadin-icons/java-install.
But for some reason I get an empty icon instead of the default hamburger menu icon.
Any thoughts?

I had tried that as well. I’m using Vaadin 15. not working…

6

Update: for me, deleting node_modules forlder and do a mvn clean install worked!

7

not for me… just tried. too bad. Are you using v14?
I saw your code, you are using Vaadin icon. I’m using custom icon. probably that is why it doesn’t work for me?

8

one thing for sure. Vaadin icon not an issue. custom image failed.

9

Ivan Ooi:
not for me… just tried. too bad. Are you using v14?
I saw your code, you are using Vaadin icon. I’m using custom icon. probably that is why it doesn’t work for me?

My pom says 14.1.21.

<properties>
      (...)
      <vaadin.version>14.1.21</vaadin.version>
	  (...)
</properties>