How to use fonts from bootstrap-icons?

I am using Elixir and Phoenix for more than 5 years and I only built API applications in the past, so I never had the need to care about assets etc. and when I needed them, I always used the CDN-files.

This time I wanted to have a look into this because it is one of the major things I really don’t know anything about. I created a new phoenix application with mix --no-tailwind. I used --no-tailwind because I know Bootstrap way better than Tailwind.

CSS and JS is working fine, I can use Bootstrap for my application, but I also want to use the bootstrap icons, so I added them via yarn add -D bootstrap-icons.

Here are the most important parts of my application that are somehow related to my issue:


# ...
  def deps do
      # ...
      {:dart_sass, "~> 0.7.0", runtime: Mix.env() == :dev}

  def aliases do
      # ...
      "assets.setup": ["sass.install --if-missing", "esbuild.install --if-missing"],
      "": ["sass default", "esbuild default"],
      "assets.deploy": ["sass default --no-source-map --style=compressed", "esbuild default --minify", "phx.digest"]

# ...


# ...

config :dart_sass,
  version: "1.61.0",
  default: [
    args: ~w(css/app.scss ../priv/static/assets/app.css),
    cd: Path.expand("../assets", __DIR__)


  "devDependencies": {
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.2",
    "bootstrap-icons": "^1.11.1"


// Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

// Bootstrap Icons
@import "../node_modules/bootstrap-icons/font/bootstrap-icons";


# ...
import "bootstrap"
# ...

When I now try to access a font, I only get a 404 page :thinking:

http://localhost:4000/assets/fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47404 Not Found

I can make it work when copying the fonts to priv/static/assets:

cp -r assets/node_modules/bootstrap-icons/font/fonts priv/static/assets/

But I can’t believe CSS and JS asset management is automated, but for using fonts I need to copy them manually :thinking:

I found some articles that are speaking about fonts, but those were quite old and some extra dependencies I would need to install have already been deprecated, so I am a bit lost :confused:

Maybe someone can enlighten me :slight_smile:

Were you able to figure this out? I encountered a similar issue earlier and was clueless. Would love to hear some input from experienced folks on how to properly make use of an icon font in Phoenix.

For the moment, I am using a custom mix task, that copies a given list of files from assets/<somehwere> to priv/static/assets/fonts/ :man_shrugging:

This way I could continue with my stuff. Would still be cool to hear how others are doing it and whether there is a “right” way to do this :slight_smile: