Fontawesome doesnt work for all icons for Vue

Greeting everyone, I want to use font awesome on my vue 3 projects i followed the doc of font awesome but some icons work and some doenst

my main.js

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import '@/assets/base.css';
import '@/assets/index.css';
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { dom } from "@fortawesome/fontawesome-svg-core";
import vSelect from 'vue-select';
import VueApexCharts from "vue3-apexcharts";
import 'flowbite';


library.add(far,fab,fas);

dom.watch();

const app = createApp(App);


app.component('font-awesome-icon', FontAwesomeIcon);
app.component('v-select', vSelect);

app.use(createPinia());
app.use(VueApexCharts);
app.use(router);

app.mount("#app");

in my components

<font-awesome-icon icon="fa-chart-line" class="icon pr-2 "/>