How to use FontAwesome 5 with Chrome on Rails?

Using a Rails 6.1.4.1 app and trying to upgrade from FontAwesome 4 to 5.

gem 'font-awesome-sass', '~> 5.15.1'

In my app/assets/stylesheets/application.scss file:

@import "font-awesome-sprockets";
@import "font-awesome";

Using FA via the icon or via SCSS does not work for Chrome or Firefox. It does work fine in Safari.

Examples of how I'm using it:

.btn-icon {
  @extend .btn;
  &:before {
    font-family: "Font Awesome 5 Free";
    padding-right: .5rem;
  }
}

.btn-new {
  @extend .btn-icon;
  @extend .btn-primary;
  &:before {
    content: "\f067";
  }
}

link_to icon('fas', 'cogs') + t(:quote_sheet_options), ''

The icons simply don't show in Chrome/FF - what's going on here?

Update

If I setup my css as shown below, it works. But I still can't use the icon helper to show any icons in my markup, and I can't show the icon by adding the markup manually either.

.btn-icon {
  @extend .btn;
  &:before {
    @extend .fas;
    font-family: "Font Awesome 5 Free";
    padding-right: .5rem;
  }
}

.btn-new {
  @extend .btn-icon;
  @extend .btn-primary;
  &:before {
    @extend .fa-plus;
  }
}