JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS-MML_SVG"></script>
<body>
<p>
  <dfn>only text in braces (<span>text</span>)</dfn>
</p>

<p>
  <dfn>empty formula in braces (<math></math>)</dfn>
</p>

<p>
  <dfn>full formula in braces (
    <math>
      <mrow>
        <mo>&#916;</mo>
        <msubsup>
          <mi>H</mi>
          <mrow>
            <mtext>f</mtext>
          </mrow>
          <mo>&#176;</mo>
        </msubsup>
      </mrow>
    </math>
  )
  </dfn>
</p>
</body>

CSS

dfn, .imaged {
  /*margin-right: 0.2em;*/
  padding-right: 1em;
  background: url("http://www.w3schools.com/images/html5.gif") right center no-repeat;
  background-size: 0.7em;
}