How to Include a Font Awesome Icon in My Svg

How do I include a font awesome icon in my svg?

i is not valid SVG. You need to include the actual character that displays the icon. If you take a look at font awesome's stylesheet you will see...

.icon-group:before                { content: "\f0c0"; }
.icon-link:before                 { content: "\f0c1"; }
.icon-cloud:before                { content: "\f0c2"; }
.icon-beaker:before               { content: "\f0c3"; }
.icon-cut:before                  { content: "\f0c4"; }
.icon-copy:before                 { content: "\f0c5"; }
.icon-paper-clip:before           { content: "\f0c6"; }
.icon-save:before                 { content: "\f0c7"; }
.icon-sign-blank:before           { content: "\f0c8"; }
.icon-reorder:before              { content: "\f0c9"; }
.icon-list-ul:before              { content: "\f0ca"; }
.icon-list-ol:before              { content: "\f0cb"; }
.icon-strikethrough:before        { content: "\f0cc"; }
.icon-underline:before            { content: "\f0cd"; }
.icon-table:before                { content: "\f0ce"; }

But those are unicode characters encoded for CSS. In SVG you would need to change the syntax of example \f040 to:

<g><text x="0" y="0"></text></g>

And then in your stylesheet add:

svg text {
   font-family: FontAwesome;
}

According to Niek's comment, if you use the free version of Font Awesome 5+, you must use the following font-family declaration:

svg text {
   font-family: 'Font Awesome 5 Free';
}

How to import a font-awesome icon inside an svg in angular?

It's hard to give the perfect answer as it depends on what exactly you're trying to achieve.

One approach is to avoid fa-icon component altogether and render the icon path manually as part of your own SVG object.

<svg viewBox='0 0 1000 1000' xmlns="http://www.w3.org/2000/svg">
  <path [attr.d]="faSkullCrossbones.icon[4]"></path>
</svg>

Another approach is to render fa-icon into SVG's symbol and then embed it with use.

<fa-icon [icon]="faSkullCrossbones" symbol="foobar"></fa-icon>

<svg viewBox='0 0 1000 1000' xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="#foobar" />
</svg>

How to add new SVG icon to font awesome

If I understand you correctly you want to create your own icons??

You can use this website https://icomoon.io/app to create essentially your own icon pack, it will generate everything for you and then you just need to use the classnames they created, exactly how you would use font-awesome.

Add icon from FontAwesome to SVG text

How are you using the SVG?

Is it inlined in the HTML?

If so, how are you telling the browser where to find the font? If the FontAwesome font is not in your system font folder, then you need to include the @font-face declaration from the top of the FontAwesome CCS file.

@font-face {
  font-family:'FontAwesome';
  src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
      url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
      url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
      url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
      url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight:normal;
  font-style:normal
}

and make sure all those fonts are included in your website and the URLs are correct.

or is it being imported via an <img> etc?

If so, then you'll need to include some or all of the font files in your CSS as Data URIs. See the following question for more info:

use FontAwesome icon in svg without external files

How to add font awesome icon to a svg circle drawn via svg.js?

I downloaded the font-awesome zip file and took the first icon I could find in fontawesome-free-5.15.1-web.zip/fontawesome-free-5.15.1-web/svgs/brands/500px.svg.
If you open 500px.svg in your editor, you will find the viewBox attribute and a <path> element with a d="" attribute. Copy the d attribute which is the icon path. It is a bunch of commands and coordinates which fits inside the viewBox.

As you can see in the snippet below, I have used the viewBox to define my new SVG and the path d attribute to get svg.js to draw it.

const fontAwesomeIcon = "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7 8.5-28.6 53 0 89.4-10.1 89.4-64.4 0-61-77.1-89.6-116.9-44.6-23.5 26.4-17.6 42.1-17.6 157.6 50.7 31 118.3 22 160.4-20.1 24.8-24.8 38.5-58 38.5-93 0-35.2-13.8-68.2-38.8-93.3-24.8-24.8-57.8-38.5-93.3-38.5s-68.8 13.8-93.5 38.5c-.3.3-16 16.5-21.2 23.9l-.5.6c-3.3 4.7-6.3 9.1-20.1 6.1-6.9-1.7-14.3-5.8-14.3-11.8V20c0-5 3.9-10.5 10.5-10.5h241.3c8.3 0 8.3 11.6 8.3 15.1 0 3.9 0 15.1-8.3 15.1H130.3v132.9h.3c104.2-109.8 282.8-36 282.8 108.9 0 178.1-244.8 220.3-310.1 62.8zm63.3-260.8c-.5 4.2 4.6 24.5 14.6 20.6C306 56.6 384 144.5 390.6 144.5c4.8 0 22.8-15.3 14.3-22.8-93.2-89-234.5-57-238.3-38.2zM393 414.7C283 524.6 94 475.5 61 310.5c0-12.2-30.4-7.4-28.9 3.3 24 173.4 246 256.9 381.6 121.3 6.9-7.8-12.6-28.4-20.7-20.4zM213.6 306.6c0 4 4.3 7.3 5.5 8.5 3 3 6.1 4.4 8.5 4.4 3.8 0 2.6.2 22.3-19.5 19.6 19.3 19.1 19.5 22.3 19.5 5.4 0 18.5-10.4 10.7-18.2L265.6 284l18.2-18.2c6.3-6.8-10.1-21.8-16.2-15.7L249.7 268c-18.6-18.8-18.4-19.5-21.5-19.5-5 0-18 11.7-12.4 17.3L234 284c-18.1 17.9-20.4 19.2-20.4 22.6z"

const canvas = SVG()
  .viewbox(0, 0, 448, 512) // set the viewBox to match font-awesome icon
  .size('100%', 300) // set any size you want
  .attr('id', 'canvas') // add an id or class so that you can style via CSS
  .addTo('body') // add the SVG to the <body> element

canvas.path(fontAwesomeIcon)  // draw the font-awesome icon
canvas.circle(512) // draw a cirle

body {
  background-color: black;
}

#canvas {
  background-color: white;
}
#canvas circle {
  fill: none;
  stroke: red;
  stroke-width: 5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js"></script>