如何在使用th:text属性的h标签中添加MDB图标？

核心原因是th:text属性会覆盖宿主标签的全部内部内容，包括嵌套的子标签，因此不能将图标和th:text放在同一个标签内，可通过以下两种安全合规的方式实现需求：

方案1：嵌套独立文本标签（最推荐） #

将动态渲染的文本内容放到span等内联子标签中，把th:text属性写在子标签上，图标和文本标签同级存放于h2内即可：

<h2 class="mt-5 text-center text-white">
  <span th:text="|${category} - newest posts|">politics - newest posts</span>
  <i class="fas fa-landmark text-warning mx-2"></i>
</h2>

该方案无XSS风险，结构清晰，后续调整文本和图标的间距、样式也更方便。

方案2：使用Thymeleaf文本内联语法 #

如果不想额外添加嵌套标签，可以开启Thymeleaf文本内联，直接在内容中插入变量：

<h2 class="mt-5 text-center text-white" th:inline="text">
  [[${category}]] - newest posts
  <i class="fas fa-landmark text-warning mx-2"></i>
</h2>

内联语法默认会对变量内容做HTML转义处理，同样可以避免XSS安全问题。

注意：不推荐使用th:utext直接拼接HTML内容的实现方式，若${category}变量包含用户可控的输入，会存在XSS注入风险，仅当你能完全保证变量内容安全时可酌情使用。

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