font icon in svg node

adding font icon inside of the svg element

by ramesh valasa

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <svg xmlns="http://www.w3.org/2000/svg">
    <text x="40" y="40" fill="Black" font-size="25" font-weight="bold"  >
      &#xf056
    </text>
    <text x="80" y="80"  font-size="12" font-weight="bold" font-family="FontAwesome">
        <tspan id="v-54" class="v-line" dy="0em" x="0">&#xf056</tspan>
    </text>
    
    <foreignObject x="40" y="100" font-size="16" fill="Black"  width= "16" height="16"><span xmlns="http://www.w3.org/1999/xhtml" class="fa-minus-circle" ></span></foreignObject>
</svg>

<span class="font-icon-demo fa-minus-circle"> This font icon  I am expecting in SVG </span>

CSS

.fa-minus-circle::before {
  content: '\f056';
  font-family: 'FontAwesome';
  color: red;
 }
 
 text {
   font-family: "FontAwesome";
 }
 
 .font-icon-demo {
   display: block;
 }