trying ot add vue-awesome font-awesome icons.. not working yet

vue-mongotest/package.json

@@ -8,8 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vue-awesome": "^4.3.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

vue-mongotest/src/App.vue

@@ -1,12 +1,14 @@
 <template>
-  <container class="app">
+  <div class="app">
     <h1>{{ title }}</h1>
     <Button text="Test Mongo" />
-  </container>
+    <MongoStatus />
+  </div>
 </template>
 
 <script>
 import Button from './components/Button'
+import MongoStatus from './components/MongoStatus'
 export default {
   name: 'App',
   
@@ -17,7 +19,8 @@ export default {
     }
   },
   components: {
-    Button
+    Button, 
+    MongoStatus
   }, 
   data () {
     return { 

vue-mongotest/src/components/MongoStatus.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="mongo-status">
+      <p>MongoDB Connection: <v-icon icon="times-circle" /></p>
+  </div>
+</template>
+
+<script>
+
+import Icon from 'vue-awesome/components/Icon'
+
+export default {
+  components: {
+    'v-icon': Icon
+  }
+}
+</script>
+
+<style scoped>
+  div.mongo-status{
+      border: 1px solid #aaa;
+      background-color: #ccc;
+  }
+</style>