use Open Iconic SVG definition to define an icon

icon-from-svg-code.sccs

/* ==========================================================================
   SVG to CSS Example: Breadcrumbs "Home Icon"
   - an example of using the Open Iconic SVG code to create a "home" icon
   - this is the same method as used in the Bootstrap 4 _variables.sccs file
   - started by downloading the distro from https://useiconic.com/open
   - found the 'home' icon SVG and copied its path code
   - then pasted the path code into one of the Bootstrap icon definitions &
     changed the fill color
   ========================================================================== */
$link-color: blue;
$link-hover-color: red;
$home-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$link-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 3h1v4h2v-2h2v2h2v-4.03l1 .03-4-3z'/%3E%3C/svg%3E"), "#", "%23");
$home-icon-hover-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$link-hover-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 3h1v4h2v-2h2v2h2v-4.03l1 .03-4-3z'/%3E%3C/svg%3E"), "#", "%23");
.breadcrumbs .home-icon {
   display: inline-block;
   width: 1rem;
   height: 1rem;
   background: transparent no-repeat center center;
   background-size: 100% 100%;
   background-image: $home-icon-bg;
   text-decoration: none;
   color: transparent;
   &:hover,
   &:focus {
      text-decoration: none;
      background-image: $home-icon-hover-bg;
   }
}

What I like about this solution is that there are no additional font or SVG files to include. Just this tiny bit of SVG path code for each icon.

I wasn't able to reproduce it with the "path" code from a Font Awesome SVG file. I don't know the guts of SVG code well enough to figure out why not. Perhaps someone else will find the key for that.