diff --git a/package.json b/package.json
index c7374bca..90c2557e 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,15 @@
"url": "https://github.com/koel/koel"
},
"dependencies": {
+ "@fortawesome/fontawesome-svg-core": "^6.1.1",
+ "@fortawesome/free-brands-svg-icons": "^6.1.1",
+ "@fortawesome/free-regular-svg-icons": "^6.1.1",
+ "@fortawesome/free-solid-svg-icons": "^6.1.1",
+ "@fortawesome/vue-fontawesome": "^3.0.1",
"alertify.js": "^1.0.12",
"axios": "^0.21.1",
"blueimp-md5": "^2.3.0",
"compare-versions": "^3.5.1",
- "font-awesome": "^4.7.0",
"ismobilejs": "^0.4.0",
"local-storage": "^2.0.0",
"lodash": "^4.17.19",
@@ -64,7 +68,6 @@
"eslint-plugin-vue": "^8.7.1",
"factoria": "^4.0.0",
"file-loader": "^1.1.6",
- "font-awesome": "^4.7.0",
"husky": "^4.2.5",
"jest-serializer-vue": "^2.0.2",
"jsdom": "^19.0.0",
diff --git a/resources/assets/js/app.ts b/resources/assets/js/app.ts
index df9c09d8..758f790f 100644
--- a/resources/assets/js/app.ts
+++ b/resources/assets/js/app.ts
@@ -2,8 +2,10 @@ import './staticLoader'
import { createApp } from 'vue'
import App from './App.vue'
import { clickaway, droppable, focus } from '@/directives'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
createApp(App)
+ .component('icon', FontAwesomeIcon)
.directive('koel-focus', focus)
.directive('koel-clickaway', clickaway)
.directive('koel-droppable', droppable)
diff --git a/resources/assets/js/components/album/AlbumCard.vue b/resources/assets/js/components/album/AlbumCard.vue
index 7fc6176b..73d556a1 100644
--- a/resources/assets/js/components/album/AlbumCard.vue
+++ b/resources/assets/js/components/album/AlbumCard.vue
@@ -36,7 +36,7 @@
role="button"
@click.prevent="shuffle"
>
-
+