Materializecss icons are disappearing from html after using th:text attribute from thymeleaf

Question

I am currently learning web app development with Spring and during that I encountered with annoying problem.

So lets get to the point. I am using materializecss which allows to make a button with icon just by:

<button class="waves-effect waves-light btn" type="submit" name="save">Send
    <i class="material-icons left">send</i>
</button>

And i am getting a nice button with icon: link

But as soon as I add a thymeleaf attribute th:text it causes disappearing of the icon.

Thats the code:

<button class="waves-effect waves-light btn" type="submit" name="save"
        th:text="#{submit}">Send
    <i class="material-icons right">send</i>
</button>

Do you have any idea what can be the reason?

Answer 1

th:text overwrites all children tag. You have to move the text to it's own tag. Like this, for example:

<button class="waves-effect waves-light btn" type="submit" name="save">
    <span th:text="#{submit}" />
    <i class="material-icons right">send</i>
</button>