Material 图标在 <span> 内消失

Question

我想在一大块文本旁边显示一个图标，但图标似乎在我身上消失了。这是我的：

      <div class="d-flex align-items-center mt-1" >
        <span class="ml-3">
          My text, blah blah blah <i class="material-icons text-info cursor-help">info_outline</i>
        </span>
      </div>

图标没有显示。当我去检查页面时，它甚至不在源 HTML 中。当我这样做时：

  <div class="d-flex align-items-center mt-1" >
    <span class="ml-3">
      My text, blah blah blah
    </span> 
    <i class="material-icons text-info cursor-help">info_outline</i>
  </div>

将图标移出范围，它确实显示了，但是，它在错误的位置。

我很想知道为什么图标一开始没有出现。让我知道是否需要提供更多信息。谢谢！

Answer 1

所以我能够解决这个问题并发布解决方案以防它对任何人有帮助。

在我最初的问题中，我没有提到 span 中有一个 i18n 标记，因为我只想在我的问题中包含标记的“相关”部分。它看起来像这样：

  <div class="d-flex align-items-center mt-1" >
        <span class="ml-3" @@i18n="myTranslation">
          My text, blah blah blah <i class="material-icons text-info cursor-help">info_outline</i>
        </span>
      </div>

它没有显示图标，因为图标不是翻译的一部分！这就是解决方案：

  <div class="d-flex align-items-center mt-1" >
        <span class="ml-3">
          <span @@i18n="myTranslation"> My text, blah blah blah </span> <i class="material-icons text-info cursor-help">info_outline</i>
        </span>
      </div>

希望对大家有所帮助！

Material 图标在 <span> 内消失

Material icon disappears inside <span>

html

angular-ui-bootstrap

angular-material

angular