I'd like to use bootstrap-icons in my Rails 7.0 app, but icons are collapsed.

It should display "plus" icon (This image is in my old app).

I'm also getting ActionController::RoutingError.

08:05:31 web.1  | Started GET "/fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31  0900
08:05:31 web.1  |   
08:05:31 web.1  | ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff2"):
08:05:31 web.1  |   
08:05:31 web.1  | Started GET "/fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31  0900
08:05:31 web.1  |   
08:05:31 web.1  | ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff"):

Here are steps I did:

1. Created a new app by rails new my-app-name --css bootstrap

2. Ran npm i bootstrap-icons (then I got "bootstrap-icons": "^1.7.2" in my package.json)

3. Edited app/assets/stylesheets/application.bootstrap.scss like this:

     @import 'bootstrap/scss/bootstrap';
     @import 'bootstrap-icons/font/bootstrap-icons';
     @import 'custom';
   

4. Wrote erb like this:

     <%= link_to new_project_path, class: "btn btn-primary" do %>
       <i  aria-hidden="true"></i>
       New Project
     <% end %>
   

5. Started my app by bin/dev

I read these pages but couldn't resolve the error;