Material icon disappears inside <span>

Question

I want to display an icon next to a chunk of text, but the icon seems to be disappearing on me. This is what I have:

      <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>

The icon doesn't show up. When I go to inspect the page, it isn't even in the source HTML. When I do this:

  <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>

and take the icon out of the span, it does show up, however, it's in the wrong spot.

I'm curious to know why the icon doesn't show up in the first place. Let me know if I need to provide more information. Thanks!

Answer 1

so I was able to fix this and posting the solution in case it helps anybody.

In my original question, I had left out that there was an i18n tag in the span, because I wanted to include only the "relevant" part of the markup in my question. It looked like this:

  <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>

It wasn't displaying the icon because the icon wasn't part of the translation! This was the solution:

  <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>

Hopefully it's helpful to someone!