使用Thymeleaf的th:text属性后Materializecss图标消失问题求助

嘿，这个坑我之前也踩过！咱们先搞明白为啥会出现这种情况：

当你给<button>标签加上th:text属性时，Thymeleaf会完全替换按钮内部的所有内容——包括那个用来显示图标的<i>标签。原本的Send <i class="material-icons left">send</i>会被th:text的值直接覆盖，图标自然就消失了。

给你两个简单有效的解决方案：

方案1：用包裹文本，单独给加th:text #

把按钮里的文本放在一个<span>元素中，只给这个<span>设置th:text，这样图标元素就不会被影响：

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

这里的#{button.send}是示例的国际化文本，你可以换成实际需要的变量或静态文本，比如th:text="${'Send'}"。

方案2：使用Thymeleaf内联文本表达式 #

给按钮添加th:inline="text"属性，然后用[[...]]包裹文本内容，Thymeleaf只会替换表达式部分，保留其他元素：

<button class="waves-effect waves-light btn" type="submit" name="save" th:inline="text">
  [[${'Send'}]] <i class="material-icons left">send</i>
</button>

这种方式更简洁，适合不需要额外嵌套标签的场景。

两种方法都能完美保留Materialize的图标，你可以根据自己的代码风格选一种就行~

内容的提问来源于stack exchange，提问作者drapo