Problem with MaterialSymbols after migration to Vaadin 25

Flow
1

After migrating to Vaadin 25 the MaterialSymbols are no longer working:

That’s how I included it in my styles.css

@font-face {
    font-family: "Material Symbols";
    font-weight: 400;
    src: url("./fonts/MaterialSymbols.woff2") format("woff2");
}

.material-symbols {
    display: inline-block;
    direction: ltr;
    font-family: "Material Symbols";
    font-feature-settings: "liga";
    font-size: var(--lumo-icon-size-m);
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
}

As long as a was using the @Theme annotation everything worked.
Now I move the styles.css and the fonts direcotry to /src/main/resources/META-INF/resources and the font no longer works.

Any ideas?

2

I had to add the fonts directory to the SecurityConfig,

http.authorizeHttpRequests(authorize -> authorize.requestMatchers("/icons/*.png", "/fonts/*.*").permitAll());

That makes perfect sense. I don’t really understand why it worked before :thinking:

1 Like
3

The old “theme” was serving them inside it’s named folder below /theme which was internally handled by Vaadin.

The new “theme” location uses the servlet container directly (instead of the VaadinServlet) to serve those files - enforcing the developer to “care” about them.

2 Likes
4

Thanks for the clarification!

Merry Christmas :christmas_tree:

1 Like