flag-icon-css not showing with laravel-mix

I'm trying to use the flag-icon-css package in my HTML project using laravel-mix for compiling the assets.

the problem is when I access to my index.html the flag-icon-css not showing even if the compiling is success.

Here is my HTML project files structure :

my-app/
├─ node_modules/
├─ public/
│  ├─ favicon.ico
│  ├─ assets/
│  ├─ fonts/
│  ├─ images/
│  ├─ mix-manifest.json
├─ assets/
│  ├─ scss/
│  ├─ js/
├─ index.html
├─ package.json
├─ webpack.mix.js
├─ .gitignore
├─ README.md

assets/scss/app.scss

.... 

@import "~flag-icon-css/sass/flag-icon";

...

webpack.mix.js

const mix = require('laravel-mix');

mix.js('assets/js/app.js', 'assets/js')
   .sass('assets/scss/app.scss', 'assets/css')
   .setPublicPath('public');

index.html

...

<span class="flag-icon flag-icon-us"></span>

...

package.json

...

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "dependencies": {
        "flag-icon-css": "^3.5.0"
    },
    "devDependencies": {
        "@popperjs/core": "^2.9.1",
        "laravel-mix": "^6.0.13",
        "lodash": "^4.17.21",
        "postcss": "^8.2.8",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^10.1.1"
    }
}

...

Developer Tools Result :

Compiling Result :