Search code examples
thymeleafsemantic-ui

Thymeleaf semantic-ui wipes out icon in header

Can't figure out a way around this...

I have a header (H1 tag) whose value is dependent on a variable. This header also has an icon in it. The following code displays the header text, but the icon is gone. I can understand why... the th:text is replacing everything in the tag. Is there a way to keep the icon and have a dynamic header?

Here is the code:

<h1 class="ui header" th:text="${'Widget ' +widget.id}"><i class=" ui grey cog icon"></i>Default Text</h1>

If I remove the th:text="${'Widget ' +widget.id}" piece the icon comes back.

Any thoughts?

Thanks, Keith

Solution

  • The th:text attribute will replace everything in the body of the <h1> tag.

    You can put the text in a separate <span> instead:

    <h1 class="ui header"><span th:text="${'Widget ' +widget.id}"></span><i class=" ui grey cog icon"></i>Default Text</h1>