Glyphicons are included as part of Bootstrap, here are the html entities used for the glyphs.

Why do you need html entities?

<svg width="1em" height="1em" style="border: 1px solid black">
<text dy="1em" x="0.5em"><i class="glyphicon glyphicon-envelope"></i></text>
</svg>

gives [], explanation: <i> is not allowed in <text> so it renders outside of SVG.

<svg width="1em" height="1em" style="border: 1px solid black">
<text dy="1em" x="0.5em"class="glyphicon glyphicon-envelope"></text>
</svg>

gives [], explanation: the css has a :before selector with a content, which will not work for an SVG element.

<svg width="1em" height="1em" style="border: 1px solid black">
<text dy="1em" x=".5em"><tspan class="glyphicon">&#x2709;</tspan></text>
</svg>

gives [], explanation: <tspan> is allowed in <text> so it renders inside of SVG, hence the clipping.

<svg width="1em" height="1em" style="border: 1px solid black">
<foreignObject fill="blue" height="1em" width="1em" dy="1em" x=".5em"><i class="glyphicon glyphicon-envelope"></i></foreignObject>
</svg>

gives [], explanation: <foreignObject> allows to let the browser render an object, but it gets overlaid on top of the SVG. Also check out what happens when you zoom in/out.