chore: 3.0.0-beta.0 release: update dependencies

2019-11-19 17:40:48 +01:00
parent c4a941d714
commit f020186152
101 changed files with 19230 additions and 26476 deletions
@@ -1,6 +1,6 @@
 {
  "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "3.0.0-alpha.6",
+  "version": "3.0.0-beta.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -14,25 +14,122 @@
      }
    },
    "@babel/core": {
-      "version": "7.6.4",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.6.4.tgz",
-      "integrity": "sha512-Rm0HGw101GY8FTzpWSyRbki/jzq+/PkNQJ+nSulrdY6gFGOsNseCqD6KHRYe2E+EdzuBdr2pxCp6s4Uk6eJ+XQ==",
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.7.2.tgz",
+      "integrity": "sha512-eeD7VEZKfhK1KUXGiyPFettgF3m513f8FoBSWiQ1xTvl1RAopLs42Wp9+Ze911I6H0N9lNqJMDgoZT7gHsipeQ==",
      "dev": true,
      "requires": {
        "@babel/code-frame": "^7.5.5",
-        "@babel/generator": "^7.6.4",
-        "@babel/helpers": "^7.6.2",
-        "@babel/parser": "^7.6.4",
-        "@babel/template": "^7.6.0",
-        "@babel/traverse": "^7.6.3",
-        "@babel/types": "^7.6.3",
-        "convert-source-map": "^1.1.0",
+        "@babel/generator": "^7.7.2",
+        "@babel/helpers": "^7.7.0",
+        "@babel/parser": "^7.7.2",
+        "@babel/template": "^7.7.0",
+        "@babel/traverse": "^7.7.2",
+        "@babel/types": "^7.7.2",
+        "convert-source-map": "^1.7.0",
        "debug": "^4.1.0",
        "json5": "^2.1.0",
        "lodash": "^4.17.13",
        "resolve": "^1.3.2",
        "semver": "^5.4.1",
        "source-map": "^0.5.0"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.7.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.7.2.tgz",
+          "integrity": "sha512-WthSArvAjYLz4TcbKOi88me+KmDJdKSlfwwN8CnUYn9jBkzhq0ZEPuBfkAWIvjJ3AdEV1Cf/+eSQTnp3IDJKlQ==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.7.2",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.7.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.7.0.tgz",
+          "integrity": "sha512-tDsJgMUAP00Ugv8O2aGEua5I2apkaQO7lBGUq1ocwN3G23JE5Dcq0uh3GvFTChPa4b40AWiAsLvCZOA2rdnQ7Q==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.7.0",
+            "@babel/template": "^7.7.0",
+            "@babel/types": "^7.7.0"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.7.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.0.tgz",
+          "integrity": "sha512-tLdojOTz4vWcEnHWHCuPN5P85JLZWbm5Fx5ZsMEMPhF3Uoe3O7awrbM2nQ04bDOUToH/2tH/ezKEOR8zEYzqyw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.7.0"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.7.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.0.tgz",
+          "integrity": "sha512-HgYSI8rH08neWlAH3CcdkFg9qX9YsZysZI5GD8LjhQib/mM0jGOZOVkoUiiV2Hu978fRtjtsGsW6w0pKHUWtqA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.7.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.7.3",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.7.3.tgz",
+          "integrity": "sha512-bqv+iCo9i+uLVbI0ILzKkvMorqxouI+GbV13ivcARXn9NNEabi2IEz912IgNpT/60BNXac5dgcfjb94NjsF33A==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.7.0",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.0.tgz",
+          "integrity": "sha512-OKcwSYOW1mhWbnTBgQY5lvg1Fxg+VyfQGjcBduZFljfc044J5iDlnDSfhQ867O17XHiSCxYHUxHg2b7ryitbUQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "@babel/parser": "^7.7.0",
+            "@babel/types": "^7.7.0"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.7.2",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.7.2.tgz",
+          "integrity": "sha512-TM01cXib2+rgIZrGJOLaHV/iZUAxf4A0dt5auY6KNZ+cm6aschuJGqKJM3ROTt3raPUdIDk9siAufIFEleRwtw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.5.5",
+            "@babel/generator": "^7.7.2",
+            "@babel/helper-function-name": "^7.7.0",
+            "@babel/helper-split-export-declaration": "^7.7.0",
+            "@babel/parser": "^7.7.2",
+            "@babel/types": "^7.7.2",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.7.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.2.tgz",
+          "integrity": "sha512-YTf6PXoh3+eZgRCBzzP25Bugd2ngmpQVrk7kXX0i5N9BO7TFBtIgZYs7WtxtOGs8e6A4ZI7ECkbBCEHeXocvOA==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "convert-source-map": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+          "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.1"
+          }
+        }
      }
    },
    "@babel/generator": {
@@ -254,14 +351,102 @@
      }
    },
    "@babel/helpers": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.6.2.tgz",
-      "integrity": "sha512-3/bAUL8zZxYs1cdX2ilEE0WobqbCmKWr/889lf2SS0PpDcpEIY8pb1CCyz0pEcX3pEb+MCbks1jIokz2xLtGTA==",
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.7.0.tgz",
+      "integrity": "sha512-VnNwL4YOhbejHb7x/b5F39Zdg5vIQpUUNzJwx0ww1EcVRt41bbGRZWhAURrfY32T5zTT3qwNOQFWpn+P0i0a2g==",
      "dev": true,
      "requires": {
-        "@babel/template": "^7.6.0",
-        "@babel/traverse": "^7.6.2",
-        "@babel/types": "^7.6.0"
+        "@babel/template": "^7.7.0",
+        "@babel/traverse": "^7.7.0",
+        "@babel/types": "^7.7.0"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.7.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.7.2.tgz",
+          "integrity": "sha512-WthSArvAjYLz4TcbKOi88me+KmDJdKSlfwwN8CnUYn9jBkzhq0ZEPuBfkAWIvjJ3AdEV1Cf/+eSQTnp3IDJKlQ==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.7.2",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.7.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.7.0.tgz",
+          "integrity": "sha512-tDsJgMUAP00Ugv8O2aGEua5I2apkaQO7lBGUq1ocwN3G23JE5Dcq0uh3GvFTChPa4b40AWiAsLvCZOA2rdnQ7Q==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.7.0",
+            "@babel/template": "^7.7.0",
+            "@babel/types": "^7.7.0"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.7.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.0.tgz",
+          "integrity": "sha512-tLdojOTz4vWcEnHWHCuPN5P85JLZWbm5Fx5ZsMEMPhF3Uoe3O7awrbM2nQ04bDOUToH/2tH/ezKEOR8zEYzqyw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.7.0"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.7.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.0.tgz",
+          "integrity": "sha512-HgYSI8rH08neWlAH3CcdkFg9qX9YsZysZI5GD8LjhQib/mM0jGOZOVkoUiiV2Hu978fRtjtsGsW6w0pKHUWtqA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.7.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.7.3",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.7.3.tgz",
+          "integrity": "sha512-bqv+iCo9i+uLVbI0ILzKkvMorqxouI+GbV13ivcARXn9NNEabi2IEz912IgNpT/60BNXac5dgcfjb94NjsF33A==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.7.0",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.0.tgz",
+          "integrity": "sha512-OKcwSYOW1mhWbnTBgQY5lvg1Fxg+VyfQGjcBduZFljfc044J5iDlnDSfhQ867O17XHiSCxYHUxHg2b7ryitbUQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "@babel/parser": "^7.7.0",
+            "@babel/types": "^7.7.0"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.7.2",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.7.2.tgz",
+          "integrity": "sha512-TM01cXib2+rgIZrGJOLaHV/iZUAxf4A0dt5auY6KNZ+cm6aschuJGqKJM3ROTt3raPUdIDk9siAufIFEleRwtw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.5.5",
+            "@babel/generator": "^7.7.2",
+            "@babel/helper-function-name": "^7.7.0",
+            "@babel/helper-split-export-declaration": "^7.7.0",
+            "@babel/parser": "^7.7.2",
+            "@babel/types": "^7.7.2",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.7.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.2.tgz",
+          "integrity": "sha512-YTf6PXoh3+eZgRCBzzP25Bugd2ngmpQVrk7kXX0i5N9BO7TFBtIgZYs7WtxtOGs8e6A4ZI7ECkbBCEHeXocvOA==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
      }
    },
    "@babel/highlight": {
@@ -874,27 +1059,49 @@
      }
    },
    "@coreui/coreui": {
-      "version": "3.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-3.0.0-beta.0.tgz",
-      "integrity": "sha512-7qYuZyQ3H9soaXMtP+34YkqN7VveDJrPhb+FzfJ9OOk663vF47grvNjWSn1AqAv5JCU0mLHhH0+eu0chp+k6vA=="
+      "version": "3.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-3.0.0-beta.3.tgz",
+      "integrity": "sha512-oZ6XRJEYvUuGB3lCPrDkIVXGComXC95rvhrEHROSfG+EduJz8VYTfJqtTGmnUqnKUR5FfzCKPJKJksLEM0aDrg=="
    },
    "@coreui/coreui-chartjs": {
-      "version": "github:coreui/coreui-chartjs#4bf74100097d797de9d136b7d718d10f2ce46220",
-      "from": "github:coreui/coreui-chartjs#v2",
+      "version": "2.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@coreui/coreui-chartjs/-/coreui-chartjs-2.0.0-beta.0.tgz",
+      "integrity": "sha512-Svua1A5YQNPbxcTMN/1TLiie/HJvT+iJ8VB3zPcy/c+ihJvFlIf7D0I5JcRL6LvQkZydq2xQiZ9/73Q+Z5BV6Q==",
      "requires": {
+        "@coreui/coreui": "^3.0.0-beta.1",
        "chart.js": "^2.8.0"
      }
    },
+    "@coreui/coreui-vue-chartjs": {
+      "version": "1.0.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@coreui/coreui-vue-chartjs/-/coreui-vue-chartjs-1.0.0-alpha.2.tgz",
+      "integrity": "sha512-BMMb8biyQlyDO8LcunmMdjKI5fIDmpL0GTdtX2mT7beG6lGmfE1gVqWzOTDQpg7UY7rUr19ZQq53awxKssyUhA==",
+      "requires": {
+        "@coreui/coreui-chartjs": "2.0.0-beta.0",
+        "chart.js": "^2.9.2",
+        "vue": "^2.6.10"
+      }
+    },
    "@coreui/icons": {
-      "version": "github:coreui/coreui-icons#d79c60ee18b4cf4fba0047a59be103705e674ed7",
-      "from": "github:coreui/coreui-icons#v1-alpha"
+      "version": "1.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@coreui/icons/-/icons-1.0.0-beta.3.tgz",
+      "integrity": "sha512-jaNQSIYPcrC2RxgUqdVGGh4aGz6GaJNODa3cqBw7HTP3AdHm8NyejrgmO/ILmY3J8JldVqdTMfUwegaTc0kQmA=="
+    },
+    "@coreui/icons-vue": {
+      "version": "github:coreui/coreui-icons-vue#01dd086fa9cd9f6a3ee3fa19c6a6b1920b544746",
+      "from": "github:coreui/coreui-icons-vue#1.0.0-alpha.1",
+      "requires": {
+        "vue": "^2.6.10"
+      }
    },
    "@coreui/vue": {
-      "version": "github:coreui/coreui-vue#bfa7a79909653af30c00ba34da1e4d3f744b4d35",
-      "from": "github:coreui/coreui-vue#3.0.0-alpha.6",
+      "version": "3.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@coreui/vue/-/vue-3.0.0-beta.0.tgz",
+      "integrity": "sha512-G0L7IxTS/hYqNzCTUjyaVjkyEoku5/efbYF8sj/0R4MJyOJzxVY5vTovzIKD9+25RtCj+g3FAKxQGF0lZURn5w==",
      "requires": {
-        "@coreui/coreui": "3.0.0-beta.0",
-        "@coreui/icons": "github:coreui/coreui-icons#v1-alpha",
+        "@coreui/coreui": "3.0.0-beta.3",
+        "@coreui/icons": "github:coreui/coreui-icons#1.0.0-beta.1",
+        "@coreui/icons-vue": "github:coreui/coreui-icons-vue#1.0.0-alpha.1",
        "clone": "^2.1.2",
        "perfect-scrollbar": "^1.4.0",
        "popper.js": "^1.16.0",
@@ -904,6 +1111,10 @@
        "vue-functional-data-merge": "^3.1.0"
      },
      "dependencies": {
+        "@coreui/icons": {
+          "version": "github:coreui/coreui-icons#0f38dfed6b56e10791285792f0b9df06372a6661",
+          "from": "github:coreui/coreui-icons#1.0.0-beta.1"
+        },
        "clone": {
          "version": "2.1.2",
          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@@ -3636,28 +3847,21 @@
      "dev": true
    },
    "chart.js": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.8.0.tgz",
-      "integrity": "sha512-Di3wUL4BFvqI5FB5K26aQ+hvWh8wnP9A3DWGvXHVkO13D3DSnaSsdZx29cXlEsYKVkn1E2az+ZYFS4t0zi8x0w==",
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz",
+      "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==",
      "requires": {
        "chartjs-color": "^2.1.0",
        "moment": "^2.10.2"
      }
    },
    "chartjs-color": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz",
-      "integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
      "requires": {
        "chartjs-color-string": "^0.6.0",
-        "color-convert": "^0.5.3"
-      },
-      "dependencies": {
-        "color-convert": {
-          "version": "0.5.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
-          "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
-        }
+        "color-convert": "^1.9.3"
      }
    },
    "chartjs-color-string": {
@@ -3710,9 +3914,9 @@
      }
    },
    "chromedriver": {
-      "version": "77.0.0",
-      "resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-77.0.0.tgz",
-      "integrity": "sha512-mZa1IVx4HD8rDaItWbnS470mmypgiWsDiu98r0NkiT4uLm3qrANl4vOU6no6vtWtLQiW5kt1POcIbjeNpsLbXA==",
+      "version": "78.0.1",
+      "resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-78.0.1.tgz",
+      "integrity": "sha512-eOsyFk4xb9EECs1VMrDbxO713qN+Bu1XUE8K9AuePc3839TPdAegg72kpXSzkeNqRNZiHbnJUItIVCLFkDqceA==",
      "dev": true,
      "requires": {
        "del": "^4.1.1",
@@ -3903,7 +4107,6 @@
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
      "requires": {
        "color-name": "1.1.3"
      }
@@ -4240,9 +4443,9 @@
      }
    },
    "core-js": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.3.4.tgz",
-      "integrity": "sha512-BtibooaAmSOptGLRccsuX/dqgPtXwNgqcvYA6kOTTMzonRxZ+pJS4e+6mvVutESfXMeTnK8m3M+aBu3bkJbR+w==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.4.1.tgz",
+      "integrity": "sha512-KX/dnuY/J8FtEwbnrzmAjUYgLqtk+cxM86hfG60LGiW3MmltIc2yAmDgBgEkfm0blZhUrdr1Zd84J2Y14mLxzg==",
      "dev": true
    },
    "core-js-compat": {
@@ -5424,9 +5627,9 @@
      }
    },
    "eslint": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.5.1.tgz",
-      "integrity": "sha512-32h99BoLYStT1iq1v2P9uwpyznQ4M2jRiFB6acitKz52Gqn+vPaMDUTB1bYi1WN4Nquj2w+t+bimYUG83DC55A==",
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.6.0.tgz",
+      "integrity": "sha512-PpEBq7b6qY/qrOmpYQ/jTMDYfuQMELR4g4WI1M/NaSDDD/bdcMb+dj4Hgks7p41kW2caXsPsEZAEAyAgjVVC0g==",
      "dev": true,
      "requires": {
        "@babel/code-frame": "^7.0.0",
@@ -5436,9 +5639,9 @@
        "debug": "^4.0.1",
        "doctrine": "^3.0.0",
        "eslint-scope": "^5.0.0",
-        "eslint-utils": "^1.4.2",
+        "eslint-utils": "^1.4.3",
        "eslint-visitor-keys": "^1.1.0",
-        "espree": "^6.1.1",
+        "espree": "^6.1.2",
        "esquery": "^1.0.1",
        "esutils": "^2.0.2",
        "file-entry-cache": "^5.0.1",
@@ -5448,7 +5651,7 @@
        "ignore": "^4.0.6",
        "import-fresh": "^3.0.0",
        "imurmurhash": "^0.1.4",
-        "inquirer": "^6.4.1",
+        "inquirer": "^7.0.0",
        "is-glob": "^4.0.0",
        "js-yaml": "^3.13.1",
        "json-stable-stringify-without-jsonify": "^1.0.1",
@@ -5488,9 +5691,9 @@
          }
        },
        "import-fresh": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.1.0.tgz",
-          "integrity": "sha512-PpuksHKGt8rXfWEr9m9EHIpgyyaltBy8+eF6GJM0QCAxMgxCfucMF3mjecK2QsJr0amJW7gTqh5/wht0z2UhEQ==",
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+          "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
          "dev": true,
          "requires": {
            "parent-module": "^1.0.0",
@@ -5531,12 +5734,12 @@
      }
    },
    "eslint-plugin-vue": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-5.2.3.tgz",
-      "integrity": "sha512-mGwMqbbJf0+VvpGR5Lllq0PMxvTdrZ/ZPjmhkacrCHbubJeJOt+T6E3HUzAifa2Mxi7RSdJfC9HFpOeSYVMMIw==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.0.1.tgz",
+      "integrity": "sha512-5tgFPcxGDKjfVB/6Yi56bKiWxygUibfZmzSh26Np3kuwAk/lfaGbVld+Yt+MPgD84ppvcachtiL4/winsXLjXA==",
      "dev": true,
      "requires": {
-        "vue-eslint-parser": "^5.0.0"
+        "vue-eslint-parser": "^6.0.5"
      }
    },
    "eslint-scope": {
@@ -6027,9 +6230,9 @@
      "dev": true
    },
    "figures": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
-      "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.1.0.tgz",
+      "integrity": "sha512-ravh8VRXqHuMvZt/d8GblBeqDMkdJMBdv/2KntFH+ra5MXkO7nxNKpzQ3n6QD/2da1kH0aWmNISdvhM7gl2gVg==",
      "dev": true,
      "requires": {
        "escape-string-regexp": "^1.0.5"
@@ -7770,52 +7973,114 @@
      "dev": true
    },
    "inquirer": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.2.tgz",
-      "integrity": "sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.0.tgz",
+      "integrity": "sha512-rSdC7zelHdRQFkWnhsMu2+2SO41mpv2oF2zy4tMhmiLWkcKbOAs87fWAJhVXttKVwhdZvymvnuM95EyEXg2/tQ==",
      "dev": true,
      "requires": {
-        "ansi-escapes": "^3.2.0",
+        "ansi-escapes": "^4.2.1",
        "chalk": "^2.4.2",
-        "cli-cursor": "^2.1.0",
+        "cli-cursor": "^3.1.0",
        "cli-width": "^2.0.0",
        "external-editor": "^3.0.3",
-        "figures": "^2.0.0",
-        "lodash": "^4.17.12",
-        "mute-stream": "0.0.7",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.15",
+        "mute-stream": "0.0.8",
        "run-async": "^2.2.0",
        "rxjs": "^6.4.0",
-        "string-width": "^2.1.0",
+        "string-width": "^4.1.0",
        "strip-ansi": "^5.1.0",
        "through": "^2.3.6"
      },
      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        },
-        "string-width": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+        "ansi-escapes": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.0.tgz",
+          "integrity": "sha512-EiYhwo0v255HUL6eDyuLrXEkTi7WwVCLAw+SeOQ7M7qdun1z1pum4DEm/nuqIVbPvi9RPPc9k9LbyBv6H0DwVg==",
          "dev": true,
          "requires": {
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^4.0.0"
+            "type-fest": "^0.8.1"
+          }
+        },
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "cli-cursor": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+          "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+          "dev": true,
+          "requires": {
+            "restore-cursor": "^3.1.0"
+          }
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "mimic-fn": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+          "dev": true
+        },
+        "onetime": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
+          "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "^2.1.0"
+          }
+        },
+        "restore-cursor": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+          "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+          "dev": true,
+          "requires": {
+            "onetime": "^5.1.0",
+            "signal-exit": "^3.0.2"
+          }
+        },
+        "string-width": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
          },
          "dependencies": {
            "strip-ansi": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+              "version": "6.0.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+              "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
              "dev": true,
              "requires": {
-                "ansi-regex": "^3.0.0"
+                "ansi-regex": "^5.0.0"
              }
            }
          }
+        },
+        "type-fest": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+          "dev": true
        }
      }
    },
@@ -10113,9 +10378,9 @@
      "dev": true
    },
    "mute-stream": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
-      "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
      "dev": true
    },
    "mz": {
@@ -14606,26 +14871,26 @@
      }
    },
    "vue-eslint-parser": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
-      "integrity": "sha512-JlHVZwBBTNVvzmifwjpZYn0oPWH2SgWv5dojlZBsrhablDu95VFD+hriB1rQGwbD+bms6g+rAFhQHk6+NyiS6g==",
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-6.0.5.tgz",
+      "integrity": "sha512-Bvjlx7rH1Ulvus56KHeLXOjEi3JMOYTa1GAqZr9lBQhd8weK8mV7U7V2l85yokBZEWHJQjLn6X3nosY8TzkOKg==",
      "dev": true,
      "requires": {
-        "debug": "^4.1.0",
+        "debug": "^4.1.1",
        "eslint-scope": "^4.0.0",
        "eslint-visitor-keys": "^1.0.0",
-        "espree": "^4.1.0",
+        "espree": "^5.0.0",
        "esquery": "^1.0.1",
        "lodash": "^4.17.11"
      },
      "dependencies": {
        "espree": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/espree/-/espree-4.1.0.tgz",
-          "integrity": "sha512-I5BycZW6FCVIub93TeVY1s7vjhP9CY6cXCznIRfiig7nRviKZYdRnj/sHEWC6A7WE9RDWOFq9+7OsWSYz8qv2w==",
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-5.0.1.tgz",
+          "integrity": "sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==",
          "dev": true,
          "requires": {
-            "acorn": "^6.0.2",
+            "acorn": "^6.0.7",
            "acorn-jsx": "^5.0.0",
            "eslint-visitor-keys": "^1.0.0"
          }
@@ -1,6 +1,6 @@
 {
  "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "3.0.0-alpha.6",
+  "version": "3.0.0-beta.0",
  "description": "Open Source Bootstrap Admin Template",
  "author": "Łukasz Holeczek",
  "homepage": "http://coreui.io",
@@ -14,10 +14,10 @@
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
-    "@coreui/coreui": "3.0.0-beta.0",
-    "@coreui/coreui-chartjs": "coreui/coreui-chartjs#v2",
-    "@coreui/icons": "coreui/coreui-icons#v1-alpha",
-    "@coreui/vue": "coreui/coreui-vue#3.0.0-alpha.6",
+    "@coreui/coreui": "3.0.0-beta.3",
+    "@coreui/coreui-vue-chartjs": "1.0.0-alpha.2",
+    "@coreui/icons": "1.0.0-beta.3",
+    "@coreui/vue": "3.0.0-beta.0",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3"
  },
@@ -28,13 +28,13 @@
    "@vue/cli-plugin-unit-jest": "^4.0.5",
    "@vue/cli-service": "^4.0.5",
    "@vue/test-utils": "^1.0.0-beta.29",
-    "@babel/core": "7.6.4",
+    "@babel/core": "7.7.2",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
-    "core-js": "^3.3.4",
-    "chromedriver": "^77.0.0",
-    "eslint": "^6.5.1",
-    "eslint-plugin-vue": "^5.2.3",
+    "core-js": "^3.4.1",
+    "chromedriver": "^78.0.1",
+    "eslint": "^6.6.0",
+    "eslint-plugin-vue": "^6.0.1",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
@@ -9,8 +9,6 @@ export default {
 </script>

 <style lang="scss">
-  // CoreUI Icons Set
-  @import '~@coreui/icons/css/coreui-icons.min.css';
  // Import Main styles for this application
  @import 'assets/scss/style';
 </style>
@@ -1,48 +1,161 @@
 import {
-  facebook,
-  twitter,
-  linkedin,
-  flickr,
-  tumblr,
-  xing,
-  github,
-  stackOverflow,
-  youtube,
-  dribbble,
-  instagram,
-  pinterest,
-  vk,
-  yahoo,
-  behance,
-  reddit,
-  vimeo,
-  ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex
-} from '@coreui/icons/brands'
-import { US, BR, IN, FR, ES, PL } from '@coreui/icons/flags'
-import { iconSet } from '@coreui/icons'
+  cibFacebook,
+  cibTwitter,
+  cibLinkedin,
+  cibFlickr,
+  cibTumblr,
+  cibXing,
+  cibGithub,
+  cibStackOverflow,
+  cibYoutube,
+  cibDribbble,
+  cibInstagram,
+  cibPinterest,
+  cibVk,
+  cibYahoo,
+  cibBehance,
+  cibReddit,
+  cibVimeo,
+  cibCcMastercard,
+  cibCcVisa,
+  cibStripe,
+  cibPaypal,
+  cibGooglePay, 
+  cibCcAmex
+} from '@coreui/icons'
+import {
+  cifUs,
+  cifBr,
+  cifIn,
+  cifFr,
+  cifEs,
+  cifPl
+} from '@coreui/icons'
+import {
+  cilArrowRight,
+  cilBan,
+  cilBasket,
+  cilBell,
+  cilCalculator,
+  cilCalendar,
+  cilCloudDownload,
+  cilChartPie,
+  cilCheck,
+  cilChevronBottom,
+  cilChevronTop,
+  // cilCircleCheck,
+  cilCommentSquare,
+  cilCursor,
+  cilDrop,
+  cilDollar,
+  cilEnvelopeClosed,
+  cilEnvelopeOpen,
+  cilEuro,
+  cilGlobeAlt,
+  cilFile,
+  cilJustifyCenter,
+  cilLaptop,
+  cilLayers,
+  cilLightbulb,
+  cilList,
+  cilLocationPin,
+  cilLockLocked,
+  cilMagnifyingGlass,
+  cilMoon,
+  cilPencil,
+  cilPeople,
+  cilPuzzle,
+  cilSettings,
+  cilShieldAlt,
+  cilSpeech,
+  cilSpeedometer,
+  cilStar,
+  cilTask,
+  cilUser,
+  cilUserFemale,
+  cilUserFollow,
+  cilXCircle
+
+} from '@coreui/icons'

 export const iconsSet = Object.assign(
  {},
-  iconSet,
-  { US, BR, IN, FR, ES, PL },
  {
-    facebook,
-    twitter,
-    linkedin,
-    flickr,
-    tumblr,
-    xing,
-    github,
-    stackOverflow,
-    youtube,
-    dribbble,
-    instagram,
-    pinterest,
-    vk,
-    yahoo,
-    behance,
-    reddit,
-    vimeo,
-    ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex
+    cilArrowRight,
+    cilBan,
+    cilBasket,
+    cilBell,
+    cilCalculator,
+    cilCalendar,
+    cilCloudDownload,
+    cilChartPie,
+    cilCheck,
+    cilChevronBottom,
+    cilChevronTop,
+    // cilCircleCheck,
+    cilCommentSquare,
+    cilCursor,
+    cilDrop,
+    cilDollar,
+    cilEnvelopeClosed,
+    cilEnvelopeOpen,
+    cilEuro,
+    cilGlobeAlt,
+    cilFile,
+    cilJustifyCenter,
+    cilLaptop,
+    cilLayers,
+    cilLightbulb,
+    cilList,
+    cilLocationPin,
+    cilLockLocked,
+    cilMagnifyingGlass,
+    cilMoon,
+    cilPencil,
+    cilPeople,
+    cilPuzzle,
+    cilSettings,
+    cilShieldAlt,
+    cilSpeech,
+    cilSpeedometer,
+    cilStar,
+    cilTask,
+    cilUser,
+    cilUserFemale,
+    cilUserFollow,
+    cilXCircle
+  },
+  {
+    cifUs,
+    cifBr,
+    cifIn,
+    cifFr,
+    cifEs,
+    cifPl
+  },
+  {
+    cibFacebook,
+    cibTwitter,
+    cibLinkedin,
+    cibFlickr,
+    cibTumblr,
+    cibXing,
+    cibGithub,
+    cibStackOverflow,
+    cibYoutube,
+    cibDribbble,
+    cibInstagram,
+    cibPinterest,
+    cibVk,
+    cibYahoo,
+    cibBehance,
+    cibReddit,
+    cibVimeo,
+    cibCcMastercard, 
+    cibCcVisa, 
+    cibStripe, 
+    cibPaypal, 
+    cibGooglePay,
+    cibCcAmex
  }
 )
@@ -4,8 +4,5 @@
 // Import styles
@import "~@coreui/coreui/scss/coreui";

-// Import custom tooltips styles
-@import "~@coreui/coreui-chartjs/custom-tooltips/dist/css/coreui-chartjs.css";
-
 // If you want to add something do it here
@import "custom";
@@ -19,19 +19,37 @@
      :wrappedInLink="{ href: 'https://coreui.io', target: '_blank'}"
    />
    <CHeaderNav class="d-md-down-none mr-auto">
-      <CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
-      <CHeaderNavItem class="px-3" to="/users" exact>Users</CHeaderNavItem>
-      <CHeaderNavItem class="px-3">Settings</CHeaderNavItem>
+      <CHeaderNavItem class="px-3" to="/dashboard">
+        <CHeaderNavLink>
+          Dashboard
+        </CHeaderNavLink>
+      </CHeaderNavItem>
+      <CHeaderNavItem class="px-3" to="/users" exact>
+        <CHeaderNavLink>
+          Users
+        </CHeaderNavLink>
+      </CHeaderNavItem>
+      <CHeaderNavItem class="px-3">
+        <CHeaderNavLink>
+          Settings
+        </CHeaderNavLink>
+      </CHeaderNavItem>
    </CHeaderNav>
    <CHeaderNav class="mr-4">
      <CHeaderNavItem class="d-md-down-none mx-2">
-        <i class="cui-bell"></i>
+        <CHeaderNavLink>
+          <CIcon name="cil-bell"/>
+        </CHeaderNavLink>
      </CHeaderNavItem>
      <CHeaderNavItem class="d-md-down-none mx-2">
-        <i class="cui-list"></i>
+        <CHeaderNavLink>
+          <CIcon name="cil-list"/>
+        </CHeaderNavLink>
      </CHeaderNavItem>
      <CHeaderNavItem class="d-md-down-none mx-2">
-        <i class="cui-envelope-open"></i>
+        <CHeaderNavLink>
+          <CIcon name="cil-envelope-open"/>
+        </CHeaderNavLink>
      </CHeaderNavItem>
      <TheHeaderDropdownAccnt/>
    </CHeaderNav>
@@ -1,38 +1,37 @@
 <template>
  <CDropdown
-    nav
-    no-caret
+    inNav
    class="c-header-nav-items"
    placement="bottom-end"
    add-menu-classes="pt-0"
  >
    <template #toggler>
-      <CHeaderNavItem only-link>
+      <CHeaderNavLink>
        <div class="c-avatar">
          <img
            src="img/avatars/6.jpg"
            class="c-avatar-img "
          />
        </div>
-      </CHeaderNavItem>
+      </CHeaderNavLink>
    </template>
    <CDropdownHeader tag="div" class="text-center" color="light">
      <strong>Account</strong>
    </CDropdownHeader>
    <CDropdownItem>
-      <i class="cui-bell mr-2"/> Updates
+      <CIcon name="cil-bell"/> Updates
      <CBadge color="info" class="ml-auto">{{ itemsCount }}</CBadge>
    </CDropdownItem>
    <CDropdownItem>
-      <i class="cui-envelope-open mr-2" /> Messages
+      <CIcon name="cil-envelope-open" /> Messages
      <CBadge color="success" class="ml-auto">{{ itemsCount }}</CBadge>
    </CDropdownItem>
    <CDropdownItem>
-      <i class="cui-task mr-2" /> Tasks
+      <CIcon name="cil-task" /> Tasks
      <CBadge color="danger" class="ml-auto">{{ itemsCount }}</CBadge>
    </CDropdownItem>
    <CDropdownItem>
-      <i class="cui-comment-square mr-2" /> Comments
+      <CIcon name="cil-comment-square" /> Comments
      <CBadge color="warning" class="ml-auto">{{ itemsCount }}</CBadge>
    </CDropdownItem>
    <CDropdownHeader
@@ -43,25 +42,25 @@
      <strong>Settings</strong>
    </CDropdownHeader>
    <CDropdownItem>
-      <i class="cui-user mr-2" /> Profile
+      <CIcon name="cil-user" /> Profile
    </CDropdownItem>
    <CDropdownItem>
-      <i class="cui-wrench mr-2" /> Settings
+      <CIcon name="cil-settings" /> Settings
    </CDropdownItem>
    <CDropdownItem>
-      <i class="cui-dollar mr-2" /> Payments
+      <CIcon name="cil-dollar" /> Payments
      <CBadge color="secondary" class="ml-auto">{{ itemsCount }}</CBadge>
    </CDropdownItem>
    <CDropdownItem>
-      <i class="cui-file mr-2" /> Projects
+      <CIcon name="cil-file" /> Projects
      <CBadge color="primary" class="ml-auto">{{ itemsCount }}</CBadge>
    </CDropdownItem>
    <CDropdownDivider/>
    <CDropdownItem>
-      <i class="cui-shield mr-2" /> Lock Account
+      <CIcon name="cil-shield-alt" /> Lock Account
    </CDropdownItem>
    <CDropdownItem>
-      <i class="cui-lock-locked mr-2" /> Logout
+      <CIcon name="cil-lock-locked" /> Logout
    </CDropdownItem>
  </CDropdown>
 </template>
@@ -76,3 +75,9 @@ export default {
  }
 }
 </script>
+
+<style scoped>
+  .c-icon {
+    margin-right: 0.3rem;
+  }
+</style>
@@ -9,10 +9,7 @@
      :imgMinimized="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-signet-white.svg'}"
      :wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}"
    />
-    <!-- <CSidebarHeader/> -->
-    <!-- <CSidebarForm/> -->
-    <CRenderFunction :contentToRender="nav"/>
-    <!-- <CSidebarFooter/> -->
+    <CRenderFunction flat :content-to-render="nav"/>
    <CSidebarMinimizer
      class="d-md-down-none"
      @click.native="minimize = !minimize"
@@ -22,6 +19,7 @@

 <script>
 import nav from './_nav'
+
 export default {
  name: 'TheSidebar',
  data () {
@@ -1,471 +1,271 @@
 export default [
-  'CSidebarNav',
-  [
-    [
-      'CSidebarNavLink',
  {
-        props: {
+    _name: 'CSidebarNav',
+    _children: [
+      {
+        _name: 'CSidebarNavItem',
        name: 'Dashboard',
        to: '/dashboard',
-          icon: 'cui-speedometer',
+        icon: 'cil-speedometer',
        badge: {
          color: 'primary',
          text: 'NEW'
        }
-        }
-      }
-    ],
-    [
-      'CSidebarNavTitle',
-      ['Theme']
-    ],
-    [
-      'CSidebarNavLink',
+      },
      {
-        props: {
+        _name: 'CSidebarNavTitle',
+        _children: ['Theme']
+      },
+      {
+        _name: 'CSidebarNavItem',
        name: 'Colors',
        to: '/theme/colors',
-          icon: 'cui-drop'
-        }
-      }
-    ],
-    [
-      'CSidebarNavLink',
+        icon: 'cil-drop'
+      },
      {
-        props: {
+        _name: 'CSidebarNavItem',
        name: 'Typography',
        to: '/theme/typography',
-          icon: 'cui-pencil'
-        }
-      }
-    ],
-    [
-      'CSidebarNavTitle',
-      ['Components']
-    ],
-    [
-      'CSidebarNavDropdown',
+        icon: 'cil-pencil'
+      },
      {
-        props: {
+        _name: 'CSidebarNavTitle',
+        _children: ['Components']
+      },
+      {
+        _name: 'CSidebarNavDropdown',
        name: 'Base',
        route: '/base',
-          icon: 'cui-puzzle',
-        }
-      },
-      [
-        [
-          'CSidebarNavLink',
+        icon: 'cil-puzzle',
+        items: [
          {
-            props: {
            name: 'Breadcrumbs',
            to: '/base/breadcrumbs',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'Cards',
            to: '/base/cards',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'Carousels',
            to: '/base/carousels',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          }, 
          {
-            props: {
            name: 'Collapses',
            to: '/base/collapses',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'Forms',
            to: '/base/forms',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'Jumbotrons',
            to: '/base/jumbotrons',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'List Groups',
            to: '/base/list-groups',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'Navs',
            to: '/base/navs',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'Navbars',
            to: '/base/navbars',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'Paginations',
            to: '/base/paginations',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'Popovers',
            to: '/base/popovers',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'Progress Bars',
            to: '/base/progress-bars',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'Switches',
            to: '/base/switches',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'Tables',
            to: '/base/tables',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'Tabs',
            to: '/base/tabs',
-              icon: 'cui-puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-puzzle'
+          },
          {
-            props: {
            name: 'Tooltips',
            to: '/base/tooltips',
-              icon: 'cui-puzzle'
-            }
+            icon: 'cil-puzzle'
          }
        ]
-      ]
-    ],
-    [
-      'CSidebarNavDropdown',
+      },
      {
-        props: {
+        _name: 'CSidebarNavDropdown',
        name: 'Buttons',
        route: '/buttons',
-          icon: 'cui-cursor',
-        }
-      },
-      [
-        [
-          'CSidebarNavLink',
+        icon: 'cil-cursor',
+        items: [
          {
-            props: {
            name: 'Buttons',
            to: '/buttons/standard-buttons',
-              icon: 'cui-cursor'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-cursor'
+          },
          {
-            props: {
            name: 'Button Dropdowns',
            to: '/buttons/dropdowns',
-              icon: 'cui-cursor'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-cursor'
+          },
          {
-            props: {
            name: 'Button Groups',
            to: '/buttons/button-groups',
-              icon: 'cui-cursor'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-cursor'
+          },
          {
-            props: {
            name: 'Brand Buttons',
            to: '/buttons/brand-buttons',
-              icon: 'cui-cursor'
-            }
+            icon: 'cil-cursor'
          }
        ]
-      ]
-    ],
-    [
-      'CSidebarNavLink',
+      },
      {
-        props: {
+        _name: 'CSidebarNavItem',
        name: 'Charts',
        to: '/charts',
-          icon: 'cui-pie-chart'
-        }
-      }
-    ],
-    [
-      'CSidebarNavDropdown',
+        icon: 'cil-chart-pie'
+      },
      {
-        props: {
+        _name: 'CSidebarNavDropdown',
        name: 'Icons',
        route: '/icons',
-          icon: 'cui-star',
-        }
-      },
-      [
-        [
-          'CSidebarNavLink',
+        icon: 'cil-star',
+        items: [
          {
-            props: {
            name: 'CoreUI Icons',
            to: '/icons/coreui-icons',
-              icon: 'cui-star',
+            icon: 'cil-star',
            badge: {
              color: 'info',
              text: 'NEW'
            }
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+          },
          {
-            props: {
            name: 'Brands',
            to: '/icons/brands',
-              icon: 'cui-star'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-star'
+          },
          {
-            props: {
            name: 'Flags',
            to: '/icons/flags',
-              icon: 'cui-star'
-            }
+            icon: 'cil-star'
          }
        ]
-      ]
-    ],
-    [
-      'CSidebarNavDropdown',
+      },
      {
-        props: {
+        _name: 'CSidebarNavDropdown',
        name: 'Notifications',
        route: '/notifications',
-          icon: 'cui-bell',
-        }
-      },
-      [
-        [
-          'CSidebarNavLink',
+        icon: 'cil-bell',
+        items: [
          {
-            props: {
            name: 'Alerts',
            to: '/notifications/alerts',
-              icon: 'cui-bell'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-bell'
+          },
          {
-            props: {
            name: 'Badges',
            to: '/notifications/badges',
-              icon: 'cui-bell'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-bell'
+          },
          {
-            props: {
            name: 'Modals',
            to: '/notifications/modals',
-              icon: 'cui-bell'
-            }
+            icon: 'cil-bell'
          }
        ]
-      ]
-    ],
-    [
-      'CSidebarNavLink',
+      },
      {
-        props: {
+        _name: 'CSidebarNavItem',
        name: 'Widgets',
        to: '/widgets',
-          icon: 'cui-calculator',
+        icon: 'cil-calculator',
        badge: {
          color: 'primary',
          text: 'NEW',
-            pill: true
+          shape: 'pill'
        }
-        }
-      }
-    ],
-    [
-      'CSidebarNavDivider',
-    ],
-    [
-      'CSidebarNavTitle',
-      ['Extras']
-    ],
-    [
-      'CSidebarNavDropdown',
+      },
      {
-        props: {
+        _name: 'CSidebarNavDivider'
+      },
+      {
+        _name: 'CSidebarNavTitle',
+        _children: ['Extras']
+      },
+      {
+        _name: 'CSidebarNavDropdown',
        name: 'Pages',
        route: '/pages',
-          icon: 'cui-star',
-        }
-      },
-      [
-        [
-          'CSidebarNavLink',
+        icon: 'cil-star',
+        items: [
          {
-            props: {
            name: 'Login',
            to: '/pages/login',
-              icon: 'cui-star'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-star'
+          },
          {
-            props: {
            name: 'Register',
            to: '/pages/register',
-              icon: 'cui-star'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-star'
+          },
          {
-            props: {
            name: 'Error 404',
            to: '/pages/404',
-              icon: 'cui-star'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            icon: 'cil-star'
+          },
          {
-            props: {
            name: 'Error 500',
            to: '/pages/500',
-              icon: 'cui-star'
-            }
+            icon: 'cil-star'
          }
        ]
-      ]
-    ],
-    [
-      'CSidebarNavLink',
+      },
      {
-        props: {
+        _name: 'CSidebarNavItem',
        name: 'Download CoreUI',
        href: 'http://coreui.io/vue/',
-          icon: 'cui-cloud-download',
-          addLinkClasses: 'c-nav-link-success',
+        icon: { name: 'cil-cloud-download', class: 'text-white' },
+        _class: 'bg-success text-white',
        target: '_blank'
      },
-        attrs: {
-          class: 'mt-auto',
-        }
-      }
-    ],
-    [
-      'CSidebarNavLink',
      {
-        props: {
+        _name: 'CSidebarNavItem',
        name: 'Try CoreUI PRO',
        href: 'http://coreui.io/pro/vue/',
-          icon: 'cui-layers',
-          addLinkClasses: 'c-nav-link-danger',
+        icon: { name: 'cil-layers', class: 'text-white' },
+        _class: 'bg-danger text-white',
        target: '_blank'
      }
+    ]
  }
 ]
-  ]
-]
-
@@ -2,16 +2,15 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import CoreuiVue from '@coreui/vue'
-import { CIconPlugin } from '@coreui/icons/vue'
-import { iconsSet } from './assets/icons/icons.js'
+import { iconsSet as icons } from './assets/icons/icons.js'

 Vue.config.performance = true
 Vue.use(CoreuiVue)
-Vue.use(CIconPlugin, iconsSet)

 new Vue({
  el: '#app',
  router,
+  icons,
  template: '<App/>',
  components: {
    App
@@ -10,7 +10,7 @@
          </CCol>
          <CCol sm="7" class="d-none d-md-block">
            <CButton color="primary" class="float-right">
-              <i class="cui-cloud-download"></i>
+              <CIcon name="cil-cloud-download"/>
            </CButton>
            <CButtonGroup class="float-right mr-3">
              <CButton
@@ -85,7 +85,11 @@
    <WidgetsBrand/>
    <CRow>
      <CCol md="12">
-        <CCard header-html="Traffic &amp; Sales" body-wrapper>
+        <CCard>
+          <CCardHeader>
+            Traffic &amp; Sales
+          </CCardHeader>
+          <CCardBody>
            <CRow>
              <CCol sm="12" lg="6">
                <CRow>
@@ -238,10 +242,10 @@
                </div>
                <div class="legend text-center">
                  <small>
-                  <sup><CBadge pill color="info">&nbsp;</CBadge></sup>
+                    <sup><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
                    New clients
                    &nbsp;&nbsp;
-                  <sup><CBadge pill color="danger">&nbsp;</CBadge></sup>
+                    <sup><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
                    Recurring clients
                  </small>
                </div>
@@ -265,7 +269,7 @@
                <ul class="horizontal-bars type-2">
                  <div class="progress-group">
                    <div class="progress-group-header">
-                    <i class="cui-user progress-group-icon"></i>
+                      <CIcon name="cil-user" class="progress-group-icon"/>
                      <span class="title">Male</span>
                      <span class="ml-auto font-weight-bold">43%</span>
                    </div>
@@ -279,7 +283,7 @@
                  </div>
                  <div class="progress-group mb-5">
                    <div class="progress-group-header">
-                    <i class="cui-user-female progress-group-icon"></i>
+                      <CIcon name="cil-user-female" class="progress-group-icon"/>
                      <span class="title">Female</span>
                      <span class="ml-auto font-weight-bold">37%</span>
                    </div>
@@ -293,7 +297,7 @@
                  </div>
                  <div class="progress-group">
                    <div class="progress-group-header">
-                    <i class="cui-globe progress-group-icon"></i>
+                      <CIcon name="cil-globe-alt" class="progress-group-icon"/>
                      <span class="title">Organic Search</span>
                      <span class="ml-auto font-weight-bold">
                        191,235<span class="text-muted small">(56%)</span>
@@ -310,7 +314,7 @@
                  <div class="progress-group">
                    <div class="progress-group-header">
                      <CIcon
-                      name="socialFacebook"
+                        name="cib-facebook"
                        height="17"
                        class="progress-group-icon"
                      />
@@ -330,7 +334,7 @@
                  <div class="progress-group">
                    <div class="progress-group-header">
                      <CIcon
-                      name="socialTwitter"
+                        name="cib-twitter"
                        height="17"
                        class="progress-group-icon"
                      />
@@ -350,7 +354,7 @@
                  <div class="progress-group">
                    <div class="progress-group-header">
                      <CIcon
-                      name="socialLinkedin"
+                        name="cib-linkedin"
                        height="17"
                        class="progress-group-icon"
                      />
@@ -369,14 +373,14 @@
                  </div>
                  <div class="divider text-center">
                    <CButton color="link" size="sm" class="text-muted">
-                    <i class="cui-options"></i>
+                      <CIcon name="cil-options"/>
                    </CButton>
                  </div>
                </ul>
              </CCol>
            </CRow>
            <br/>
-          <CTable
+            <CDataTable
              class="mb-0 table-outline"
              hover
              :items="tableItems"
@@ -441,7 +445,8 @@
                <div class="small text-muted">Last login</div>
                <strong>{{item.activity}}</strong>
              </td>
-          </CTable>
+            </CDataTable>
+          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
@@ -467,49 +472,49 @@ export default {
        {
          avatar: { url: 'img/avatars/1.jpg', status: 'success' },
          user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'USA', flag: 'US' },
+          country: { name: 'USA', flag: 'cif-us' },
          usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Mastercard', icon: 'cc-mastercard' },
+          payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
          activity: '10 sec ago'
        },
        {
          avatar: { url: 'img/avatars/2.jpg', status: 'danger' },
          user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
-          country: { name: 'Brazil', flag: 'BR' },
+          country: { name: 'Brazil', flag: 'cif-br' },
          usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Visa', icon: 'cc-visa' },
+          payment: { name: 'Visa', icon: 'cib-cc-visa' },
          activity: '5 minutes ago'
        },
        {
          avatar: { url: 'img/avatars/3.jpg', status: 'warning' },
          user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'India', flag: 'IN' },
+          country: { name: 'India', flag: 'cif-in' },
          usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Stripe', icon: 'stripe' },
+          payment: { name: 'Stripe', icon: 'cib-stripe' },
          activity: '1 hour ago'
        },
        {
          avatar: { url: 'img/avatars/4.jpg', status: '' },
          user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'France', flag: 'FR' },
+          country: { name: 'France', flag: 'cif-fr' },
          usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'PayPal', icon: 'paypal' },
+          payment: { name: 'PayPal', icon: 'cib-paypal' },
          activity: 'Last month'
        },
        {
          avatar: { url: 'img/avatars/5.jpg', status: 'success' },
          user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'Spain', flag: 'ES' },
+          country: { name: 'Spain', flag: 'cif-es' },
          usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Google Wallet', icon: 'google-wallet' },
+          payment: { name: 'Google Wallet', icon: 'cib-google-pay' },
          activity: 'Last week'
        },
        {
          avatar: { url: 'img/avatars/6.jpg', status: 'danger' },
          user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'Poland', flag: 'PL' },
+          country: { name: 'Poland', flag: 'cif-pl' },
          usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Amex', icon: 'cc-amex' },
+          payment: { name: 'Amex', icon: 'cib-cc-amex' },
          activity: 'Last week'
        }
      ],
@@ -3,7 +3,7 @@
    <CCol col>
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
+          <CIcon name="cil-justify-center"/><strong> Bootstrap Breadcrumb</strong>
          <div class="card-header-actions">
            <a 
              href="https://coreui.io/vue/docs/3.0/components/Breadcrumb" 
@@ -22,13 +22,16 @@
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard footer-html="Card Footer" :body-html="loremIpsum" />
+        <CCard>
+          <CCardBody>{{loremIpsum}}</CCardBody>
+          <CCardFooter>Card Footer</CCardFooter>
+        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard
-          headerHtml="<i class='cui-check'></i> Card with icon"
-          :bodyHtml="loremIpsum"
-        />
+        <CCard>
+          <CCardHeader><CIcon name="cil-check"/> Card with icon</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
+        </CCard>
      </CCol>
      <CCol sm="6" md="4">
        <CCard>
@@ -64,7 +67,7 @@
        <CCard>
          <CCardHeader>
            Card with label
-            <CBadge pill color="danger" class="float-right">42</CBadge>
+            <CBadge shape="pill" color="danger" class="float-right">42</CBadge>
          </CCardHeader>
          <CCardBody>
            {{loremIpsum}}
@@ -74,80 +77,84 @@
    </CRow>
    <CRow>
      <CCol sm="6" md="4">
-        <CCard
-          header="Card outline primary"
-          border-color="primary"
-          :body-html="loremIpsum"
-        />
-      </CCol>
-      <CCol sm="6" md="4">
-        <CCard
-          header="Card outline secondary"
-          border-color="secondary"
-          :body-html="loremIpsum"
-        />
-      </CCol>
-      <CCol sm="6" md="4">
-        <CCard
-          header="Card outline success"
-          border-color="success"
-          body-wrapper
-        >
-            {{loremIpsum}}
+        <CCard border-color="primary">
+          <CCardHeader>Card outline primary</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard header-html="Card outline info" border-color="info" body-wrapper>
-            {{loremIpsum}}
+        <CCard border-color="secondary">
+          <CCardHeader>Card outline secondary</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard header-html="Card outline warning" border-color="warning" body-wrapper>
-            {{loremIpsum}}
+        <CCard border-color="success">
+          <CCardHeader>Card outline success</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard header-html="Card outline danger" border-color="danger" body-wrapper>
-            {{loremIpsum}}
+        <CCard border-color="info">
+          <CCardHeader>Card outline info</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard border-color="warning">
+          <CCardHeader>Card outline warning</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
+        </CCard>
+      </CCol>
+      <CCol sm="6" md="4">
+        <CCard border-color="danger">
+          <CCardHeader>Card outline danger</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
        </CCard>
      </CCol>
    </CRow>

    <CRow>
      <CCol sm="6" md="4">
-        <CCard class="card-accent-primary" header="Card with primary accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="primary">
+          <CCardHeader>Card with primary accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard class="card-accent-secondary" header="Card with secondary accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="secondary">
+          <CCardHeader>Card with secondary accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard class="card-accent-success" header="Card with success accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="success">
+          <CCardHeader>Card with success accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard class="card-accent-info" header="Card with info accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="info">
+          <CCardHeader>Card with info accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard class="card-accent-warning" header="Card with warning accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="info">
+          <CCardHeader>Card with info accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard class="card-accent-danger" header="Card with danger accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="danger">
+          <CCardHeader>Card with danger accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
        </CCard>
      </CCol>
    </CRow>
    <CRow>
      <CCol sm="6" md="4">
-        <CCard class="bg-primary text-center" body-wrapper>
+        <CCard color="primary" class="text-center" body-wrapper>
          <blockquote class="card-blockquote">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer>Someone famous in
@@ -157,7 +164,7 @@
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard class="bg-success text-center" body-wrapper>
+        <CCard color="success" class="text-center" body-wrapper>
          <blockquote class="card-blockquote">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer>Someone famous in
@@ -167,7 +174,7 @@
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard class="bg-info text-center" body-wrapper>
+        <CCard color="info" class="text-center" body-wrapper>
          <blockquote class="card-blockquote">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer>Someone famous in
@@ -177,7 +184,7 @@
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard class="bg-warning text-center" body-wrapper>
+        <CCard color="warning" class="text-center" body-wrapper>
          <blockquote class="card-blockquote">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer>Someone famous in
@@ -187,7 +194,7 @@
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard class="bg-danger text-center" body-wrapper>
+        <CCard color="danger" class="text-center" body-wrapper>
          <blockquote class="card-blockquote">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer>Someone famous in
@@ -197,7 +204,7 @@
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard class="bg-secondary text-center" body-wrapper>
+        <CCard color="secondary" class="text-center" body-wrapper>
          <blockquote class="card-blockquote">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer>Someone famous in
@@ -209,44 +216,44 @@
    </CRow>
    <CRow>
      <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-primary" body-wrapper>
+        <CCard color="primary" body-wrapper>
          {{loremIpsum}}
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-success" body-wrapper>
+        <CCard color="success" body-wrapper>
          {{loremIpsum}}
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-info" body-wrapper>
+        <CCard color="info" body-wrapper>
          {{loremIpsum}}
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-warning" body-wrapper>
+        <CCard color="warning" body-wrapper>
          {{loremIpsum}}
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-danger" body-wrapper>
+        <CCard color="danger" body-wrapper>
          {{loremIpsum}}
        </CCard>
      </CCol>
      <CCol sm="6" md="4">
        <transition name="fade">
-          <CCard class="bg-secondary" v-if="show">
+          <CCard v-if="show" color="secondary">
            <CCardHeader>
              Card with header actions
              <div class="card-header-actions">
                <CLink href="#" class="card-header-action btn-setting">
-                  <i class="cui-settings"></i>
+                  <CIcon name="cil-settings"/>
                </CLink>
                <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
-                  <i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
+                  <CIcon :name="`cil-chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
                </CLink>
                <CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
-                  <i class="cui-circle-x"></i>
+                  <CIcon name="cil-x-circle"/>
                </CLink>
              </div>
            </CCardHeader>
@@ -3,7 +3,7 @@
    <CCol md="12" lg="7">
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="cil-justify-center"/>
          <strong> Bootstrap Carousel</strong>
          <div class="card-header-actions">
            <a 
@@ -25,16 +25,16 @@
          >
            <CCarouselItem
              captionHeader="First Slide"
-              image="https://lorempixel.com/1024/480/technics/2/"
+              image="https://picsum.photos/1024/480/?image=52"
              captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
            />
            <CCarouselItem
              captionHeader="Blank page"
-              :image="{ blankColor: 'grey' }"
+              :image="{ placeholderColor: 'grey' }"
              captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
            />
            <CCarouselItem
-              image="https://lorempixel.com/1024/480/technics/8/"
+            image="https://picsum.photos/1024/480/?image=54"
            />
          </CCarousel>
        </CCardBody>
@@ -3,7 +3,7 @@
    <CCol col="12" md="6">
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="cil-justify-center"/>
          <strong> Bootstrap Collapse </strong>
          <div class="card-header-actions">
            <a 
@@ -22,7 +22,7 @@
          </CButton>
          <CCollapse :show="collapse" class="mt-2">
            <CCard body-wrapper>
-              <p class="card-text">Collapse contents Here</p>
+              <CCardText>Collapse contents Here</CCardText>
              <CButton  
                @click="innerCollapse = !innerCollapse" 
                size="sm" 
@@ -190,13 +190,13 @@
                  </CCol>
                  <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
                    <CInputCheckbox
-                      v-for="option in options"
-                      :key="option"
+                      v-for="(option, optionIndex) in options"
+                      :key="key + option"
                      :label="option"
                      :value="option"
                      :custom="key > 1"
                      :name="`Option 1${key}`"
-                      :checked="Math.random() > 0.6"
+                      :checked="optionIndex === key"
                      :inline="key % 2 === 1"
                    />
                  </CCol>
@@ -210,7 +210,7 @@
                  <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
                    <CInputRadio
                      v-for="(option, optionIndex) in options"
-                      :key="option"
+                      :key="key + option"
                      :label="option"
                      type="radio"
                      :value="option"
@@ -245,8 +245,8 @@
            </CForm>
          </CCardBody>
          <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
          </CCardFooter>
        </CCard>
        <CCard>
@@ -276,8 +276,8 @@
            </CForm>
          </CCardBody>
          <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
          </CCardFooter>
        </CCard>
      </CCol>
@@ -307,8 +307,8 @@
            </CForm>
          </CCardBody>
          <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
          </CCardFooter>
        </CCard>
        <CCard>
@@ -337,8 +337,8 @@
              />
            </CCardBody>
            <CCardFooter>
-              <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
-              <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+              <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
+              <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
            </CCardFooter>
          </CForm>
        </CCard>
@@ -399,8 +399,8 @@
            </CRow>
          </CCardBody>
          <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><i class="cui-user"></i> Login</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="cil-user"/> Login</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
          </CCardFooter>
        </CCard>
        <CCard>
@@ -427,8 +427,8 @@
            />
          </CCardBody>
          <CCardFooter>
-            <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
          </CCardFooter>
        </CCard>
      </CCol>
@@ -488,25 +488,26 @@
            <strong>Icon/Text</strong> Groups
          </CCardHeader>
          <CCardBody>
-            <CInput
-              placeholder="Username"
-              prependHtml="<i class='cui-user'></i>"
-            />
+            <CInput placeholder="Username">
+              <template #prepend-content><CIcon name="cil-user"/></template>
+            </CInput>
            <CInput
              type="email"
              placeholder="Email"
              autocomplete="email"
-              append-html="<i class='cui-envelope-open'></i>"
-            />
+            >
+              <template #append-content><CIcon name="cil-envelope-open"/></template>
+            </CInput>
            <CInput
-              prependHtml="<i class='cui-euro'></i>"
              placeholder="ex. $1.000.000"
-              append-html=".00"
-            />
+              append=".00"
+            >
+              <template #prepend-content><CIcon name="cil-euro"/></template>
+            </CInput>
          </CCardBody>
          <CCardFooter>
-            <CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="success"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
          </CCardFooter>
        </CCard>
      </CCol>
@@ -519,7 +520,7 @@
            <CInput placeholder="Username">
              <template #prepend>
                <CButton color="primary">
-                  <i class="cui-magnifying-glass"></i> Search
+                  <CIcon name="cil-magnifying-glass"/> Search
                </CButton>
              </template>
            </CInput>
@@ -538,16 +539,16 @@
              autocomplete="email"
            >
              <template #prepend>
-                <CButton color="primary"><CIcon name="facebook" height="14"/></CButton>
+                <CButton color="primary"><CIcon name="cil-facebook" height="14"/></CButton>
              </template>
              <template #append>
-                <CButton color="primary"><CIcon name="twitter" height="14"/></CButton>
+                <CButton color="primary"><CIcon name="cil-twitter" height="14"/></CButton>
              </template>
            </CInput>
          </CCardBody>
          <CCardFooter>
-            <CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="success"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
          </CCardFooter>
        </CCard>
      </CCol>
@@ -619,8 +620,8 @@
            </CInput>
          </CCardBody>
          <CCardFooter>
-            <CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="success"><CIcon name="cil-circle-check"/> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
          </CCardFooter>
        </CCard>
      </CCol>
@@ -691,22 +692,23 @@
          </CCardHeader>
          <CCardBody>
            <CForm>
+              <CInput prepend="Username">
+                <template #append-content><CIcon name="cil-user"/></template>
+              </CInput>
              <CInput
-                prepend-html="Username"
-                append-html="<i class='cui-user'></i>"
-              />
-              <CInput
-                prepend-html="Email"
                type="email"
                autocomplete="email"
-                append-html="<i class='cui-envelope-closed'></i>"
-              />
+                prepend="Email"
+              >
+                <template #append-content><CIcon name="cil-envelope-closed"/></template>
+              </CInput>
              <CInput
-                prepend-html="Password"
                type="password"
                autocomplete="current-password"
-                append-html="<i class='cui-shield'></i>"
-              />
+                prepend="Password"
+              >
+                <template #append-content><CIcon name="cil-shield-alt"/></template>
+              </CInput>
              <div class="form-group form-actions">
                <CButton type="submit" size="sm" color="primary">
                  Submit
@@ -723,22 +725,23 @@
          </CCardHeader>
          <CCardBody>
            <CForm>
-              <CInput
-                placeholder="Username"
-                append-html="<i class='cui-user'></i>"
-              />
+              <CInput placeholder="Username">
+                <template #append-content><CIcon name="cil-user"/></template>
+              </CInput>
              <CInput
                placeholder="Email"
                type="email"
                autocomplete="email"
-                append-html="<i class='cui-envelope-closed'></i>"
-              />
+              >
+                <template #append-content><CIcon name="cil-envelope-closed"/></template>
+              </CInput>
              <CInput
                placeholder="Password"
                type="password"
                autocomplete="current-password"
-                append-html="<i class='cui-shield'></i>"
-              />
+              >
+                <template #append-content><CIcon name="cil-shield-alt"/></template>
+              </CInput>
              <div class="form-group form-actions">
                <CButton type="submit" class="btn btn-sm btn-secondary">
                  Submit
@@ -755,22 +758,23 @@
          </CCardHeader>
          <CCardBody>
            <CForm>
-              <CInput
-                placeholder="Username"
-                prependHtml="<i class='cui-user'></i>"
-              />
+              <CInput placeholder="Username">
+                <template #prepend-content><CIcon name="cil-user"/></template>
+              </CInput>
              <CInput
                placeholder="Email"
                type="email"
                autocomplete="email"
-                prependHtml="<i class='cui-envelope-closed'></i>"
-              />
+              >
+                <template #prepend-content><CIcon name="cil-envelope-closed"/></template>
+              </CInput>
              <CInput
                placeholder="Password"
                type="password"
                autocomplete="current-password"
-                prependHtml="<i class='cui-shield'></i>"
-              />
+              >
+                <template #prepend-content><CIcon name="cil-shield-alt"/></template>
+              </CInput>
              <div class="form-group form-actions">
                <CButton type="submit" size="sm" color="success">
                  Submit
@@ -786,19 +790,19 @@
        <transition name="fade">
          <CCard v-if="show">
            <CCardHeader>
-              <i class="cui-pencil"></i> Form Elements
+              <CIcon name="cil-pencil"/> Form Elements
              <div class="card-header-actions">
                <CLink href="#" class="card-header-action btn-setting">
-                  <i class="cui-settings"></i>
+                  <CIcon name="cil-settings"/>
                </CLink>
                <CLink
                  class="card-header-action btn-minimize"
                  @click="formCollapsed=!formCollapsed"
                >
-                  <i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
+                  <CIcon :name="`cil-chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
                </CLink>
                <CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
-                  <i class="cui-circle-x"></i>
+                  <CIcon name="cil-x-circle"/>
                </CLink>
              </div>
            </CCardHeader>
@@ -806,21 +810,21 @@
              <CCardBody>
                <CInput
                  label="Prepended text"
-                  prepend-html="@"
                  description="Here's some help text"
                  type="email"
                  autocomplete="email"
+                  prepend="@"
                />
                <CInput
                  label="Appended text"
-                  append-html=".00"
+                  append=".00"
                  description="Here's some help text"
                />
                <CInput
                  label="Appended and prepended text"
-                  prepend-html="$"
-                  append-html=".00"
+                  append=".00"
                  description="Here's some help text"
+                  prepend="$"
                />
                <CInput
                  label="Append with button"
@@ -4,7 +4,7 @@
      <CCol>
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> Bootstrap Jumbotron </strong>
            <div class="card-header-actions">
              <a 
@@ -20,7 +20,7 @@
          <CCardBody>
            <CJumbotron>
              <h1 class="display-3">Bootstrap 4</h1>
-              <p class="lead">Bootstrap 4 Components for Vue.js 2</p>
+              <p class="lead">Bootstrap 4 Components for Vue.js 2.6+</p>
              <p>For more information visit website</p>
              <CButton color="primary" href="#">More Info</CButton>
            </CJumbotron>
@@ -30,7 +30,7 @@
      <CCol>
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
+            <CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
            <small>with slots</small>
          </CCardHeader>
          <CCardBody>
@@ -56,7 +56,7 @@
      <CCol>
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
+            <CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
            <small>colors</small>
          </CCardHeader>
          <CCardBody>
@@ -4,7 +4,7 @@
      <CCol md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> Bootstrap list group </strong>
            <div class="card-header-actions">
              <a 
@@ -31,7 +31,7 @@
      <CCol md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
+            <CIcon name="cil-justify-center"/><strong> List group </strong><small>active items</small>
          </CCardHeader>
          <CCardBody>
            <CListGroup>
@@ -49,7 +49,7 @@
      <CCol md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> List group </strong>
            <small>disabled items</small>
          </CCardHeader>
@@ -67,7 +67,7 @@
      <CCol md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> List group </strong>
            <small>actionable items</small>
          </CCardHeader>
@@ -86,7 +86,7 @@
      <CCol md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> List group </strong>
            <small>buttons</small>
          </CCardHeader>
@@ -103,7 +103,7 @@
      <CCol md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> List group </strong>
            <small>with badges</small>
          </CCardHeader>
@@ -113,19 +113,19 @@
                class="d-flex justify-content-between align-items-center"
              >
                Cras justo odio
-                <CBadge color="primary" pill>14</CBadge>
+                <CBadge color="primary" shape="pill">14</CBadge>
              </CListGroupItem>
              <CListGroupItem
                class="d-flex justify-content-between align-items-center"
              >
                Dapibus ac facilisis in
-                <CBadge color="primary" pill>2</CBadge>
+                <CBadge color="primary" shape="pill">2</CBadge>
              </CListGroupItem>
              <CListGroupItem
                class="d-flex justify-content-between align-items-center"
              >
                Morbi leo risus
-                <CBadge color="primary" pill>1</CBadge>
+                <CBadge color="primary" shape="pill">1</CBadge>
              </CListGroupItem>
            </CListGroup>
          </CCardBody>
@@ -136,7 +136,7 @@
      <CCol md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> List group </strong>
            <small>colors</small>
          </CCardHeader>
@@ -158,7 +158,7 @@
      <CCol md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> List group </strong>
            <small>colors active</small>
          </CCardHeader>
@@ -182,26 +182,32 @@
      <CCol col="12">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> List group </strong>
            <small>inside cards</small>
          </CCardHeader>
          <CCardBody>
            <CCardGroup deck>
-              <CCard headerHtml="<b>Card with list group</b>">
+              <CCard>
+                <CCardHeader>
+                  <b>Card with list group</b>
+                </CCardHeader>
+                <CCardBody>
                  <CListGroup>
                    <CListGroupItem href="#">Cras justo odio</CListGroupItem>
                    <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
                    <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
                  </CListGroup>
-                <p class="card-text mt-2">
+                  <CCardText class="mt-2">
                    Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
                    nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
                    consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
                    ad sit ipsum anim Lorem.
-                </p>
+                  </CCardText>
+                </CCardBody>
              </CCard>
-              <CCard header="<b>Card with flush list group</b>">
+              <CCard>
+                <CCardHeader><b>Card with flush list group</b></CCardHeader>
                <CListGroup flush>
                  <CListGroupItem href="#">Cras justo odio</CListGroupItem>
                  <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
@@ -223,7 +229,7 @@
      <CCol md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
+            <CIcon name="cil-justify-center"/><strong> List group </strong><small>custom content</small>
          </CCardHeader>
          <CCardBody>
            <CListGroup>
@@ -2,7 +2,7 @@
  <div>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Bootstrap Navbar </strong>
        <div class="card-header-actions">
          <a 
@@ -67,7 +67,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
        <small>brand</small>
      </CCardHeader>
      <CCardBody>
@@ -82,7 +82,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
        <small>text</small>
      </CCardHeader>
      <CCardBody>
@@ -99,7 +99,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
        <small>dropdown</small>
      </CCardHeader>
      <CCardBody>
@@ -135,7 +135,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
        <small>form</small>
      </CCardHeader>
      <CCardBody>
@@ -153,7 +153,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+        <CIcon name="cil-justify-center"/> <strong> Navbar </strong>
        <small>input group</small>
      </CCardHeader>
      <CCardBody>
@@ -2,7 +2,7 @@
  <div>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
+        <CIcon name="cil-justify-center"/><strong> Bootstrap Navs</strong>
        <div class="card-header-actions">
          <a 
            href="https://coreui.io/vue/docs/3.0/components/Nav" 
@@ -25,14 +25,14 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Bootstrap Navs </strong>
        <small>icons</small>
      </CCardHeader>
      <CCardBody>
        <CNav>
          <CNavItem active>
-            <i class="cui-basket-loaded"></i>
+            <CIcon name="cil-basket"/>
          </CNavItem>
          <CNavItem>
            Link
@@ -46,12 +46,12 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Bootstrap Navs </strong>
        <small>tab style</small>
      </CCardHeader>
      <CCardBody>
-        <CNav tabs>
+        <CNav variant="tabs">
          <CNavItem active>
            Active
          </CNavItem>
@@ -67,12 +67,12 @@
    </CCard>
    <CCard>
      <CCardHeader @click="item++">
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Bootstrap Navs </strong>
        <small>pill style</small>
      </CCardHeader>
      <CCardBody>
-        <CNav pills>
+        <CNav variant="pills">
          <CNavItem active>Active</CNavItem>
          <CNavItem>Link</CNavItem>
          <CNavItem>Another Link</CNavItem>
@@ -82,12 +82,12 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Bootstrap Navs </strong>
        <small>fill tabs</small>
      </CCardHeader>
      <CCardBody>
-        <CNav fill tabs>
+        <CNav fill variant="tabs">
          <CNavItem active>Active</CNavItem>
          <CNavItem>Link</CNavItem>
          <CNavItem>Link with a long name </CNavItem>
@@ -97,12 +97,12 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Bootstrap Navs </strong>
        <small>justified tabs</small>
      </CCardHeader>
      <CCardBody>
-        <CNav justified tabs>
+        <CNav justified variant="tabs">
          <CNavItem active>Active</CNavItem>
          <CNavItem>Link</CNavItem>
          <CNavItem>Link with a long name </CNavItem>
@@ -112,7 +112,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Bootstrap Navs </strong>
        <small>dropdown support</small>
      </CCardHeader>
@@ -137,7 +137,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Bootstrap Navs </strong>
        <small>vertical variation</small>
      </CCardHeader>
@@ -2,7 +2,7 @@
  <div>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Responsive bootstrap Pagination</strong>
        <div class="card-header-actions">
          <a 
@@ -47,7 +47,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Pagination </strong>
        <small>alignment</small>
      </CCardHeader>
@@ -2,7 +2,7 @@
  <div>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Bootstrap Popovers</strong>
        <div class="card-header-actions">
          <a 
@@ -49,7 +49,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Popovers </strong>
        <small>placement</small>
      </CCardHeader>
@@ -2,7 +2,7 @@
  <div>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Bootstrap Progress</strong>
        <div class="card-header-actions">
          <a 
@@ -33,7 +33,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
+        <CIcon name="cil-justify-center"/> <strong> Progress </strong><small>labels</small>
      </CCardHeader>
      <CCardBody>
        <h6>No label</h6>
@@ -50,7 +50,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Progress </strong>
        <small>width</small>
      </CCardHeader>
@@ -65,7 +65,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Progress </strong>
        <small>height</small>
      </CCardHeader>
@@ -80,7 +80,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Progress </strong>
        <small>colors</small>
      </CCardHeader>
@@ -99,7 +99,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Progress </strong>
        <small>striped</small>
      </CCardHeader>
@@ -135,7 +135,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Progress </strong>
        <small>animated</small>
      </CCardHeader>
@@ -174,7 +174,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Progress </strong>
        <small>multiple bars</small>
      </CCardHeader>
@@ -23,8 +23,7 @@
              :key="'radio' + key"
              class="mx-1"
              :color="color"
-              shape="3d"
-              outline="alt"
+             variant="3d"
              v-bind="labelIcon"
              type="radio"
              name="radio"
@@ -85,15 +84,15 @@
            3d Switch
          </CCardHeader>
          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" />
+            <CSwitch class="mx-1" color="primary" checked variant="3d" />
+            <CSwitch class="mx-1" color="secondary" checked variant="3d" />
+            <CSwitch class="mx-1" color="success" checked variant="3d" />
+            <CSwitch class="mx-1" color="warning" checked variant="3d" />
+            <CSwitch class="mx-1" color="info" checked variant="3d" />
+            <CSwitch class="mx-1" color="danger" checked variant="3d" />
+            <CSwitch class="mx-1" color="light" checked variant="3d" />
+            <CSwitch class="mx-1" color="dark" checked variant="3d" />
+            <CSwitch class="mx-1" color="primary" disabled variant="3d" />
          </CCardBody>
        </CCard>
      </CCol>
@@ -103,33 +102,15 @@
            3d Switch <small><code>disabled</code></small>
          </CCardHeader>
          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="secondary" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="success" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="warning" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="info" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="danger" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="light" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="dark" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="primary" disabled shape="3d" />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            3d Switch <small><code>outline="alt"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="primary" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="secondary" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="success" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="warning" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="info" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="danger" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="light" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="dark" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="primary" disabled variant="3d" />
          </CCardBody>
        </CCard>
      </CCol>
@@ -139,235 +120,90 @@
            3d Switch <small><code>label</code></small>
          </CCardHeader>
          <CCardBody>
-            <CSwitch class="mx-1" color="primary" shape="3d" checked v-bind="labelIcon"/>
-            <CSwitch class="mx-1" color="secondary" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" disabled shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="3d" shape="square" checked v-bind="labelIcon"/>
+            <CSwitch class="mx-1" color="secondary" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" disabled variant="3d" v-bind="labelIcon" />
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs="12" md="6">
        <CCard>
          <CCardHeader>
-            3d Switch <small><code>outline="alt"</code></small>
+            Switch <small><code>variant="outline"</code></small>
          </CCardHeader>
          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" />
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" />
+            <CSwitch class="mx-1" color="primary" variant="outline" disabled />
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs="12" md="6">
        <CCard>
          <CCardHeader>
-            3d Switch <small><code>outline="alt"</code></small>
+            Switch <small><code>variant="outline"  shape="pill"</code></small>
          </CCardHeader>
          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill"/>
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled />
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs="12" md="6">
        <CCard>
          <CCardHeader>
-            Switch <small><code>outline</code></small>
+            Switch <small><code>variant="opposite"</code></small>
          </CCardHeader>
          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline />
-            <CSwitch class="mx-1" color="secondary" checked outline />
-            <CSwitch class="mx-1" color="success" checked outline />
-            <CSwitch class="mx-1" color="warning" checked outline />
-            <CSwitch class="mx-1" color="info" checked outline />
-            <CSwitch class="mx-1" color="danger" checked outline />
-            <CSwitch class="mx-1" color="light" checked outline />
-            <CSwitch class="mx-1" color="dark" checked outline />
-            <CSwitch class="mx-1" color="primary" outline disabled />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" />
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" disabled />
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs="12" md="6">
        <CCard>
          <CCardHeader>
-            Switch <small><code>outline  shape="pill"</code></small>
+            Switch <small><code>variant="opposite"  shape="pill"</code></small>
          </CCardHeader>
          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline shape="pill"/>
-            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill"/>
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled />
          </CCardBody>
        </CCard>
      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>outline="alt"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" />
-            <CSwitch class="mx-1" color="primary" outline="alt" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>outline="alt"  shape="pill"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill"/>
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked />
-            <CSwitch class="mx-1" color="secondary" checked />
-            <CSwitch class="mx-1" color="success" checked />
-            <CSwitch class="mx-1" color="warning" checked />
-            <CSwitch class="mx-1" color="info" checked />
-            <CSwitch class="mx-1" color="danger" checked />
-            <CSwitch class="mx-1" color="light" checked />
-            <CSwitch class="mx-1" color="dark" checked />
-            <CSwitch class="mx-1" color="primary" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label  shape="pill"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked shape="pill" />
-            <CSwitch class="mx-1" color="secondary" checked shape="pill" />
-            <CSwitch class="mx-1" color="success" checked shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked shape="pill" />
-            <CSwitch class="mx-1" color="info" checked shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked shape="pill" />
-            <CSwitch class="mx-1" color="light" checked shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked shape="pill" />
-            <CSwitch class="mx-1" color="primary" shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline />
-            <CSwitch class="mx-1" color="secondary" checked outline />
-            <CSwitch class="mx-1" color="success" checked outline />
-            <CSwitch class="mx-1" color="warning" checked outline />
-            <CSwitch class="mx-1" color="info" checked outline />
-            <CSwitch class="mx-1" color="danger" checked outline />
-            <CSwitch class="mx-1" color="light" checked outline />
-            <CSwitch class="mx-1" color="dark" checked outline />
-            <CSwitch class="mx-1" color="primary" outline disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" />
-            <CSwitch class="mx-1" color="primary" outline="alt" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-
      <CCol xs="12" md="6">
        <CCard>
          <CCardHeader>
@@ -407,72 +243,72 @@
      <CCol xs="12" md="6">
        <CCard>
          <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="outline"</code></small>
          </CCardHeader>
          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="outline" disabled v-bind="labelIcon" />
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs="12" md="6">
        <CCard>
          <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="outline"</code></small>
          </CCardHeader>
          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled v-bind="labelIcon" />
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs="12" md="6">
        <CCard>
          <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="opposite"</code></small>
          </CCardHeader>
          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline="alt" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" disabled v-bind="labelIcon" />
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs="12" md="6">
        <CCard>
          <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="opposite"</code></small>
          </CCardHeader>
          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill" v-bind="labelTxt" />
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled v-bind="labelIcon" />
          </CCardBody>
        </CCard>
      </CCol>
@@ -483,7 +319,7 @@
            Sizes
          </CCardHeader>
          <CCardBody class="p-0">
-            <CTable
+            <CDataTable
              hover
              striped
              class="table-align-middle mb-0"
@@ -494,7 +330,7 @@
              <template #example="{item}">
                <td>
                  <CSwitch
-                    :shape="item.example.shape"
+                    :variant="item.example.variant"
                    :color="item.example.color"
                    :size="item.example.size"
                    :checked="item.example.checked"
@@ -506,7 +342,7 @@
                  <span v-html="item.size_prop"></span>
                </td>
              </template>
-            </CTable>
+            </CDataTable>
          </CCardBody>
        </CCard>
      </CCol>
@@ -530,17 +366,17 @@ export default {
      items: [
        {
          size: 'Large', 
-          example: { shape: '3d', color: 'primary', size: 'lg', checked: true }, 
+          example: {  variant: '3d', color: 'primary', size: 'lg', checked: true }, 
          size_prop: 'Add following prop <code>size="lg"</code>'
        },
        {
          size: 'Normal', 
-          example: { shape: '3d', color: 'primary', size: '', checked: true }, 
+          example: {  variant: '3d', color: 'primary', size: '', checked: true }, 
          size_prop: '-'
        },
        {
          size: 'Small', 
-          example: {shape: '3d', color: 'primary', size: 'sm', checked: true}, 
+          example: { variant: '3d', color: 'primary', size: 'sm', checked: true}, 
          size_prop: 'Add following prop <code>size="sm"</code>'
        }
      ],
@@ -1,6 +1,10 @@
 <template>
-  <CCard :header="caption" body-wrapper>
-    <CTable
+  <CCard>
+    <CCardHeader>
+      <CIcon name="cil-justify-center"/> {{caption}}
+    </CCardHeader>
+    <CCardBody>
+      <CDataTable
        :hover="hover"
        :striped="striped"
        :bordered="bordered"
@@ -17,7 +21,8 @@
            <CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
          </td>
        </template>
-    </CTable>
+      </CDataTable>
+    </CCardBody>
  </CCard>
 </template>

@@ -4,7 +4,7 @@
      <CCol lg="6">
        <CTableWrapper
          :items="getShuffledUsersData()"
-          caption="<i class='fa fa-align-justify'></i> Simple Table"
+          caption="Simple Table"
        />
      </CCol>

@@ -12,7 +12,7 @@
        <CTableWrapper
          :items="getShuffledUsersData()"
          striped
-          caption="<i class='fa fa-align-justify'></i> Striped Table"
+          caption="Striped Table"
        />
      </CCol>
    </CRow>
@@ -22,7 +22,7 @@
        <CTableWrapper
          :items="getShuffledUsersData()"
          small
-          caption="<i class='fa fa-align-justify'></i> Condensed Table"
+          caption="Condensed Table"
        />
      </CCol>

@@ -31,7 +31,7 @@
          :items="getShuffledUsersData()"
          fixed
          bordered
-          caption="<i class='fa fa-align-justify'></i> Bordered Table"
+          caption="Bordered Table"
        />
      </CCol>
    </CRow>
@@ -45,7 +45,7 @@
          bordered
          small
          fixed
-          caption="<i class='fa fa-align-justify'></i> Combined All Table"
+          caption="Combined All Table"
        />
      </CCol>
    </CRow>
@@ -60,7 +60,7 @@
          small
          fixed
          dark
-          caption="<i class='fa fa-align-justify'></i> Combined All Table"
+          caption="Combined All Table"
        />
      </CCol>
    </CRow>
@@ -18,21 +18,21 @@
          </CCardHeader>
          <CCardBody>
            <CTabs>
-              <CTab title-html="Home" active>
+              <CTab title="Home" active>
                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                officia deserunt mollit anim id est laborum.
              </CTab>
-              <CTab title-html="Profile">
+              <CTab title="Profile">
                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                officia deserunt mollit anim id est laborum.
              </CTab>
-              <CTab title-html="Disabled" disabled>
+              <CTab title="Disabled" disabled>
                3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -49,22 +49,22 @@
            Tabs
          </CCardHeader>
          <CCardBody>
-            <CTabs pills>
-              <CTab title-html="Home" active>
+            <CTabs variant="pills">
+              <CTab title="Home" active>
                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                officia deserunt mollit anim id est laborum.
              </CTab>
-              <CTab title-html="Profile">
+              <CTab title="Profile">
                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                officia deserunt mollit anim id est laborum.
              </CTab>
-              <CTab title-html="Disabled" disabled>
+              <CTab title="Disabled" disabled>
                3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -84,7 +84,7 @@
            <CTabs>
              <CTab active>
                <template slot="title">
-                  <i class="cui-calculator"></i>
+                  <CIcon name="cil-calculator"/>
                </template>
                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -94,7 +94,7 @@
              </CTab>
              <CTab>
                <template slot="title">
-                  <i class="cui-basket-loaded"></i>
+                  <CIcon name="cil-basket"/>
                </template>
                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -104,7 +104,7 @@
              </CTab>
              <CTab>
                <template slot="title">
-                  <i class="cui-pie-chart"></i>
+                  <CIcon name="cil-chart-pie"/>
                </template>
                3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -125,7 +125,7 @@
            <CTabs add-tab-classes="mt-1">
              <CTab active>
                <template slot="title">
-                  <i class="cui-calculator"></i> {{tabs[0]}}
+                  <CIcon name="cil-calculator"/> {{tabs[0]}}
                </template>
                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -135,7 +135,7 @@
              </CTab>
              <CTab>
                <template slot="title">
-                  <i class="cui-basket-loaded"></i> {{tabs[1]}}
+                  <CIcon name="cil-basket"/> {{tabs[1]}}
                </template>
                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -145,7 +145,7 @@
              </CTab>
              <CTab>
                <template slot="title">
-                  <i class="cui-pie-chart"></i> {{tabs[2]}}
+                  <CIcon name="cil-chart-pie"/> {{tabs[2]}}
                </template>
                3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -163,10 +163,10 @@
            Tabs vertical
          </CCardHeader>
          <CCardBody>
-            <CTabs pills vertical>
+            <CTabs variant="pills" vertical>
              <CTab active>
                <template slot="title">
-                  <i class="cui-calculator"></i> {{tabs[0]}}
+                  <CIcon name="cil-calculator"/> {{tabs[0]}}
                </template>
                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -176,7 +176,7 @@
              </CTab>
              <CTab>
                <template slot="title">
-                  <i class="cui-basket-loaded"></i> {{tabs[1]}}
+                  <CIcon name="cil-basket"/> {{tabs[1]}}
                </template>
                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -186,7 +186,7 @@
              </CTab>
              <CTab>
                <template slot="title">
-                  <i class="cui-pie-chart"></i> {{tabs[2]}}
+                  <CIcon name="cil-chart-pie"/> {{tabs[2]}}
                </template>
                3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -2,7 +2,7 @@
  <div>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Bootstrap Tooltips </strong>
        <small><code>v-c-tooltip</code> directive</small>
        <div class="card-header-actions">
@@ -43,7 +43,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="fa fa-align-justify"></i>
+        <CIcon name="cil-justify-center"/>
        <strong> Tooltips </strong>
        <small>placement</small>
      </CCardHeader>
@@ -31,7 +31,7 @@
                :key="key"
                :color="brandName"
              >
-                <CIcon size="sm" :name="brandName"/>
+                <CIcon size="sm" :name="'cib-' + brandName"/>
                <span>{{brandName}}</span>
              </CButton>
            </template>
@@ -44,7 +44,7 @@
                :key="key"
                :color="brandName"
              >
-                <CIcon :name="brandName"/>
+                <CIcon :name="'cib-' + brandName"/>
                <span>{{brandName}}</span>
              </CButton>
            </template>
@@ -58,7 +58,7 @@
                :key="key"
                :color="brandName"
              >
-                <CIcon size="lg" :name="brandName"/>
+                <CIcon size="lg" :name="'cib-' + brandName"/>
                <span>{{brandName}}</span>
              </CButton>
            </template>
@@ -84,7 +84,7 @@
                :key="key"
                :color="brandName"
              >
-                <CIcon size="sm" :name="brandName"/>
+                <CIcon size="sm" :name="'cib-' + brandName"/>
              </CButton>
            </template>
          </p>
@@ -96,7 +96,7 @@
                :key="key"
                :color="brandName"
              >
-                <CIcon :name="brandName"/>
+                <CIcon :name="'cib-' + brandName"/>
              </CButton>
            </template>
          </p>
@@ -109,7 +109,7 @@
                :key="key"
                :color="brandName"
              >
-                <CIcon size="lg" :name="brandName"/>
+                <CIcon size="lg" :name="'cib-' + brandName"/>
              </CButton>
            </template>
          </p>
@@ -132,7 +132,6 @@
          <p>
            <template v-for="(brandName, key) in $options.brands">
              <CButton
-                :name="brandName"
                size="sm"
                :key="key"
                :color="brandName"
@@ -145,7 +144,6 @@
          <p>
            <template v-for="(brandName, key) in $options.brands">
              <CButton
-                :name="brandName"
                :key="key"
                :color="brandName"
              >
@@ -157,7 +155,6 @@
          <p>
            <template v-for="(brandName, key) in $options.brands">
              <CButton
-                :name="brandName"
                size="lg"
                :key="key"
                :color="brandName"
@@ -176,8 +173,8 @@
 export default {
  name: 'BrandButtons',
  usage: '<CButton color="facebook"><span>Facebook</span></CButton>',
-  iconsOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
-  textOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
+  iconsOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
+  textOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
  brands: [
    'facebook',
    'twitter',
@@ -3,7 +3,7 @@
    <CCol col="12">
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="cil-justify-center"/>
          <strong> Bootstrap button group</strong>
          <div class="card-header-actions">
            <a 
@@ -41,7 +41,7 @@
    <CCol col="12">
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="cil-justify-center"/>
          <strong> Button group </strong>sizing
        </CCardHeader>
        <CCardBody>
@@ -70,7 +70,7 @@
    <CCol col="12">
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
+          <CIcon name="cil-justify-center"/><strong> Button group </strong>dropdown support
        </CCardHeader>
        <CCardBody>
          <div>
@@ -98,7 +98,7 @@
    <CCol col="12">
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="cil-justify-center"/>
          <strong> Button group </strong>vertical variation
        </CCardHeader>
        <CCardBody>
@@ -115,7 +115,7 @@
    <CCol col="12">
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="cil-justify-center"/>
          <strong> Button toolbar </strong>
          <small>with button groups</small>
          <!-- <div class="card-header-actions">
@@ -152,17 +152,17 @@
            <CInput
              class="mb-0 w-25 mx-1"
              size="sm"
-              prepend-html="$"
-              append-html=".00"
+              append=".00"
              value="100"
+              prepend="$"
            />
            <CSelect
              class="mb-0 w-25 mx-1"
              size="sm"
-              prepend-html="Size"
              value="Medium"
              :options="['Large','Medium','Small']"
              custom
+              prepend="Size"
            />
            <CButtonGroup size="sm" class="mx-1">
              <CButton color="secondary">Save</CButton>
@@ -4,7 +4,7 @@
      <CCol col="12" md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> Bootstrap Dropdown</strong>
            <div class="card-header-actions">
              <a 
@@ -69,7 +69,7 @@
      <CCol col="12" md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> Dropdown </strong>
            <small>positioning</small>
          </CCardHeader>
@@ -140,7 +140,7 @@
      <CCol col="12" md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> Dropdown </strong>
            <small>hidden caret</small>
          </CCardHeader>
@@ -165,7 +165,7 @@
      <CCol col="12" md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> Dropdown </strong>
            <small>sizing</small>
          </CCardHeader>
@@ -222,7 +222,7 @@
      <CCol col="12" md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> Dropdown </strong>
            <small>headers and accessibility</small>
          </CCardHeader>
@@ -254,7 +254,7 @@
      <CCol col="12" md="6">
        <CCard>
          <CCardHeader>
-            <i class="fa fa-align-justify"></i>
+            <CIcon name="cil-justify-center"/>
            <strong> Dropdown </strong>
            <small><code>color</code></small>
          </CCardHeader>
@@ -119,35 +119,35 @@
      </CCardHeader>
      <CCardBody>
        <p>
-          Use <code>outline</code> prop
+          Use <code>variant="outline"</code> prop
        </p>
        <CRow class="align-items-center">
          <CCol col="12" xl class="mb-3 mb-xl-0">
            Normal
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="primary">Primary</CButton>
+            <CButton block variant="outline" color="primary">Primary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="secondary">Secondary</CButton>
+            <CButton block variant="outline" color="secondary">Secondary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="success">Success</CButton>
+            <CButton block variant="outline" color="success">Success</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="warning">Warning</CButton>
+            <CButton block variant="outline" color="warning">Warning</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="danger">Danger</CButton>
+            <CButton block variant="outline" color="danger">Danger</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="info">Info</CButton>
+            <CButton block variant="outline" color="info">Info</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="light">Light</CButton>
+            <CButton block variant="outline" color="light">Light</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="dark">Dark</CButton>
+            <CButton block variant="outline" color="dark">Dark</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
        </CRow>
@@ -156,28 +156,28 @@
            Active State
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="primary" aria-pressed="true">Primary</CButton>
+            <CButton block pressed variant="outline" color="primary" aria-pressed="true">Primary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="secondary" aria-pressed="true">Secondary</CButton>
+            <CButton block pressed variant="outline" color="secondary" aria-pressed="true">Secondary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="success" aria-pressed="true">Success</CButton>
+            <CButton block pressed variant="outline" color="success" aria-pressed="true">Success</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="warning" aria-pressed="true">Warning</CButton>
+            <CButton block pressed variant="outline" color="warning" aria-pressed="true">Warning</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="danger" aria-pressed="true">Danger</CButton>
+            <CButton block pressed variant="outline" color="danger" aria-pressed="true">Danger</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="info" aria-pressed="true">Info</CButton>
+            <CButton block pressed variant="outline" color="info" aria-pressed="true">Info</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="light" aria-pressed="true">Light</CButton>
+            <CButton block pressed variant="outline" color="light" aria-pressed="true">Light</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="dark" aria-pressed="true">Dark</CButton>
+            <CButton block pressed variant="outline" color="dark" aria-pressed="true">Dark</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
        </CRow>
@@ -186,28 +186,28 @@
            Disabled
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="primary" disabled>Primary</CButton>
+            <CButton block variant="outline" color="primary" disabled>Primary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="secondary" disabled>Secondary</CButton>
+            <CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="success" disabled>Success</CButton>
+            <CButton block variant="outline" color="success" disabled>Success</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="warning" disabled>Warning</CButton>
+            <CButton block variant="outline" color="warning" disabled>Warning</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="danger" disabled>Danger</CButton>
+            <CButton block variant="outline" color="danger" disabled>Danger</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="info" disabled>Info</CButton>
+            <CButton block variant="outline" color="info" disabled>Info</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="light" disabled>Light</CButton>
+            <CButton block variant="outline" color="light" disabled>Light</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="dark" disabled>Dark</CButton>
+            <CButton block variant="outline" color="dark" disabled>Dark</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
        </CRow>
@@ -220,35 +220,35 @@
      <CCardBody>
        <p>
          Use
-          <code>ghost</code> prop for ghost buttons.
+          <code>variant="ghost"</code> prop for ghost buttons.
        </p>
        <CRow class="align-items-center">
          <CCol col="12" xl class="mb-3 mb-xl-0">
            Normal
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="primary">Primary</CButton>
+            <CButton block variant="ghost" color="primary">Primary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="secondary">Secondary</CButton>
+            <CButton block variant="ghost" color="secondary">Secondary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="success">Success</CButton>
+            <CButton block variant="ghost" color="success">Success</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="warning">Warning</CButton>
+            <CButton block variant="ghost" color="warning">Warning</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="danger">Danger</CButton>
+            <CButton block variant="ghost" color="danger">Danger</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="info">Info</CButton>
+            <CButton block variant="ghost" color="info">Info</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="light">Light</CButton>
+            <CButton block variant="ghost" color="light">Light</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="dark">Dark</CButton>
+            <CButton block variant="ghost" color="dark">Dark</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
        </CRow>
@@ -257,28 +257,28 @@
            Active State
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="primary" aria-pressed="true">Primary</CButton>
+            <CButton block pressed variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="secondary" aria-pressed="true">Secondary</CButton>
+            <CButton block pressed variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="success" aria-pressed="true">Success</CButton>
+            <CButton block pressed variant="ghost" color="success" aria-pressed="true">Success</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="warning" aria-pressed="true">Warning</CButton>
+            <CButton block pressed variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="danger" aria-pressed="true">Danger</CButton>
+            <CButton block pressed variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="info" aria-pressed="true">Info</CButton>
+            <CButton block pressed variant="ghost" color="info" aria-pressed="true">Info</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="light" aria-pressed="true">Light</CButton>
+            <CButton block pressed variant="ghost" color="light" aria-pressed="true">Light</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="dark" aria-pressed="true">Dark</CButton>
+            <CButton block pressed variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
        </CRow>
@@ -287,28 +287,28 @@
            Disabled
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="primary" disabled>Primary</CButton>
+            <CButton block variant="ghost" color="primary" disabled>Primary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="secondary" disabled>Secondary</CButton>
+            <CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="success" disabled>Success</CButton>
+            <CButton block variant="ghost" color="success" disabled>Success</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="warning" disabled>Warning</CButton>
+            <CButton block variant="ghost" color="warning" disabled>Warning</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="danger" disabled>Danger</CButton>
+            <CButton block variant="ghost" color="danger" disabled>Danger</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="info" disabled>Info</CButton>
+            <CButton block variant="ghost" color="info" disabled>Info</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="light" disabled>Light</CButton>
+            <CButton block variant="ghost" color="light" disabled>Light</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="dark" disabled>Dark</CButton>
+            <CButton block variant="ghost" color="dark" disabled>Dark</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
        </CRow>
@@ -435,31 +435,31 @@
            Normal
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="primary" pill>Primary</CButton>
+            <CButton block color="primary" shape="pill">Primary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="secondary" pill>Secondary</CButton>
+            <CButton block color="secondary" shape="pill">Secondary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="success" pill>Success</CButton>
+            <CButton block color="success" shape="pill">Success</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="warning" pill>Warning</CButton>
+            <CButton block color="warning" shape="pill">Warning</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="danger" pill>Danger</CButton>
+            <CButton block color="danger" shape="pill">Danger</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="info" pill>Info</CButton>
+            <CButton block color="info" shape="pill">Info</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="light" pill>Light</CButton>
+            <CButton block color="light" shape="pill">Light</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="dark" pill>Dark</CButton>
+            <CButton block color="dark" shape="pill">Dark</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="link" pill>Link</CButton>
+            <CButton block color="link" shape="pill">Link</CButton>
          </CCol>
        </CRow>
        <CRow class="align-items-center mt-3">
@@ -467,31 +467,31 @@
            Active State
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="primary" pill aria-pressed="true">Primary</CButton>
+            <CButton pressed block color="primary" shape="pill" aria-pressed="true">Primary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="secondary" pill aria-pressed="true">Secondary</CButton>
+            <CButton pressed block color="secondary" shape="pill" aria-pressed="true">Secondary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="success" pill aria-pressed="true">Success</CButton>
+            <CButton pressed block color="success" shape="pill" aria-pressed="true">Success</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="warning" pill aria-pressed="true">Warning</CButton>
+            <CButton pressed block color="warning" shape="pill" aria-pressed="true">Warning</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="danger" pill aria-pressed="true">Danger</CButton>
+            <CButton pressed block color="danger" shape="pill" aria-pressed="true">Danger</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="info" pill aria-pressed="true">Info</CButton>
+            <CButton pressed block color="info" shape="pill" aria-pressed="true">Info</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="light" pill aria-pressed="true">Light</CButton>
+            <CButton pressed block color="light" shape="pill" aria-pressed="true">Light</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="dark" pill aria-pressed="true">Dark</CButton>
+            <CButton pressed block color="dark" shape="pill" aria-pressed="true">Dark</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="link" pill aria-pressed="true">Link</CButton>
+            <CButton pressed block color="link" shape="pill" aria-pressed="true">Link</CButton>
          </CCol>
        </CRow>
        <CRow class="align-items-center mt-3">
@@ -499,31 +499,31 @@
            Disabled
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="primary" pill disabled>Primary</CButton>
+            <CButton block color="primary" shape="pill" disabled>Primary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="secondary" pill disabled>Secondary</CButton>
+            <CButton block color="secondary" shape="pill" disabled>Secondary</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="success" pill disabled>Success</CButton>
+            <CButton block color="success" shape="pill" disabled>Success</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="warning" pill disabled>Warning</CButton>
+            <CButton block color="warning" shape="pill" disabled>Warning</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="danger" pill disabled>Danger</CButton>
+            <CButton block color="danger" shape="pill" disabled>Danger</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="info" pill disabled>Info</CButton>
+            <CButton block color="info" shape="pill" disabled>Info</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="light" pill disabled>Light</CButton>
+            <CButton block color="light" shape="pill" disabled>Light</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="dark" pill disabled>Dark</CButton>
+            <CButton block color="dark" shape="pill" disabled>Dark</CButton>
          </CCol>
          <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="link" pill disabled>Link</CButton>
+            <CButton block color="link" shape="pill" disabled>Link</CButton>
          </CCol>
        </CRow>
      </CCardBody>
@@ -542,16 +542,16 @@
            <CButton color="primary" size="sm">Standard Button</CButton>
          </CCol>
          <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline color="secondary" size="sm">Outline Button</CButton>
+            <CButton variant="outline" color="secondary" size="sm">Outline Button</CButton>
          </CCol>
          <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton size="sm" ghost color="success">Ghost Button</CButton>
+            <CButton size="sm" variant="ghost" color="success">Ghost Button</CButton>
          </CCol>
          <CCol col="2" class="mb-3 mb-xl-0 text-center">
            <CButton color="warning" size="sm" square>Square Button</CButton>
          </CCol>
          <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton color="danger" size="sm" pill>Pill Button</CButton>
+            <CButton color="danger" size="sm" shape="pill">Pill Button</CButton>
          </CCol>
        </CRow>
        <CRow class="align-items-center mt-3">
@@ -562,16 +562,16 @@
            <CButton color="primary">Standard Button</CButton>
          </CCol>
          <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline color="secondary">Outline Button</CButton>
+            <CButton variant="outline" color="secondary">Outline Button</CButton>
          </CCol>
          <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton ghost color="success">Ghost Button</CButton>
+            <CButton variant="ghost" color="success">Ghost Button</CButton>
          </CCol>
          <CCol col="2" class="mb-3 mb-xl-0 text-center">
            <CButton color="warning" square>Square Button</CButton>
          </CCol>
          <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton color="danger" pill>Pill Button</CButton>
+            <CButton color="danger" shape="pill">Pill Button</CButton>
          </CCol>
        </CRow>
        <CRow class="align-items-center mt-3">
@@ -582,16 +582,16 @@
            <CButton color="primary" size="lg">Standard Button</CButton>
          </CCol>
          <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline color="secondary" size="lg">Outline Button</CButton>
+            <CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
          </CCol>
          <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton ghost color="success" size="lg">Ghost Button</CButton>
+            <CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
          </CCol>
          <CCol col="2" class="mb-3 mb-xl-0 text-center">
            <CButton color="warning" size="lg" square>Square Button</CButton>
          </CCol>
          <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton color="danger" size="lg" pill>Pill Button</CButton>
+            <CButton color="danger" size="lg" shape="pill">Pill Button</CButton>
          </CCol>
        </CRow>
      </CCardBody>
@@ -604,27 +604,27 @@
        <CRow class="align-items-center">
          <CCol sm xs="12" class="text-center mt-3">
            <CButton color="primary">
-              <i class="cui-lightbulb"></i>&nbsp;Standard Button
+              <CIcon name="cil-lightbulb"/>&nbsp;Standard Button
            </CButton>
          </CCol>
          <CCol sm xs="12" class="text-center mt-3">
-            <CButton color="secondary" outline>
-              <i class="cui-lightbulb"></i>&nbsp;Outline Button
+            <CButton color="secondary" variant="outline">
+              <CIcon name="cil-lightbulb"/>&nbsp;Outline Button
            </CButton>
          </CCol>
          <CCol sm xs="12" class="text-center mt-3">
            <CButton color="success">
-              <i class="cui-lightbulb"></i>&nbsp;Ghost Button
+              <CIcon name="cil-lightbulb"/>&nbsp;Ghost Button
            </CButton>
          </CCol>
          <CCol sm xs="12" class="text-center mt-3">
            <CButton color="warning" square>
-              <i class="cui-lightbulb"></i>&nbsp;Square Button
+              <CIcon name="cil-lightbulb"/>&nbsp;Square Button
            </CButton>
          </CCol>
          <CCol sm xs="12" class="text-center mt-3">
-            <CButton color="danger" pill>
-              <i class="cui-lightbulb"></i>&nbsp;Pill Button
+            <CButton color="danger" shape="pill">
+              <CIcon name="cil-lightbulb"/>&nbsp;Pill Button
            </CButton>
          </CCol>
        </CRow>
@@ -637,22 +637,22 @@
      <CCardBody>
        <CRow>
          <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
          </CCol>
          <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
          </CCol>
          <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
          </CCol>
          <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
          </CCol>
          <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
          </CCol>
          <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
          </CCol>
        </CRow>
      </CCardBody>
@@ -680,13 +680,13 @@
            <strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
          </CCardHeader>
          <CCardBody>
-            <CButton size="lg" outline color="secondary" block>Block level button</CButton>
-            <CButton size="lg" outline color="primary" block>Block level button</CButton>
-            <CButton size="lg" outline color="success" block>Block level button</CButton>
-            <CButton size="lg" outline color="info" block>Block level button</CButton>
-            <CButton size="lg" outline color="warning" block>Block level button</CButton>
-            <CButton size="lg" outline color="danger" block>Block level button</CButton>
-            <CButton size="lg" ghost color="info" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="secondary" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="primary" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="success" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="info" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="warning" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="danger" block>Block level button</CButton>
+            <CButton size="lg" variant="ghost" color="info" block>Block level button</CButton>
          </CCardBody>
        </CCard>
      </CCol>
@@ -6,7 +6,7 @@
 </template>

 <script>
-import { CChartBar } from '@coreui/coreui-chartjs/vue'
+import { CChartBar } from '@coreui/coreui-vue-chartjs'

 export default {
  name: 'CChartBarExample',
@@ -7,7 +7,7 @@
 </template>

 <script>
-import { CChartBar } from '@coreui/coreui-chartjs/vue'
+import { CChartBar } from '@coreui/coreui-vue-chartjs'
 import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
 export default {
  name: 'CChartBarSimple',
@@ -6,7 +6,7 @@
 </template>

 <script>
-import { CChartDoughnut } from '@coreui/coreui-chartjs/vue'
+import { CChartDoughnut } from '@coreui/coreui-vue-chartjs'

 export default {
  name: 'CChartDoughnutExample',
@@ -6,7 +6,7 @@
 </template>

 <script>
-import { CChartLine } from '@coreui/coreui-chartjs/vue'
+import { CChartLine } from '@coreui/coreui-vue-chartjs'

 export default {
  name: 'CChartLineExample',
@@ -7,7 +7,7 @@
 </template>

 <script>
-import { CChartLine } from '@coreui/coreui-chartjs/vue'
+import { CChartLine } from '@coreui/coreui-vue-chartjs'
 import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
 export default {
  name: 'CChartLineSimple',
@@ -6,7 +6,7 @@
 </template>

 <script>
-import { CChartPie } from '@coreui/coreui-chartjs/vue'
+import { CChartPie } from '@coreui/coreui-vue-chartjs'

 export default {
  name: 'CChartPieExample',
@@ -10,7 +10,7 @@
 </template>

 <script>
-import { CChartPolarArea } from '@coreui/coreui-chartjs/vue'
+import { CChartPolarArea } from '@coreui/coreui-vue-chartjs'

 export default {
  name: 'CChartPolarAreaExample',
@@ -10,7 +10,7 @@
 </template>

 <script>
-import { CChartRadar } from '@coreui/coreui-chartjs/vue'
+import { CChartRadar } from '@coreui/coreui-vue-chartjs'

 export default {
  name: 'CChartRadarExample',
@@ -19,29 +19,39 @@
          <CChartLineExample/>
        </CCardBody>
      </CCard>
-      <CCard header-html="Bar Chart" body-wrapper>
-        <CChartBarExample/>
+      <CCard>
+        <CCardHeader>Bar Chart</CCardHeader>
+        <CCardBody><CChartBarExample/></CCardBody>
      </CCard>
-      <CCard header-html="Doughnut Chart" body-wrapper>
-        <CChartDoughnutExample/>
+      <CCard>
+        <CCardHeader>Doughnut Chart</CCardHeader>
+        <CCardBody><CChartDoughnutExample/></CCardBody>
      </CCard>
-      <CCard header-html="Radar Chart" body-wrapper>
-        <CChartRadarExample/>
+      <CCard>
+        <CCardHeader>Radar Chart</CCardHeader>
+        <CCardBody><CChartRadarExample/></CCardBody>
      </CCard>
-      <CCard header-html="Pie Chart" body-wrapper>
-        <CChartPieExample/>
+      <CCard>
+         <CCardHeader>Pie Chart</CCardHeader>
+        <CCardBody><CChartPieExample/></CCardBody>
      </CCard>
-      <CCard header-html="Polar Area Chart" body-wrapper>
-        <CChartPolarAreaExample/>
+      <CCard>
+        <CCardHeader>Polar Area Chart</CCardHeader>
+        <CCardBody><CChartPolarAreaExample/></CCardBody>
      </CCard>
-      <CCard header-html="Simple line chart" body-wrapper>
+      <CCard>
+        <CCardHeader>Simple line chart</CCardHeader>
+        <CCardBody>
          <CChartLineSimple border-color="success" labels="months"/>
+        </CCardBody>        
      </CCard>
-      <CCard header-html="Simple pointed chart" body-wrapper>
-        <CChartLineSimple pointed border-color="warning"/>
+      <CCard>
+        <CCardHeader>Simple pointed chart</CCardHeader>
+        <CCardBody><CChartLineSimple pointed border-color="warning"/></CCardBody>
      </CCard>
-      <CCard header-html="Simple bar chart" body-wrapper>
-        <CChartBarSimple background-color="danger"/>
+      <CCard>
+        <CCardHeader>Simple bar chart</CCardHeader>
+        <CCardBody><CChartBarSimple background-color="danger"/></CCardBody>        
      </CCard>
    </CCardGroup>
  </div>
@@ -7,7 +7,7 @@
 </template>

 <script>
-import { CChartLine } from '@coreui/coreui-chartjs/vue'
+import { CChartLine } from '@coreui/coreui-vue-chartjs'
 import { getColor, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'

 function random (min, max) {
@@ -2,7 +2,7 @@
  <div>
    <CCard>
      <CCardHeader>
-        <i class="cui-globe"></i>Font Awesome brand icons
+        <CIcon name="cil-globe-alt"/>Brand icons
      </CCardHeader>
      <CCardBody>
        <CRow class="text-center">
@@ -13,7 +13,7 @@
              sm="2"
              :key="brandName"
            >
-              <CIcon :height="42" :content="$options.brands[brandName]"/>
+              <CIcon :height="42" :content="brand"/>
              <div>{{brandName}}</div>
            </CCol>
          </template>
@@ -24,7 +24,7 @@
 </template>

 <script>
-import { iconSet as brands } from '@coreui/icons/brands'
+import { brandSet as brands } from '@coreui/icons'
 export default {
  name: 'Brands',
  brands
@@ -1,8 +1,9 @@
+
 <template>
  <div>
    <CCard>
      <CCardHeader>
-        <i class="cui-pencil"></i>CoreUI Icons
+        <CIcon :content="$options.freeSet.pencil"/>CoreUI Icons
        <CBadge color="info">New</CBadge>
        <div class="card-header-actions">
          <a
@@ -16,427 +17,28 @@
        </div>
      </CCardHeader>
      <CCardBody>
-        <!-- <CRow class="text-center mb-5">
-          <template v-for="(name, key) in $options.iconNames">
-            <CCol :key="key" col="6" sm="4" md="3" xl="2">
-              <CIcon :name="name" width="24" class="mt-4"/>
-              <div>{{name}}</div>
+        <CRow class="text-center">
+          <template v-for="(icon, iconName) in $options.freeSet">
+            <CCol
+              class="mb-5"
+              col="3"
+              sm="2"
+              :key="iconName"
+            >
+              <CIcon :height="42" :content="icon"/>
+              <div>{{iconName}}</div>
            </CCol>
          </template>
        </CRow>
-         -->
-        <CRow class="text-center ">
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-account-logout icons font-2xl d-block mt-4"></i>
-            <div>account-logout</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-action-redo icons font-2xl d-block mt-4"></i>
-            <div>action-redo</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-action-undo icons font-2xl d-block mt-4"></i>
-            <div>action-undo</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-center icons font-2xl d-block mt-4"></i>
-            <div>align-center</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-left icons font-2xl d-block mt-4"></i>
-            <div>align-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-right icons font-2xl d-block mt-4"></i>
-            <div>align-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
-            <div>arrow-bottom</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
-            <div>arrow-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
-            <div>arrow-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
-            <div>arrow-top</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-ban icons font-2xl d-block mt-4"></i>
-            <div>ban</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
-            <div>basket-loaded</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bell icons font-2xl d-block mt-4"></i>
-            <div>bell</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bold icons font-2xl d-block mt-4"></i>
-            <div>bold</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bookmark icons font-2xl d-block mt-4"></i>
-            <div>bookmark</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-briefcase icons font-2xl d-block mt-4"></i>
-            <div>briefcase</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-british-pound icons font-2xl d-block mt-4"></i>
-            <div>british-pound</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-brush icons font-2xl d-block mt-4"></i>
-            <div>brush</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-calculator icons font-2xl d-block mt-4"></i>
-            <div>calculator</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-calendar icons font-2xl d-block mt-4"></i>
-            <div>calendar</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cart icons font-2xl d-block mt-4"></i>
-            <div>cart</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chart icons font-2xl d-block mt-4"></i>
-            <div>chart</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-check icons font-2xl d-block mt-4"></i>
-            <div>check</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
-            <div>chevron-bottom</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
-            <div>chevron-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
-            <div>chevron-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
-            <div>chevron-top</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-circle-check icons font-2xl d-block mt-4"></i>
-            <div>circle-check</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-circle-x icons font-2xl d-block mt-4"></i>
-            <div>circle-x</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud icons font-2xl d-block mt-4"></i>
-            <div>cloud</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
-            <div>cloud-download</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
-            <div>cloud-upload</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-code icons font-2xl d-block mt-4"></i>
-            <div>code</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cog icons font-2xl d-block mt-4"></i>
-            <div>cog</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-comment-square icons font-2xl d-block mt-4"></i>
-            <div>comment-square</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-credit-card icons font-2xl d-block mt-4"></i>
-            <div>credit-card</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cursor icons font-2xl d-block mt-4"></i>
-            <div>cursor</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-dashboard icons font-2xl d-block mt-4"></i>
-            <div>dashboard</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-delete icons font-2xl d-block mt-4"></i>
-            <div>delete</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-dollar icons font-2xl d-block mt-4"></i>
-            <div>dollar</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-drop icons font-2xl d-block mt-4"></i>
-            <div>drop</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
-            <div>envelope-closed</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
-            <div>envelope-letter</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
-            <div>envelope-open</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-euro icons font-2xl d-block mt-4"></i>
-            <div>euro</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-file icons font-2xl d-block mt-4"></i>
-            <div>file</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-globe icons font-2xl d-block mt-4"></i>
-            <div>globe</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-graph icons font-2xl d-block mt-4"></i>
-            <div>graph</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-home icons font-2xl d-block mt-4"></i>
-            <div>home</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-inbox icons font-2xl d-block mt-4"></i>
-            <div>inbox</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-info icons font-2xl d-block mt-4"></i>
-            <div>info</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-italic icons font-2xl d-block mt-4"></i>
-            <div>italic</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-center icons font-2xl d-block mt-4"></i>
-            <div>justify-center</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-left icons font-2xl d-block mt-4"></i>
-            <div>justify-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-right icons font-2xl d-block mt-4"></i>
-            <div>justify-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-laptop icons font-2xl d-block mt-4"></i>
-            <div>laptop</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-layers icons font-2xl d-block mt-4"></i>
-            <div>layers</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
-            <div>lightbulb</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-list icons font-2xl d-block mt-4"></i>
-            <div>list</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-location-pin icons font-2xl d-block mt-4"></i>
-            <div>location-pin</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
-            <div>lock-locked</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
-            <div>lock-unlocked</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
-            <div>magnifying-glass</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-map icons font-2xl d-block mt-4"></i>
-            <div>map</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-monitor icons font-2xl d-block mt-4"></i>
-            <div>monitor</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-moon icons font-2xl d-block mt-4"></i>
-            <div>moon</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-note icons font-2xl d-block mt-4"></i>
-            <div>note</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-options icons font-2xl d-block mt-4"></i>
-            <div>options</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-paperclip icons font-2xl d-block mt-4"></i>
-            <div>paperclip</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-pencil icons font-2xl d-block mt-4"></i>
-            <div>pencil</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-people icons font-2xl d-block mt-4"></i>
-            <div>people</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-phone icons font-2xl d-block mt-4"></i>
-            <div>phone</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
-            <div>pie-chart</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-print icons font-2xl d-block mt-4"></i>
-            <div>print</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-puzzle icons font-2xl d-block mt-4"></i>
-            <div>puzzle</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-rss icons font-2xl d-block mt-4"></i>
-            <div>rss</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
-            <div>screen-desktop</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
-            <div>screen-smartphone</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-settings icons font-2xl d-block mt-4"></i>
-            <div>settings</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-share icons font-2xl d-block mt-4"></i>
-            <div>share</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-shield icons font-2xl d-block mt-4"></i>
-            <div>shield</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
-            <div>sort-ascending</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
-            <div>sort-descending</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-speech icons font-2xl d-block mt-4"></i>
-            <div>speech</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-speedometer icons font-2xl d-block mt-4"></i>
-            <div>speedometer</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-star icons font-2xl d-block mt-4"></i>
-            <div>star</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sun icons font-2xl d-block mt-4"></i>
-            <div>sun</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-tablet icons font-2xl d-block mt-4"></i>
-            <div>tablet</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-tags icons font-2xl d-block mt-4"></i>
-            <div>tags</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-task icons font-2xl d-block mt-4"></i>
-            <div>task</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
-            <div>thumb-down</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
-            <div>thumb-up</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-trash icons font-2xl d-block mt-4"></i>
-            <div>trash</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-underline icons font-2xl d-block mt-4"></i>
-            <div>underline</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user icons font-2xl d-block mt-4"></i>
-            <div>user</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-female icons font-2xl d-block mt-4"></i>
-            <div>user-female</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-follow icons font-2xl d-block mt-4"></i>
-            <div>user-follow</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
-            <div>user-unfollow</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-wrench icons font-2xl d-block mt-4"></i>
-            <div>wrench</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-yen icons font-2xl d-block mt-4"></i>
-            <div>yen</div>
-          </CCol>
-        </CRow>
      </CCardBody>
    </CCard>
  </div>
 </template>
-<script>
-// import { iconSet } from '@coreui/icons'
-// const iconNames = Object.keys(iconSet)

+<script>
+import { freeSet } from '@coreui/icons'
 export default {
  name: 'CoreUIIcons',
-  // iconNames,
+  freeSet
 }
 </script>
@@ -2,7 +2,7 @@
  <div>
    <CCard>
      <CCardHeader>
-        <i class="cui-globe"></i> Flags
+        <CIcon name="cil-globe-alt"/> Flags
      </CCardHeader>
      <CCardBody>
        <CRow class="text-center">
@@ -20,8 +20,8 @@
              sm="2"
              :key="key"
            >
-              <CIcon :height="42" :content="$options.iconSet[flag]"/>
-              <div>{{flag}}</div>
+              <CIcon :height="42" :content="flag"/>
+              <div>{{key}}</div>
            </CCol>
          </template>
        </CRow>
@@ -31,15 +31,15 @@
 </template>

 <script>
-import { iconSet } from '@coreui/icons/flags'
+import { flagSet } from '@coreui/icons'
 export default {
  name: 'Flags',
-  iconSet,
+  flagSet,
  computed: {
    // Avoid duplication caused by displaying 1x1 and 4x3 formats
    // (adding Q to name makes icon quadratic)
    displayedFlags () {
-      return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
+      return this.$options.flagSet
    }
  }
 }
@@ -3,7 +3,7 @@
    <CCol col="12" md="6">
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="cil-justify-center"/>
          <strong> Bootstrap Alert</strong>
          <div class="card-header-actions">
            <a 
@@ -34,7 +34,7 @@
    <CCol col="12" md="6">
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i> Alert
+          <CIcon name="cil-justify-center"/> Alert
          <small> use <code>.alert-link</code> to provide links</small>
        </CCardHeader>
        <CCardBody>
@@ -72,7 +72,7 @@
    <CCol col="12" md="6">
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
+          <CIcon name="cil-justify-center"/> Alerts <small>with additional content</small>
        </CCardHeader>
        <CCardBody>
          <CAlert show color="success">
@@ -93,7 +93,7 @@
    <CCol col="12" md="6">
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i> Alerts
+          <CIcon name="cil-justify-center"/> Alerts
          <small>dismissible</small>
        </CCardHeader>
        <CCardBody>
@@ -107,16 +107,7 @@

          <CAlert
            color="secondary"
-            closeButton
-            fade
            :show.sync="alert2"
-          >
-            Dismissible Alert with fade effect!
-          </CAlert>
-
-          <CAlert
-            color="secondary"
-            :show.sync="alert3"
            class="alert-dismissible"
          >
            Dismissible Alert with custom button!
@@ -124,7 +115,7 @@
              class="position-absolute"
              color="secondary"
              style="right:10px;top: 50%;transform: translateY(-50%);"
-              @click="alert3 = false"
+              @click="alert2 = false"
            >
              Close
            </CButton>
@@ -140,7 +131,7 @@
      </CCard>
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i> Alerts
+          <CIcon name="cil-justify-center"/> Alerts
          <small>auto dismissible</small>
        </CCardHeader>
        <CCardBody>
@@ -186,8 +177,7 @@ export default {
      dismissSecs: 10,
      dismissCountDown: 10,
      alert1: true,
-      alert2: true,
-      alert3: true
+      alert2: true
    }
  },
  methods: {
@@ -3,7 +3,7 @@
    <CCol col="12" md="6">
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i>
+          <CIcon name="cil-justify-center"/>
          <strong> Bootstrap Badge</strong>
          <div class="card-header-actions">
            <a 
@@ -34,7 +34,7 @@
    <CCol col="12" md="6">
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i> Badge
+          <CIcon name="cil-justify-center"/> Badge
          <small>contextual variations</small>
        </CCardHeader>
        <CCardBody>
@@ -50,23 +50,23 @@
      </CCard>
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i> Badge
-          <small>pills</small>
+          <CIcon name="cil-justify-center"/> Badge
+          <small>shape="pill"</small>
        </CCardHeader>
        <CCardBody>
-          <CBadge pill color="primary">Primary</CBadge>
-          <CBadge pill color="secondary">Secondary</CBadge>
-          <CBadge pill color="success">Success</CBadge>
-          <CBadge pill color="danger">Danger</CBadge>
-          <CBadge pill color="warning">Warning</CBadge>
-          <CBadge pill color="info">Info</CBadge>
-          <CBadge pill color="light">Light</CBadge>
-          <CBadge pill color="dark">Dark</CBadge>
+          <CBadge shape="pill" color="primary">Primary</CBadge>
+          <CBadge shape="pill" color="secondary">Secondary</CBadge>
+          <CBadge shape="pill" color="success">Success</CBadge>
+          <CBadge shape="pill" color="danger">Danger</CBadge>
+          <CBadge shape="pill" color="warning">Warning</CBadge>
+          <CBadge shape="pill" color="info">Info</CBadge>
+          <CBadge shape="pill" color="light">Light</CBadge>
+          <CBadge shape="pill" color="dark">Dark</CBadge>
        </CCardBody>
      </CCard>
      <CCard>
        <CCardHeader>
-          <i class="fa fa-align-justify"></i> Badge
+          <CIcon name="cil-justify-center"/> Badge
          <small>actionable</small>
        </CCardHeader>
        <CCardBody>
@@ -5,7 +5,7 @@
        <CCol col="12">
          <CCard>
            <CCardHeader>
-              <i class="fa fa-align-justify"></i> Bootstrap Modals
+              <CIcon name="cil-justify-center"/> Bootstrap Modals
              <div class="card-header-actions">
                <a 
                  href="https://coreui.io/vue/docs/3.0/components/Modal" 
@@ -91,6 +91,7 @@
    <CModal
      title="Modal title"
      :show.sync="primaryModal"
+      color="primary"
    >
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -9,16 +9,18 @@
                <h1>Login</h1>
                <p class="text-muted">Sign In to your account</p>
                <CInput
-                  prependHtml="<i class='cui-user'></i>"
                  placeholder="Username"
                  autocomplete="username email"
-                />
+                >
+                  <template #prepend-content><CIcon name="cil-user"/></template>
+                </CInput>
                <CInput
-                  prependHtml="<i class='cui-lock-locked'></i>"
                  placeholder="Password"
                  type="password"
                  autocomplete="curent-password"
-                />
+                >
+                  <template #prepend-content><CIcon name="cil-lock-locked"/></template>
+                </CInput>
                <CRow>
                  <CCol col="6">
                    <CButton color="primary" class="px-4">Login</CButton>
@@ -31,7 +33,9 @@
            </CCardBody>
          </CCard>
          <CCard
-            class="text-white text-center bg-primary py-5 d-md-down-none"
+            color="primary"
+            text-color="white"
+            class="text-center py-5 d-md-down-none"
            style="width:44%"
            body-wrapper
          >
@@ -10,9 +10,9 @@
        </div>
        <CInput
          class="mb-3"
-          prependHtml="<i class='cui-magnifying-glass'></i>"
          placeholder="What are you looking for?"
        >
+          <template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
          <template #append>
            <CButton color="info">Search</CButton>
          </template>
@@ -9,9 +9,9 @@
        </div>
        <CInput
          class="mb-3"
-          prependHtml="<i class='cui-magnifying-glass'></i>"
          placeholder="What are you looking for?"
        >
+          <template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
          <template #append>
            <CButton color="info">Search</CButton>
          </template>
@@ -9,27 +9,30 @@
              <p class="text-muted">Create your account</p>
              <CInput
                placeholder="Username"
-                prependHtml="<i class='cui-user'></i>"
                autocomplete="username"
-              />
+              >
+                <template #prepend-content><CIcon name="cil-user"/></template>
+              </CInput>
              <CInput
                placeholder="Email"
-                prepend-html="@"
                autocomplete="email"
+                prepend="@"
              />
              <CInput
                placeholder="Password"
                type="password"
-                prependHtml="<i class='cui-lock-locked'></i>"
                autocomplete="new-password"
-              />
+              >
+                <template #prepend-content><CIcon name="cil-lock-locked"/></template>
+              </CInput>
              <CInput
                placeholder="Repeat password"
                type="password"
-                prependHtml="<i class='cui-lock-locked'></i>"
                autocomplete="new-password"
                class="mb-4"
-              />
+              >
+                <template #prepend-content><CIcon name="cil-lock-locked"/></template>
+              </CInput>
              <CButton color="success" block>Create Account</CButton>
            </CForm>
          </CCardBody>
@@ -2,7 +2,7 @@
  <div>
    <CCard>
      <CCardHeader>
-        <i class="cui-drop"></i> Theme colors
+        <CIcon name="cil-drop"/> Theme colors
      </CCardHeader>
      <CCardBody>
        <CRow>
@@ -21,7 +21,7 @@
    </CCard>
    <CCard>
      <CCardHeader>
-        <i class="cui-drop"></i> Grays
+        <CIcon name="cil-drop"/> Grays
      </CCardHeader>
      <CCardBody>
        <CRow>
@@ -6,7 +6,7 @@
          User id:  {{ $route.params.id }}
        </CCardHeader>
        <CCardBody>
-          <CTable
+          <CDataTable
            striped
            small
            fixed
@@ -2,8 +2,12 @@
  <CRow>
    <CCol col="12" xl="8">
      <transition name="slide">
-        <CCard header-html="Users" body-wrapper>
-          <CTable
+        <CCard>
+          <CCardHeader>
+            Users
+          </CCardHeader>
+          <CCardBody>
+            <CDataTable
              hover
              striped
              :items="items"
@@ -27,7 +31,8 @@
                  </CBadge>
                </td>
              </template>
-          </CTable>
+            </CDataTable>
+          </CCardBody>
        </CCard>
      </transition>
    </CCol>
@@ -103,7 +103,7 @@
          text="Income"
          color="primary"
        >
-          <CIcon name="settings" width="24"/>
+          <CIcon name="cil-settings" width="24"/>
        </CWidgetIcon>
      </CCol>
      <CCol col="12" sm="6" lg="3">
@@ -112,7 +112,7 @@
          text="Income"
          color="info"
        >
-          <CIcon name="laptop" width="24"/>
+          <CIcon name="cil-laptop" width="24"/>
        </CWidgetIcon>
      </CCol>
      <CCol col="12" sm="6" lg="3">
@@ -121,7 +121,7 @@
          text="Income"
          color="warning"
        >
-          <CIcon name="moon" width="24"/>
+          <CIcon name="cil-moon" width="24"/>
        </CWidgetIcon>
      </CCol>
      <CCol col="12" sm="6" lg="3">
@@ -130,7 +130,7 @@
          text="Income"
          color="danger"
        >
-          <CIcon name="bell" width="24"/>
+          <CIcon name="cil-bell" width="24"/>
        </CWidgetIcon>
      </CCol>
    </CRow>
@@ -142,7 +142,7 @@
          color="primary"
          :icon-padding="false"
        >
-          <CIcon name="settings" width="24"/>
+          <CIcon name="cil-settings" width="24"/>
        </CWidgetIcon>
      </CCol>
      <CCol col="12" sm="6" lg="3">
@@ -152,7 +152,7 @@
          color="info"
          :icon-padding="false"
        >
-          <CIcon name="laptop" width="24"/>
+          <CIcon name="cil-laptop" width="24"/>
        </CWidgetIcon>
      </CCol>
      <CCol col="12" sm="6" lg="3">
@@ -162,7 +162,7 @@
          color="warning"
          :icon-padding="false"
        >
-          <CIcon name="moon" width="24"/>
+          <CIcon name="cil-moon" width="24"/>
        </CWidgetIcon>
      </CCol>
      <CCol col="12" sm="6" lg="3">
@@ -172,7 +172,7 @@
          color="danger"
          :icon-padding="false"
        >
-          <CIcon name="bell" width="24"/>
+          <CIcon name="cil-bell" width="24"/>
        </CWidgetIcon>
      </CCol>
    </CRow>
@@ -184,7 +184,7 @@
          color="primary"
          :icon-padding="false"
        >
-          <CIcon name="settings" class="mx-5 " width="24"/>
+          <CIcon name="cil-settings" class="mx-5 " width="24"/>
        </CWidgetIcon>
      </CCol>
      <CCol col="12" sm="6" lg="4">
@@ -194,7 +194,7 @@
          color="info"
          :icon-padding="false"
        >
-          <CIcon name="laptop" class="mx-5 " width="24"/>
+          <CIcon name="cil-laptop" class="mx-5 " width="24"/>
        </CWidgetIcon>
      </CCol>
      <CCol col="12" sm="6" lg="4">
@@ -204,7 +204,7 @@
          color="warning"
          :icon-padding="false"
        >
-          <CIcon name="moon" class="mx-5 " width="24"/>
+          <CIcon name="cil-moon" class="mx-5 " width="24"/>
          <template #footer>
            <CCardFooter class="card-footer px-3 py-2">
              <CLink
@@ -212,7 +212,7 @@
                href="https://coreui.io/"
              >
                View more
-                <CIcon name="arrowRight" class="float-right" width="16"/>
+                <CIcon name="cil-arrowRight" class="float-right" width="16"/>
              </CLink>
            </CCardFooter>
          </template>
@@ -228,7 +228,7 @@
          :icon-padding="false"
          link="#"
        >
-          <CIcon name="settings" class="mx-5 " width="24"/>
+          <CIcon name="cil-settings" class="mx-5 " width="24"/>
        </CWidgetIcon>
      </CCol>
      <CCol col="12" sm="6" lg="4">
@@ -239,7 +239,7 @@
          :icon-padding="false"
          link="#"
        >
-          <CIcon name="laptop" class="mx-5 " width="24"/>
+          <CIcon name="cil-laptop" class="mx-5 " width="24"/>
        </CWidgetIcon>
      </CCol>
      <CCol col="12" sm="6" lg="4">
@@ -250,7 +250,7 @@
          :icon-padding="false"
          link="#"
        >
-          <CIcon name="moon" class="mx-5" width="24"/>
+          <CIcon name="cil-moon" class="mx-5" width="24"/>
        </CWidgetIcon>
      </CCol>
    </CRow> -->
@@ -262,34 +262,34 @@
        text="Visitors"
        color="info"
      >
-        <CIcon name="people" height="36"/>
+        <CIcon name="cil-people" height="36"/>
      </CWidgetProgressIcon>
      <CWidgetProgressIcon
        header="385"
        text="New Clients"
        color="success"
      >
-        <CIcon name="userFollow" height="36"/>
+        <CIcon name="cil-userFollow" height="36"/>
      </CWidgetProgressIcon>
      <CWidgetProgressIcon
        header="1238"
        text="Products sold"
        color="warning"
      >
-        <CIcon name="basketLoaded" height="36"/>
+        <CIcon name="cil-basket" height="36"/>
      </CWidgetProgressIcon>
      <CWidgetProgressIcon
        header="28%"
        text="Returning Visitors"
      >
-        <CIcon name="chartPie" height="36"/>
+        <CIcon name="cil-chartPie" height="36"/>
      </CWidgetProgressIcon>
      <CWidgetProgressIcon
        header="5:34:11"
        text="Avg. Time"
        color="danger"
      >
-        <CIcon name="speedometer" height="36"/>
+        <CIcon name="cil-speedometer" height="36"/>
      </CWidgetProgressIcon>
    </CCardGroup>
    <CCardGroup class="mb-4">
@@ -299,7 +299,7 @@
        color="info"
        inverse
      >
-        <CIcon name="people" height="36"/>
+        <CIcon name="cil-people" height="36"/>
      </CWidgetProgressIcon>
      <CWidgetProgressIcon
        header="385"
@@ -307,7 +307,7 @@
        color="success"
        inverse
      >
-        <CIcon name="userFollow" height="36"/>
+        <CIcon name="cil-userFollow" height="36"/>
      </CWidgetProgressIcon>
      <CWidgetProgressIcon
        header="1238"
@@ -315,7 +315,7 @@
        color="warning"
        inverse
      >
-        <CIcon name="basketLoaded" height="36"/>
+        <CIcon name="cil-basket" height="36"/>
      </CWidgetProgressIcon>
      <CWidgetProgressIcon
        header="28%"
@@ -323,7 +323,7 @@
        color="primary"
        inverse
      >
-        <CIcon name="chartPie" height="36"/>
+        <CIcon name="cil-chartPie" height="36"/>
      </CWidgetProgressIcon>
      <CWidgetProgressIcon
        header="5:34:11"
@@ -331,7 +331,7 @@
        color="danger"
        inverse
      >
-        <CIcon name="speedometer" height="36"/>
+        <CIcon name="cil-speedometer" height="36"/>
      </CWidgetProgressIcon>
    </CCardGroup>
    <CRow>
@@ -341,7 +341,7 @@
          text="Visitors"
          color="info"
        >
-          <CIcon name="people" height="36"/>
+          <CIcon name="cil-people" height="36"/>
        </CWidgetProgressIcon>
      </CCol>
      <CCol sm="6" md="2">
@@ -350,7 +350,7 @@
          text="New Clients"
          color="success"
        >
-          <CIcon name="userFollow" height="36"/>
+          <CIcon name="cil-userFollow" height="36"/>
        </CWidgetProgressIcon>
      </CCol>
      <CCol sm="6" md="2">
@@ -359,7 +359,7 @@
          text="Products sold"
          color="warning"
        >
-          <CIcon name="basketLoaded" height="36"/>
+          <CIcon name="cil-basket" height="36"/>
        </CWidgetProgressIcon>
      </CCol>
      <CCol sm="6" md="2">
@@ -368,7 +368,7 @@
          text="Returning Visitors"
          color="primary"
        >
-          <CIcon name="chartPie" height="36"/>
+          <CIcon name="cil-chartPie" height="36"/>
        </CWidgetProgressIcon>
      </CCol>
      <CCol sm="6" md="2">
@@ -377,7 +377,7 @@
          text="Avg. Time"
          color="danger"
        >
-          <CIcon name="speedometer" height="36"/>
+          <CIcon name="cil-speedometer" height="36"/>
        </CWidgetProgressIcon>
      </CCol>
      <CCol sm="6" md="2">
@@ -386,7 +386,7 @@
          text="comments"
          color="info"
        >
-          <CIcon name="speech" height="36"/>
+          <CIcon name="cil-speech" height="36"/>
        </CWidgetProgressIcon>
      </CCol>
    </CRow>
@@ -398,7 +398,7 @@
          color="info"
          inverse
        >
-          <CIcon name="people" height="36"/>
+          <CIcon name="cil-people" height="36"/>
        </CWidgetProgressIcon>
      </CCol>
      <CCol sm="6" md="2">
@@ -408,7 +408,7 @@
          color="success"
          inverse
        >
-          <CIcon name="userFollow" height="36"/>
+          <CIcon name="cil-userFollow" height="36"/>
        </CWidgetProgressIcon>
      </CCol>
      <CCol sm="6" md="2">
@@ -418,7 +418,7 @@
          color="warning"
          inverse
        >
-          <CIcon name="basketLoaded" height="36"/>
+          <CIcon name="cil-basket" height="36"/>
        </CWidgetProgressIcon>
      </CCol>
      <CCol sm="6" md="2">
@@ -428,7 +428,7 @@
          color="primary"
          inverse
        >
-          <CIcon name="chartPie" height="36"/>
+          <CIcon name="cil-chartPie" height="36"/>
        </CWidgetProgressIcon>
      </CCol>
      <CCol sm="6" md="2">
@@ -438,7 +438,7 @@
          color="danger"
          inverse
        >
-          <CIcon name="speedometer" height="36"/>
+          <CIcon name="cil-speedometer" height="36"/>
        </CWidgetProgressIcon>
      </CCol>
      <CCol sm="6" md="2">
@@ -448,61 +448,11 @@
          color="info"
          inverse
        >
-          <CIcon name="speech" height="36"/>
+          <CIcon name="cil-speech" height="36"/>
        </CWidgetProgressIcon>
      </CCol>
    </CRow>
    <WidgetsDropdown/>
-    <CRow>
-      <CCol sm="6" lg="3">
-        <CWidgetHeaderDetails
-          color="primary"
-          right-header="SALE"
-          right-footer="Today 6:43 AM"
-          left-header="$1.890,65"
-          left-footer="+432,50 (15,78%)"
-        >
-          <CChartLineSimple style="height:40px"/>
-          <CChartBarSimple style="height:40px"/>
-        </CWidgetHeaderDetails>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidgetHeaderDetails
-          color="success"
-          right-header="SALE"
-          right-footer="Today 6:43 AM"
-          left-header="$1.890,65"
-          left-footer="+432,50 (15,78%)"
-        >
-          <CChartLineSimple style="height:40px"/>
-          <CChartBarSimple style="height:40px"/>
-        </CWidgetHeaderDetails>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidgetHeaderDetails
-          color="danger"
-          right-header="SALE"
-          right-footer="Today 6:43 AM"
-          left-header="$1.890,65"
-          left-footer="+432,50 (15,78%)"
-        >
-          <CChartLineSimple style="height:40px"/>
-          <CChartBarSimple style="height:40px"/>
-        </CWidgetHeaderDetails>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidgetHeaderDetails
-          color="warning"
-          right-header="SALE"
-          right-footer="Today 6:43 AM"
-          left-header="$1.890,65"
-          left-footer="+432,50 (15,78%)"
-        >
-          <CChartLineSimple style="height:40px"/>
-          <CChartBarSimple style="height:40px"/>
-        </CWidgetHeaderDetails>
-      </CCol>
-    </CRow>
    <CRow>
      <CCol sm="4" lg="2">
        <CWidgetSimple header="title" text="1,123">
@@ -10,7 +10,7 @@
          left-footer="feeds"
        >
          <CIcon
-            name="facebook"
+            name="cib-facebook"
            height="52"
            class="my-4"
          />
@@ -32,7 +32,7 @@
          left-footer="tweets"
        >
          <CIcon
-            name="twitter"
+            name="cib-twitter"
            height="52"
            class="my-4"
          />
@@ -54,7 +54,7 @@
          left-footer="feeds"
        >
          <CIcon
-            name="linkedin"
+            name="cib-linkedin"
            height="52"
            class="my-4"
          />
@@ -76,7 +76,7 @@
          color="warning"
        >
          <CIcon
-            name="calendar"
+            name="cil-calendar"
            height="52"
            class="my-4"
          />
@@ -100,7 +100,7 @@
          left-footer="feeds"
        >
          <CIcon
-            name="facebook"
+            name="cib-facebook"
            height="56"
            class="my-4"
          />
@@ -115,7 +115,7 @@
          left-footer="tweets"
        >
          <CIcon
-            name="twitter"
+            name="cib-twitter"
            height="56"
            class="my-4"
          />
@@ -130,7 +130,7 @@
          left-footer="feeds"
        >
          <CIcon
-            name="linkedin"
+            name="cib-linkedin"
            height="56"
            class="my-4"
          />
@@ -145,7 +145,7 @@
          color="warning"
        >
          <CIcon
-            name="calendar"
+            name="cil-calendar"
            height="56"
            class="my-4"
          />
@@ -9,7 +9,7 @@
            placement="bottom-end"
          >
            <template #toggler-content>
-              <i class="cui-settings"></i>
+              <CIcon name="cil-settings"/>
            </template>
            <CDropdownItem>Action</CDropdownItem>
            <CDropdownItem>Another action</CDropdownItem>
@@ -38,10 +38,9 @@
            color="transparent p-0"
            placement="bottom-end"
            :caret="false"
-            buttonHtml="<i class='cui-location-pin'></i>"
          >
            <template #toggler-content>
-              <i class="cui-location-pin"></i>
+              <CIcon name="cil-location-pin"/>
            </template>
            <CDropdownItem>Action</CDropdownItem>
            <CDropdownItem>Another action</CDropdownItem>
@@ -76,7 +75,7 @@
            placement="bottom-end"
          >
            <template #toggler-content>
-              <i class="cui-settings"></i>
+              <CIcon name="cil-settings"/>
            </template>
            <CDropdownItem>Action</CDropdownItem>
            <CDropdownItem>Another action</CDropdownItem>
@@ -110,7 +109,7 @@
            placement="bottom-end"
          >
            <template #toggler-content>
-             <i class="cui-settings"></i>
+             <CIcon name="cil-settings"/>
            </template>
            <CDropdownItem>Action</CDropdownItem>
            <CDropdownItem>Another action</CDropdownItem>
@@ -33,42 +33,54 @@ exports[`TheHeader.vue renders correctly 1`] = `
    class="d-md-down-none mr-auto"
  >
    <cheadernavitem-stub
-      activeclass="active"
      class="px-3"
-      event="click"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
      to="/dashboard"
    >
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        target="_self"
+      >
+        
        Dashboard
+      
+      </cheadernavlink-stub>
    </cheadernavitem-stub>
     
    <cheadernavitem-stub
-      activeclass="active"
      class="px-3"
-      event="click"
-      exact="true"
-      exactactiveclass="active"
-      routertag="a"
-      tag="span"
-      target="_self"
+      exact=""
      to="/users"
    >
-      Users
-    </cheadernavitem-stub>
-     
-    <cheadernavitem-stub
+      <cheadernavlink-stub
        activeclass="active"
-      class="px-3"
        event="click"
        exactactiveclass="active"
        routertag="a"
-      tag="span"
        target="_self"
      >
+        
+        Users
+      
+      </cheadernavlink-stub>
+    </cheadernavitem-stub>
+     
+    <cheadernavitem-stub
+      class="px-3"
+    >
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        target="_self"
+      >
+        
        Settings
+      
+      </cheadernavlink-stub>
    </cheadernavitem-stub>
  </cheadernav-stub>
   
@@ -76,45 +88,51 @@ exports[`TheHeader.vue renders correctly 1`] = `
    class="mr-4"
  >
    <cheadernavitem-stub
-      activeclass="active"
      class="d-md-down-none mx-2"
+    >
+      <cheadernavlink-stub
+        activeclass="active"
        event="click"
        exactactiveclass="active"
        routertag="a"
-      tag="span"
        target="_self"
      >
-      <i
-        class="cui-bell"
+        <cicon-stub
+          name="cil-bell"
        />
+      </cheadernavlink-stub>
    </cheadernavitem-stub>
     
    <cheadernavitem-stub
-      activeclass="active"
      class="d-md-down-none mx-2"
+    >
+      <cheadernavlink-stub
+        activeclass="active"
        event="click"
        exactactiveclass="active"
        routertag="a"
-      tag="span"
        target="_self"
      >
-      <i
-        class="cui-list"
+        <cicon-stub
+          name="cil-list"
        />
+      </cheadernavlink-stub>
    </cheadernavitem-stub>
     
    <cheadernavitem-stub
-      activeclass="active"
      class="d-md-down-none mx-2"
+    >
+      <cheadernavlink-stub
+        activeclass="active"
        event="click"
        exactactiveclass="active"
        routertag="a"
-      tag="span"
        target="_self"
      >
-      <i
-        class="cui-envelope-open"
+        <cicon-stub
+          name="cil-envelope-open"
        />
+      </cheadernavlink-stub>
    </cheadernavitem-stub>
     
    <theheaderdropdownaccnt-stub />
@@ -6,8 +6,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
  caret="true"
  class="c-header-nav-items"
  flip="true"
-  nav=""
-  no-caret=""
+  innav="true"
  placement="bottom-end"
  togglertext="Dropdown"
 >
@@ -29,8 +28,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
    routertag="a"
    target="_self"
  >
-    <i
-      class="cui-bell mr-2"
+    <cicon-stub
+      name="cil-bell"
    />
     Updates
    
@@ -55,8 +54,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
    routertag="a"
    target="_self"
  >
-    <i
-      class="cui-envelope-open mr-2"
+    <cicon-stub
+      name="cil-envelope-open"
    />
     Messages
    
@@ -81,8 +80,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
    routertag="a"
    target="_self"
  >
-    <i
-      class="cui-task mr-2"
+    <cicon-stub
+      name="cil-task"
    />
     Tasks
    
@@ -107,8 +106,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
    routertag="a"
    target="_self"
  >
-    <i
-      class="cui-comment-square mr-2"
+    <cicon-stub
+      name="cil-comment-square"
    />
     Comments
    
@@ -143,8 +142,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
    routertag="a"
    target="_self"
  >
-    <i
-      class="cui-user mr-2"
+    <cicon-stub
+      name="cil-user"
    />
     Profile
  
@@ -157,8 +156,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
    routertag="a"
    target="_self"
  >
-    <i
-      class="cui-wrench mr-2"
+    <cicon-stub
+      name="cil-settings"
    />
     Settings
  
@@ -171,8 +170,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
    routertag="a"
    target="_self"
  >
-    <i
-      class="cui-dollar mr-2"
+    <cicon-stub
+      name="cil-dollar"
    />
     Payments
    
@@ -197,8 +196,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
    routertag="a"
    target="_self"
  >
-    <i
-      class="cui-file mr-2"
+    <cicon-stub
+      name="cil-file"
    />
     Projects
    
@@ -227,8 +226,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
    routertag="a"
    target="_self"
  >
-    <i
-      class="cui-shield mr-2"
+    <cicon-stub
+      name="cil-shield-alt"
    />
     Lock Account
  
@@ -241,8 +240,8 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
    routertag="a"
    target="_self"
  >
-    <i
-      class="cui-lock-locked mr-2"
+    <cicon-stub
+      name="cil-lock-locked"
    />
     Logout
  
@@ -16,7 +16,8 @@ exports[`TheSidebar.vue renders correctly 1`] = `
  />
   
  <crenderfunction-stub
-    contenttorender="CSidebarNav,CSidebarNavLink,[object Object],CSidebarNavTitle,Theme,CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavTitle,Components,CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDivider,CSidebarNavTitle,Extras,CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object]"
+    contenttorender="[object Object]"
+    flat="true"
  />
   
  <csidebarminimizer-stub
@@ -1,13 +1,10 @@
 import Vue from 'vue'
 import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
-import { CIconPlugin } from '@coreui/icons/vue'
 import Dashboard from '@/views/Dashboard'
-import { iconsSet } from '@/assets/icons/icons.js'


 Vue.use(CoreuiVue)
-Vue.use(CIconPlugin, iconsSet)

 describe('Dashboard.vue', () => {
  it('has a name', () => {
@@ -42,8 +42,8 @@ exports[`Dashboard.vue renders correctly 1`] = `
            target="_self"
            type="button"
          >
-            <i
-              class="cui-cloud-download"
+            <cicon-stub
+              name="cil-cloud-download"
            />
          </cbutton-stub>
           
@@ -243,10 +243,14 @@ exports[`Dashboard.vue renders correctly 1`] = `
      md="12"
      tag="div"
    >
-      <ccard-stub
-        bodywrapper="true"
-        headerhtml="Traffic & Sales"
-      >
+      <ccard-stub>
+        <ccardheader-stub>
+          
+          Traffic & Sales
+        
+        </ccardheader-stub>
+         
+        <ccardbody-stub>
          <crow-stub
            gutters="true"
          >
@@ -569,8 +573,8 @@ exports[`Dashboard.vue renders correctly 1`] = `
                      color="info"
                      event="click"
                      exactactiveclass="active"
-                    pill="true"
                      routertag="a"
+                      shape="pill"
                      tag="span"
                      target="_self"
                    >
@@ -587,8 +591,8 @@ exports[`Dashboard.vue renders correctly 1`] = `
                      color="danger"
                      event="click"
                      exactactiveclass="active"
-                    pill="true"
                      routertag="a"
+                      shape="pill"
                      tag="span"
                      target="_self"
                    >
@@ -668,8 +672,9 @@ exports[`Dashboard.vue renders correctly 1`] = `
                  <div
                    class="progress-group-header"
                  >
-                  <i
-                    class="cui-user progress-group-icon"
+                    <cicon-stub
+                      class="progress-group-icon"
+                      name="cil-user"
                    />
                     
                    <span
@@ -704,8 +709,9 @@ exports[`Dashboard.vue renders correctly 1`] = `
                  <div
                    class="progress-group-header"
                  >
-                  <i
-                    class="cui-user-female progress-group-icon"
+                    <cicon-stub
+                      class="progress-group-icon"
+                      name="cil-user-female"
                    />
                     
                    <span
@@ -740,8 +746,9 @@ exports[`Dashboard.vue renders correctly 1`] = `
                  <div
                    class="progress-group-header"
                  >
-                  <i
-                    class="cui-globe progress-group-icon"
+                    <cicon-stub
+                      class="progress-group-icon"
+                      name="cil-globe-alt"
                    />
                     
                    <span
@@ -784,9 +791,8 @@ exports[`Dashboard.vue renders correctly 1`] = `
                  >
                    <cicon-stub
                      class="progress-group-icon"
-                    fonticontag="i"
                      height="17"
-                    name="socialFacebook"
+                      name="cib-facebook"
                    />
                     
                    <span
@@ -829,9 +835,8 @@ exports[`Dashboard.vue renders correctly 1`] = `
                  >
                    <cicon-stub
                      class="progress-group-icon"
-                    fonticontag="i"
                      height="17"
-                    name="socialTwitter"
+                      name="cib-twitter"
                    />
                     
                    <span
@@ -874,9 +879,8 @@ exports[`Dashboard.vue renders correctly 1`] = `
                  >
                    <cicon-stub
                      class="progress-group-icon"
-                    fonticontag="i"
                      height="17"
-                    name="socialLinkedin"
+                      name="cib-linkedin"
                    />
                     
                    <span
@@ -925,8 +929,8 @@ exports[`Dashboard.vue renders correctly 1`] = `
                    target="_self"
                    type="button"
                  >
-                  <i
-                    class="cui-options"
+                    <cicon-stub
+                      name="cil-options"
                    />
                  </cbutton-stub>
                </div>
@@ -936,9 +940,8 @@ exports[`Dashboard.vue renders correctly 1`] = `
           
          <br />
           
-        <ctable-stub
+          <cdatatable-stub
            class="mb-0 table-outline"
-          defaultsorter="[object Object]"
            fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
            head-color="light"
            hover="true"
@@ -946,7 +949,9 @@ exports[`Dashboard.vue renders correctly 1`] = `
            itemsperpage="10"
            no-sorting=""
            responsive="true"
+            sortervalue="[object Object]"
          />
+        </ccardbody-stub>
      </ccard-stub>
    </ccol-stub>
  </crow-stub>
@@ -10,12 +10,13 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
    <div
      class="card"
    >
-      <!---->
      <header
        class="card-header"
      >
-        <i
-          class="fa fa-align-justify"
+        <svg
+          class="c-icon"
+          viewBox="0 0 64 64"
+          xmlns="http://www.w3.org/2000/svg"
        />
        <strong>
           Bootstrap Breadcrumb
@@ -165,7 +166,6 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
          </li>
        </ol>
      </div>
-      <!---->
    </div>
  </div>
 </div>
@@ -11,7 +11,6 @@ exports[`Cards.vue renders correctly 1`] = `
      <div
        class="card"
      >
-        <!---->
        <header
          class="card-header"
        >
@@ -43,7 +42,6 @@ exports[`Cards.vue renders correctly 1`] = `
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        
        </div>
-        <!---->
      </div>
    </div>
     
@@ -53,12 +51,12 @@ exports[`Cards.vue renders correctly 1`] = `
      <div
        class="card"
      >
-        <!---->
        <div
          class="card-body"
        >
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </div>
+         
        <footer
          class="card-footer"
        >
@@ -76,17 +74,19 @@ exports[`Cards.vue renders correctly 1`] = `
        <header
          class="card-header"
        >
-          <i
-            class="cui-check"
+          <svg
+            class="c-icon"
+            viewBox="0 0 64 64"
+            xmlns="http://www.w3.org/2000/svg"
          />
           Card with icon
        </header>
+         
        <div
          class="card-body"
        >
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </div>
-        <!---->
      </div>
    </div>
     
@@ -96,7 +96,6 @@ exports[`Cards.vue renders correctly 1`] = `
      <div
        class="card"
      >
-        <!---->
        <header
          class="card-header"
        >
@@ -104,14 +103,13 @@ exports[`Cards.vue renders correctly 1`] = `
          Card with switch
          
          <label
-            class="float-right c-switch form-check-label c-switch-info c-switch-sm c-switch-pill"
+            class="float-right c-switch form-check-label c-switch-sm c-switch-pill c-switch-info"
          >
            <input
              class="c-switch-input form-check-input"
              data-off="Off"
              data-on="On"
              type="checkbox"
-              value=""
            />
            <span
              class="c-switch-slider"
@@ -126,7 +124,6 @@ exports[`Cards.vue renders correctly 1`] = `
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        
        </div>
-        <!---->
      </div>
    </div>
     
@@ -136,7 +133,6 @@ exports[`Cards.vue renders correctly 1`] = `
      <div
        class="card"
      >
-        <!---->
        <header
          class="card-header"
        >
@@ -157,7 +153,6 @@ exports[`Cards.vue renders correctly 1`] = `
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        
        </div>
-        <!---->
      </div>
    </div>
     
@@ -167,7 +162,6 @@ exports[`Cards.vue renders correctly 1`] = `
      <div
        class="card"
      >
-        <!---->
        <header
          class="card-header"
        >
@@ -188,7 +182,6 @@ exports[`Cards.vue renders correctly 1`] = `
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        
        </div>
-        <!---->
      </div>
    </div>
  </div>
@@ -201,15 +194,18 @@ exports[`Cards.vue renders correctly 1`] = `
    >
      <div
        class="card border-primary"
-        header="Card outline primary"
      >
-        <!---->
+        <header
+          class="card-header"
+        >
+          Card outline primary
+        </header>
+         
        <div
          class="card-body"
        >
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </div>
-        <!---->
      </div>
    </div>
     
@@ -218,15 +214,18 @@ exports[`Cards.vue renders correctly 1`] = `
    >
      <div
        class="card border-secondary"
-        header="Card outline secondary"
      >
-        <!---->
+        <header
+          class="card-header"
+        >
+          Card outline secondary
+        </header>
+         
        <div
          class="card-body"
        >
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </div>
-        <!---->
      </div>
    </div>
     
@@ -235,17 +234,18 @@ exports[`Cards.vue renders correctly 1`] = `
    >
      <div
        class="card border-success"
-        header="Card outline success"
      >
-        <!---->
+        <header
+          class="card-header"
+        >
+          Card outline success
+        </header>
+         
        <div
          class="card-body"
        >
-          
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
        </div>
-        <!---->
      </div>
    </div>
     
@@ -260,14 +260,12 @@ exports[`Cards.vue renders correctly 1`] = `
        >
          Card outline info
        </header>
+         
        <div
          class="card-body"
        >
-          
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
        </div>
-        <!---->
      </div>
    </div>
     
@@ -282,14 +280,12 @@ exports[`Cards.vue renders correctly 1`] = `
        >
          Card outline warning
        </header>
+         
        <div
          class="card-body"
        >
-          
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
        </div>
-        <!---->
      </div>
    </div>
     
@@ -304,14 +300,12 @@ exports[`Cards.vue renders correctly 1`] = `
        >
          Card outline danger
        </header>
+         
        <div
          class="card-body"
        >
-          
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
        </div>
-        <!---->
      </div>
    </div>
  </div>
@@ -324,17 +318,18 @@ exports[`Cards.vue renders correctly 1`] = `
    >
      <div
        class="card card-accent-primary"
-        header="Card with primary accent"
      >
-        <!---->
+        <header
+          class="card-header"
+        >
+          Card with primary accent
+        </header>
+         
        <div
          class="card-body"
        >
-          
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
        </div>
-        <!---->
      </div>
    </div>
     
@@ -343,17 +338,18 @@ exports[`Cards.vue renders correctly 1`] = `
    >
      <div
        class="card card-accent-secondary"
-        header="Card with secondary accent"
      >
-        <!---->
+        <header
+          class="card-header"
+        >
+          Card with secondary accent
+        </header>
+         
        <div
          class="card-body"
        >
-          
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
        </div>
-        <!---->
      </div>
    </div>
     
@@ -362,17 +358,18 @@ exports[`Cards.vue renders correctly 1`] = `
    >
      <div
        class="card card-accent-success"
-        header="Card with success accent"
      >
-        <!---->
+        <header
+          class="card-header"
+        >
+          Card with success accent
+        </header>
+         
        <div
          class="card-body"
        >
-          
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
        </div>
-        <!---->
      </div>
    </div>
     
@@ -381,17 +378,18 @@ exports[`Cards.vue renders correctly 1`] = `
    >
      <div
        class="card card-accent-info"
-        header="Card with info accent"
      >
-        <!---->
+        <header
+          class="card-header"
+        >
+          Card with info accent
+        </header>
+         
        <div
          class="card-body"
        >
-          
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
        </div>
-        <!---->
      </div>
    </div>
     
@@ -399,18 +397,19 @@ exports[`Cards.vue renders correctly 1`] = `
      class="col-sm-6 col-md-4"
    >
      <div
-        class="card card-accent-warning"
-        header="Card with warning accent"
+        class="card card-accent-info"
      >
-        <!---->
+        <header
+          class="card-header"
+        >
+          Card with info accent
+        </header>
+         
        <div
          class="card-body"
        >
-          
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
        </div>
-        <!---->
      </div>
    </div>
     
@@ -419,17 +418,18 @@ exports[`Cards.vue renders correctly 1`] = `
    >
      <div
        class="card card-accent-danger"
-        header="Card with danger accent"
      >
-        <!---->
+        <header
+          class="card-header"
+        >
+          Card with danger accent
+        </header>
+         
        <div
          class="card-body"
        >
-          
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      
        </div>
-        <!---->
      </div>
    </div>
  </div>
@@ -441,9 +441,8 @@ exports[`Cards.vue renders correctly 1`] = `
      class="col-sm-6 col-md-4"
    >
      <div
-        class="card bg-primary text-center"
+        class="card text-center bg-primary"
      >
-        <!---->
        <div
          class="card-body"
        >
@@ -465,7 +464,6 @@ exports[`Cards.vue renders correctly 1`] = `
            </footer>
          </blockquote>
        </div>
-        <!---->
      </div>
    </div>
     
@@ -473,9 +471,8 @@ exports[`Cards.vue renders correctly 1`] = `
      class="col-sm-6 col-md-4"
    >
      <div
-        class="card bg-success text-center"
+        class="card text-center bg-success"
      >
-        <!---->
        <div
          class="card-body"
        >
@@ -497,7 +494,6 @@ exports[`Cards.vue renders correctly 1`] = `
            </footer>
          </blockquote>
        </div>
-        <!---->
      </div>
    </div>
     
@@ -505,9 +501,8 @@ exports[`Cards.vue renders correctly 1`] = `
      class="col-sm-6 col-md-4"
    >
      <div
-        class="card bg-info text-center"
+        class="card text-center bg-info"
      >
-        <!---->
        <div
          class="card-body"
        >
@@ -529,7 +524,6 @@ exports[`Cards.vue renders correctly 1`] = `
            </footer>
          </blockquote>
        </div>
-        <!---->
      </div>
    </div>
     
@@ -537,9 +531,8 @@ exports[`Cards.vue renders correctly 1`] = `
      class="col-sm-6 col-md-4"
    >
      <div
-        class="card bg-warning text-center"
+        class="card text-center bg-warning"
      >
-        <!---->
        <div
          class="card-body"
        >
@@ -561,7 +554,6 @@ exports[`Cards.vue renders correctly 1`] = `
            </footer>
          </blockquote>
        </div>
-        <!---->
      </div>
    </div>
     
@@ -569,9 +561,8 @@ exports[`Cards.vue renders correctly 1`] = `
      class="col-sm-6 col-md-4"
    >
      <div
-        class="card bg-danger text-center"
+        class="card text-center bg-danger"
      >
-        <!---->
        <div
          class="card-body"
        >
@@ -593,7 +584,6 @@ exports[`Cards.vue renders correctly 1`] = `
            </footer>
          </blockquote>
        </div>
-        <!---->
      </div>
    </div>
     
@@ -601,9 +591,8 @@ exports[`Cards.vue renders correctly 1`] = `
      class="col-sm-6 col-md-4"
    >
      <div
-        class="card bg-secondary text-center"
+        class="card text-center bg-secondary"
      >
-        <!---->
        <div
          class="card-body"
        >
@@ -625,7 +614,6 @@ exports[`Cards.vue renders correctly 1`] = `
            </footer>
          </blockquote>
        </div>
-        <!---->
      </div>
    </div>
  </div>
@@ -639,11 +627,6 @@ exports[`Cards.vue renders correctly 1`] = `
      <div
        class="card bg-primary"
      >
-        <header
-          class="card-header"
-        >
-          Card title
-        </header>
        <div
          class="card-body"
        >
@@ -651,7 +634,6 @@ exports[`Cards.vue renders correctly 1`] = `
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      
        </div>
-        <!---->
      </div>
    </div>
     
@@ -661,11 +643,6 @@ exports[`Cards.vue renders correctly 1`] = `
      <div
        class="card bg-success"
      >
-        <header
-          class="card-header"
-        >
-          Card title
-        </header>
        <div
          class="card-body"
        >
@@ -673,7 +650,6 @@ exports[`Cards.vue renders correctly 1`] = `
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      
        </div>
-        <!---->
      </div>
    </div>
     
@@ -683,11 +659,6 @@ exports[`Cards.vue renders correctly 1`] = `
      <div
        class="card bg-info"
      >
-        <header
-          class="card-header"
-        >
-          Card title
-        </header>
        <div
          class="card-body"
        >
@@ -695,7 +666,6 @@ exports[`Cards.vue renders correctly 1`] = `
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      
        </div>
-        <!---->
      </div>
    </div>
     
@@ -705,11 +675,6 @@ exports[`Cards.vue renders correctly 1`] = `
      <div
        class="card bg-warning"
      >
-        <header
-          class="card-header"
-        >
-          Card title
-        </header>
        <div
          class="card-body"
        >
@@ -717,7 +682,6 @@ exports[`Cards.vue renders correctly 1`] = `
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      
        </div>
-        <!---->
      </div>
    </div>
     
@@ -727,11 +691,6 @@ exports[`Cards.vue renders correctly 1`] = `
      <div
        class="card bg-danger"
      >
-        <header
-          class="card-header"
-        >
-          Card title
-        </header>
        <div
          class="card-body"
        >
@@ -739,7 +698,6 @@ exports[`Cards.vue renders correctly 1`] = `
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      
        </div>
-        <!---->
      </div>
    </div>
     
@@ -750,7 +708,6 @@ exports[`Cards.vue renders correctly 1`] = `
        class="card bg-secondary"
        name="fade"
      >
-        <!---->
        <header
          class="card-header"
        >
@@ -765,8 +722,10 @@ exports[`Cards.vue renders correctly 1`] = `
              href="#"
              target="_self"
            >
-              <i
-                class="cui-settings"
+              <svg
+                class="c-icon"
+                viewBox="0 0 64 64"
+                xmlns="http://www.w3.org/2000/svg"
              />
            </a>
             
@@ -775,8 +734,10 @@ exports[`Cards.vue renders correctly 1`] = `
              href="#"
              target="_self"
            >
-              <i
-                class="cui-chevron-bottom"
+              <svg
+                class="c-icon"
+                viewBox="0 0 64 64"
+                xmlns="http://www.w3.org/2000/svg"
              />
            </a>
             
@@ -785,8 +746,10 @@ exports[`Cards.vue renders correctly 1`] = `
              href="#"
              target="_self"
            >
-              <i
-                class="cui-circle-x"
+              <svg
+                class="c-icon"
+                viewBox="0 0 64 64"
+                xmlns="http://www.w3.org/2000/svg"
              />
            </a>
          </div>
@@ -803,7 +766,6 @@ exports[`Cards.vue renders correctly 1`] = `
            
          </div>
        </div>
-        <!---->
      </div>
    </div>
  </div>
@@ -10,12 +10,13 @@ exports[`Carousels.vue renders correctly 1`] = `
    <div
      class="card"
    >
-      <!---->
      <header
        class="card-header"
      >
-        <i
-          class="fa fa-align-justify"
+        <svg
+          class="c-icon"
+          viewBox="0 0 64 64"
+          xmlns="http://www.w3.org/2000/svg"
        />
         
        <strong>
@@ -68,7 +69,7 @@ exports[`Carousels.vue renders correctly 1`] = `
            >
              <img
                class="d-block w-100 h-100 img-fluid"
-                src="https://lorempixel.com/1024/480/technics/2/"
+                src="https://picsum.photos/1024/480/?image=52"
              />
              <div
                class="carousel-caption"
@@ -86,9 +87,8 @@ exports[`Carousels.vue renders correctly 1`] = `
              class="carousel-item"
            >
              <svg
-                blankColor="grey"
                class="d-block w-100 h-100 img-fluid"
-                style="background-color: transparent;"
+                style="background-color: grey;"
              />
              <div
                class="carousel-caption"
@@ -107,7 +107,7 @@ exports[`Carousels.vue renders correctly 1`] = `
            >
              <img
                class="d-block w-100 h-100 img-fluid"
-                src="https://lorempixel.com/1024/480/technics/8/"
+                src="https://picsum.photos/1024/480/?image=54"
              />
              <!---->
            </div>
@@ -130,7 +130,6 @@ exports[`Carousels.vue renders correctly 1`] = `
          </a>
        </div>
      </div>
-      <!---->
    </div>
  </div>
 </div>
@@ -10,12 +10,13 @@ exports[`Collapses.vue renders correctly 1`] = `
    <div
      class="card"
    >
-      <!---->
      <header
        class="card-header"
      >
-        <i
-          class="fa fa-align-justify"
+        <svg
+          class="c-icon"
+          viewBox="0 0 64 64"
+          xmlns="http://www.w3.org/2000/svg"
        />
         
        <strong>
@@ -59,7 +60,6 @@ exports[`Collapses.vue renders correctly 1`] = `
          <div
            class="card"
          >
-            <!---->
            <div
              class="card-body"
            >
@@ -85,21 +85,17 @@ exports[`Collapses.vue renders correctly 1`] = `
                <div
                  class="card"
                >
-                  <!---->
                  <div
                    class="card-body"
                  >
                    Hello!
                  </div>
-                  <!---->
                </div>
              </div>
            </div>
-            <!---->
          </div>
        </div>
      </div>
-      <!---->
    </div>
  </div>
 </div>
@@ -10,8 +10,8 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
    >
      <ccard-stub>
        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
+          <cicon-stub
+            name="cil-justify-center"
          />
           
          <strong>
@@ -49,7 +49,7 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
            <p
              class="lead"
            >
-              Bootstrap 4 Components for Vue.js 2
+              Bootstrap 4 Components for Vue.js 2.6+
            </p>
             
            <p>
@@ -78,8 +78,8 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
    >
      <ccard-stub>
        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
+          <cicon-stub
+            name="cil-justify-center"
          />
           
          <strong>
@@ -162,8 +162,8 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
    >
      <ccard-stub>
        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
+          <cicon-stub
+            name="cil-justify-center"
          />
           
          <strong>
@@ -11,8 +11,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
    >
      <ccard-stub>
        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
+          <cicon-stub
+            name="cil-justify-center"
          />
           
          <strong>
@@ -106,8 +106,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
    >
      <ccard-stub>
        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
+          <cicon-stub
+            name="cil-justify-center"
          />
          <strong>
             List group 
@@ -191,8 +191,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
    >
      <ccard-stub>
        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
+          <cicon-stub
+            name="cil-justify-center"
          />
           
          <strong>
@@ -275,8 +275,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
    >
      <ccard-stub>
        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
+          <cicon-stub
+            name="cil-justify-center"
          />
           
          <strong>
@@ -356,8 +356,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
    >
      <ccard-stub>
        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
+          <cicon-stub
+            name="cil-justify-center"
          />
           
          <strong>
@@ -428,8 +428,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
    >
      <ccard-stub>
        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
+          <cicon-stub
+            name="cil-justify-center"
          />
           
          <strong>
@@ -462,8 +462,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
                color="primary"
                event="click"
                exactactiveclass="active"
-                pill="true"
                routertag="a"
+                shape="pill"
                tag="span"
                target="_self"
              >
@@ -488,8 +488,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
                color="primary"
                event="click"
                exactactiveclass="active"
-                pill="true"
                routertag="a"
+                shape="pill"
                tag="span"
                target="_self"
              >
@@ -514,8 +514,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
                color="primary"
                event="click"
                exactactiveclass="active"
-                pill="true"
                routertag="a"
+                shape="pill"
                tag="span"
                target="_self"
              >
@@ -537,8 +537,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
    >
      <ccard-stub>
        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
+          <cicon-stub
+            name="cil-justify-center"
          />
           
          <strong>
@@ -671,8 +671,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
    >
      <ccard-stub>
        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
+          <cicon-stub
+            name="cil-justify-center"
          />
           
          <strong>
@@ -818,8 +818,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
    >
      <ccard-stub>
        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
+          <cicon-stub
+            name="cil-justify-center"
          />
           
          <strong>
@@ -835,9 +835,14 @@ exports[`ListGroups.vue renders correctly 1`] = `
          <ccardgroup-stub
            deck="true"
          >
-            <ccard-stub
-              headerhtml=<b>Card with list group</b>
-            >
+            <ccard-stub>
+              <ccardheader-stub>
+                <b>
+                  Card with list group
+                </b>
+              </ccardheader-stub>
+               
+              <ccardbody-stub>
                <clistgroup-stub
                  tag="ul"
                >
@@ -878,8 +883,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
                  </clistgroupitem-stub>
                </clistgroup-stub>
                 
-              <p
-                class="card-text mt-2"
+                <ccardtext-stub
+                  class="mt-2"
                >
                  
                  Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
@@ -887,12 +892,17 @@ exports[`ListGroups.vue renders correctly 1`] = `
                  consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
                  ad sit ipsum anim Lorem.
                
-              </p>
+                </ccardtext-stub>
+              </ccardbody-stub>
            </ccard-stub>
             
-            <ccard-stub
-              header=<b>Card with flush list group</b>
-            >
+            <ccard-stub>
+              <ccardheader-stub>
+                <b>
+                  Card with flush list group
+                </b>
+              </ccardheader-stub>
+               
              <clistgroup-stub
                flush="true"
                tag="ul"
@@ -958,8 +968,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
    >
      <ccard-stub>
        <ccardheader-stub>
-          <i
-            class="fa fa-align-justify"
+          <cicon-stub
+            name="cil-justify-center"
          />
          <strong>
             List group 
@@ -4,8 +4,8 @@ exports[`Navbars.vue renders correctly 1`] = `
 <div>
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -66,7 +66,6 @@ exports[`Navbars.vue renders correctly 1`] = `
              exactactiveclass="active"
              href="#"
              routertag="a"
-              tag="span"
              target="_self"
            >
              Link
@@ -79,7 +78,6 @@ exports[`Navbars.vue renders correctly 1`] = `
              exactactiveclass="active"
              href="#"
              routertag="a"
-              tag="span"
              target="_self"
            >
              Disabled
@@ -201,8 +199,8 @@ exports[`Navbars.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -243,8 +241,8 @@ exports[`Navbars.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -299,8 +297,8 @@ exports[`Navbars.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -337,7 +335,6 @@ exports[`Navbars.vue renders correctly 1`] = `
              exactactiveclass="active"
              href="#"
              routertag="a"
-              tag="span"
              target="_self"
            >
              Home
@@ -349,7 +346,6 @@ exports[`Navbars.vue renders correctly 1`] = `
              exactactiveclass="active"
              href="#"
              routertag="a"
-              tag="span"
              target="_self"
            >
              Link
@@ -438,8 +434,8 @@ exports[`Navbars.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -487,8 +483,8 @@ exports[`Navbars.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -4,8 +4,8 @@ exports[`Navs.vue renders correctly 1`] = `
 <div>
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
      <strong>
         Bootstrap Navs
@@ -37,7 +37,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Active
@@ -48,7 +47,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
          title="Link"
        />
@@ -58,7 +56,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Another Link
@@ -70,7 +67,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Disabled
@@ -81,8 +77,8 @@ exports[`Navs.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -102,11 +98,10 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
-          <i
-            class="cui-basket-loaded"
+          <cicon-stub
+            name="cil-basket"
          />
        </cnavitem-stub>
         
@@ -115,7 +110,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          
@@ -128,7 +122,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          
@@ -142,7 +135,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Disabled
@@ -153,8 +145,8 @@ exports[`Navs.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -168,7 +160,7 @@ exports[`Navs.vue renders correctly 1`] = `
     
    <ccardbody-stub>
      <cnav-stub
-        tabs="true"
+        variant="tabs"
      >
        <cnavitem-stub
          active="true"
@@ -176,7 +168,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          
@@ -189,7 +180,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          
@@ -202,7 +192,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          
@@ -216,7 +205,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Disabled
@@ -227,8 +215,8 @@ exports[`Navs.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -242,7 +230,7 @@ exports[`Navs.vue renders correctly 1`] = `
     
    <ccardbody-stub>
      <cnav-stub
-        pills="true"
+        variant="pills"
      >
        <cnavitem-stub
          active="true"
@@ -250,7 +238,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Active
@@ -261,7 +248,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Link
@@ -272,7 +258,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Another Link
@@ -284,7 +269,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Disabled
@@ -295,8 +279,8 @@ exports[`Navs.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -311,7 +295,7 @@ exports[`Navs.vue renders correctly 1`] = `
    <ccardbody-stub>
      <cnav-stub
        fill="true"
-        tabs="true"
+        variant="tabs"
      >
        <cnavitem-stub
          active="true"
@@ -319,7 +303,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Active
@@ -330,7 +313,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Link
@@ -341,7 +323,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Link with a long name 
@@ -353,7 +334,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Disabled
@@ -364,8 +344,8 @@ exports[`Navs.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -380,7 +360,7 @@ exports[`Navs.vue renders correctly 1`] = `
    <ccardbody-stub>
      <cnav-stub
        justified="true"
-        tabs="true"
+        variant="tabs"
      >
        <cnavitem-stub
          active="true"
@@ -388,7 +368,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Active
@@ -399,7 +378,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Link
@@ -410,7 +388,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Link with a long name 
@@ -422,7 +399,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Disabled
@@ -433,8 +409,8 @@ exports[`Navs.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -448,7 +424,7 @@ exports[`Navs.vue renders correctly 1`] = `
     
    <ccardbody-stub>
      <cnav-stub
-        pills="true"
+        pills=""
      >
        <cnavitem-stub
          active="true"
@@ -456,7 +432,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Active
@@ -467,7 +442,6 @@ exports[`Navs.vue renders correctly 1`] = `
          event="click"
          exactactiveclass="active"
          routertag="a"
-          tag="span"
          target="_self"
        >
          Link
@@ -522,8 +496,8 @@ exports[`Navs.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -545,7 +519,7 @@ exports[`Navs.vue renders correctly 1`] = `
          tag="div"
        >
          <cnav-stub
-            pills="true"
+            pills=""
            vertical="true"
          >
            <cnavitem-stub
@@ -554,7 +528,6 @@ exports[`Navs.vue renders correctly 1`] = `
              event="click"
              exactactiveclass="active"
              routertag="a"
-              tag="span"
              target="_self"
            >
              Active
@@ -565,7 +538,6 @@ exports[`Navs.vue renders correctly 1`] = `
              event="click"
              exactactiveclass="active"
              routertag="a"
-              tag="span"
              target="_self"
            >
              Link
@@ -576,7 +548,6 @@ exports[`Navs.vue renders correctly 1`] = `
              event="click"
              exactactiveclass="active"
              routertag="a"
-              tag="span"
              target="_self"
            >
              Another Link
@@ -588,7 +559,6 @@ exports[`Navs.vue renders correctly 1`] = `
              event="click"
              exactactiveclass="active"
              routertag="a"
-              tag="span"
              target="_self"
            >
              Disabled
@@ -4,8 +4,8 @@ exports[`Paginations.vue renders correctly 1`] = `
 <div>
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -41,14 +41,9 @@ exports[`Paginations.vue renders correctly 1`] = `
        arrows="true"
        dots="true"
        doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
        limit="5"
-        nextbuttonhtml="&rsaquo;"
        pages="10"
-        previousbuttonhtml="&lsaquo;"
        responsive=""
-        size="md"
      />
       
      <br />
@@ -63,12 +58,8 @@ exports[`Paginations.vue renders correctly 1`] = `
        arrows="true"
        dots="true"
        doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
        limit="5"
-        nextbuttonhtml="&rsaquo;"
        pages="10"
-        previousbuttonhtml="&lsaquo;"
        size="sm"
      />
       
@@ -85,12 +76,8 @@ exports[`Paginations.vue renders correctly 1`] = `
          arrows="true"
          dots="true"
          doublearrows="true"
-          firstbuttonhtml="&laquo;"
-          lastbuttonhtml="&raquo;"
          limit="5"
-          nextbuttonhtml="&rsaquo;"
          pages="10"
-          previousbuttonhtml="&lsaquo;"
          responsive=""
          size="lg"
        />
@@ -106,8 +93,8 @@ exports[`Paginations.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -130,13 +117,8 @@ exports[`Paginations.vue renders correctly 1`] = `
        arrows="true"
        dots="true"
        doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
        limit="5"
-        nextbuttonhtml="&rsaquo;"
        pages="10"
-        previousbuttonhtml="&lsaquo;"
-        size="md"
      />
       
      <br />
@@ -151,13 +133,8 @@ exports[`Paginations.vue renders correctly 1`] = `
        arrows="true"
        dots="true"
        doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
        limit="5"
-        nextbuttonhtml="&rsaquo;"
        pages="10"
-        previousbuttonhtml="&lsaquo;"
-        size="md"
      />
       
      <br />
@@ -172,13 +149,8 @@ exports[`Paginations.vue renders correctly 1`] = `
        arrows="true"
        dots="true"
        doublearrows="true"
-        firstbuttonhtml="&laquo;"
-        lastbuttonhtml="&raquo;"
        limit="5"
-        nextbuttonhtml="&rsaquo;"
        pages="10"
-        previousbuttonhtml="&lsaquo;"
-        size="md"
      />
       
      <br />
@@ -4,8 +4,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
 <div>
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -87,8 +87,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -163,8 +163,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -217,8 +217,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -276,8 +276,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -435,8 +435,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -503,8 +503,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -574,8 +574,8 @@ exports[`ProgressBars.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -1,16 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Table.vue renders correctly 1`] = `
-<ccard-stub
-  bodywrapper="true"
-  header="Table"
->
-  <ctable-stub
-    defaultsorter="[object Object]"
+<ccard-stub>
+  <ccardheader-stub>
+    <cicon-stub
+      name="cil-justify-center"
+    />
+     Table
+  
+  </ccardheader-stub>
+   
+  <ccardbody-stub>
+    <cdatatable-stub
      fields="username,registered,role,status"
      itemsperpage="5"
      pagination="true"
      responsive="true"
+      sortervalue="[object Object]"
    />
+  </ccardbody-stub>
 </ccard-stub>
 `;
@@ -10,7 +10,7 @@ exports[`Tables.vue renders correctly 1`] = `
      tag="div"
    >
      <ctablewrapper-stub
-        caption=<i class='fa fa-align-justify'></i> Simple Table
+        caption="Simple Table"
        fields="username,registered,role,status"
        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
      />
@@ -21,7 +21,7 @@ exports[`Tables.vue renders correctly 1`] = `
      tag="div"
    >
      <ctablewrapper-stub
-        caption=<i class='fa fa-align-justify'></i> Striped Table
+        caption="Striped Table"
        fields="username,registered,role,status"
        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
        striped="true"
@@ -37,7 +37,7 @@ exports[`Tables.vue renders correctly 1`] = `
      tag="div"
    >
      <ctablewrapper-stub
-        caption=<i class='fa fa-align-justify'></i> Condensed Table
+        caption="Condensed Table"
        fields="username,registered,role,status"
        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
        small="true"
@@ -50,7 +50,7 @@ exports[`Tables.vue renders correctly 1`] = `
    >
      <ctablewrapper-stub
        bordered="true"
-        caption=<i class='fa fa-align-justify'></i> Bordered Table
+        caption="Bordered Table"
        fields="username,registered,role,status"
        fixed="true"
        items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
@@ -67,7 +67,7 @@ exports[`Tables.vue renders correctly 1`] = `
    >
      <ctablewrapper-stub
        bordered="true"
-        caption=<i class='fa fa-align-justify'></i> Combined All Table
+        caption="Combined All Table"
        fields="username,registered,role,status"
        fixed="true"
        hover="true"
@@ -87,7 +87,7 @@ exports[`Tables.vue renders correctly 1`] = `
    >
      <ctablewrapper-stub
        bordered="true"
-        caption=<i class='fa fa-align-justify'></i> Combined All Table
+        caption="Combined All Table"
        dark="true"
        fields="username,registered,role,status"
        fixed="true"
@@ -36,11 +36,11 @@ exports[`Tabs.vue renders correctly 1`] = `
        <ccardbody-stub>
          <ctabs-stub
            fade="true"
-            tabs="true"
+            variant="tabs"
          >
            <ctab-stub
              active="true"
-              titlehtml="Home"
+              title="Home"
            >
              
              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -52,7 +52,7 @@ exports[`Tabs.vue renders correctly 1`] = `
            </ctab-stub>
             
            <ctab-stub
-              titlehtml="Profile"
+              title="Profile"
            >
              
              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -65,7 +65,7 @@ exports[`Tabs.vue renders correctly 1`] = `
             
            <ctab-stub
              disabled="true"
-              titlehtml="Disabled"
+              title="Disabled"
            >
              
              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -95,12 +95,11 @@ exports[`Tabs.vue renders correctly 1`] = `
        <ccardbody-stub>
          <ctabs-stub
            fade="true"
-            pills="true"
-            tabs="true"
+            variant="pills"
          >
            <ctab-stub
              active="true"
-              titlehtml="Home"
+              title="Home"
            >
              
              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -112,7 +111,7 @@ exports[`Tabs.vue renders correctly 1`] = `
            </ctab-stub>
             
            <ctab-stub
-              titlehtml="Profile"
+              title="Profile"
            >
              
              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -125,7 +124,7 @@ exports[`Tabs.vue renders correctly 1`] = `
             
            <ctab-stub
              disabled="true"
-              titlehtml="Disabled"
+              title="Disabled"
            >
              
              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -155,14 +154,14 @@ exports[`Tabs.vue renders correctly 1`] = `
        <ccardbody-stub>
          <ctabs-stub
            fade="true"
-            tabs="true"
+            variant="tabs"
          >
            <ctab-stub
              active="true"
            >
              <template>
-                <i
-                  class="cui-calculator"
+                <cicon-stub
+                  name="cil-calculator"
                />
              </template>
              
@@ -176,8 +175,8 @@ exports[`Tabs.vue renders correctly 1`] = `
             
            <ctab-stub>
              <template>
-                <i
-                  class="cui-basket-loaded"
+                <cicon-stub
+                  name="cil-basket"
                />
              </template>
              
@@ -191,8 +190,8 @@ exports[`Tabs.vue renders correctly 1`] = `
             
            <ctab-stub>
              <template>
-                <i
-                  class="cui-pie-chart"
+                <cicon-stub
+                  name="cil-chart-pie"
                />
              </template>
              
@@ -224,14 +223,14 @@ exports[`Tabs.vue renders correctly 1`] = `
          <ctabs-stub
            addtabclasses="mt-1"
            fade="true"
-            tabs="true"
+            variant="tabs"
          >
            <ctab-stub
              active="true"
            >
              <template>
-                <i
-                  class="cui-calculator"
+                <cicon-stub
+                  name="cil-calculator"
                />
                 Calculator
              
@@ -247,8 +246,8 @@ exports[`Tabs.vue renders correctly 1`] = `
             
            <ctab-stub>
              <template>
-                <i
-                  class="cui-basket-loaded"
+                <cicon-stub
+                  name="cil-basket"
                />
                 Shopping cart
              
@@ -264,8 +263,8 @@ exports[`Tabs.vue renders correctly 1`] = `
             
            <ctab-stub>
              <template>
-                <i
-                  class="cui-pie-chart"
+                <cicon-stub
+                  name="cil-chart-pie"
                />
                 Charts
              
@@ -298,16 +297,15 @@ exports[`Tabs.vue renders correctly 1`] = `
        <ccardbody-stub>
          <ctabs-stub
            fade="true"
-            pills="true"
-            tabs="true"
+            variant="pills"
            vertical="true"
          >
            <ctab-stub
              active="true"
            >
              <template>
-                <i
-                  class="cui-calculator"
+                <cicon-stub
+                  name="cil-calculator"
                />
                 Calculator
              
@@ -323,8 +321,8 @@ exports[`Tabs.vue renders correctly 1`] = `
             
            <ctab-stub>
              <template>
-                <i
-                  class="cui-basket-loaded"
+                <cicon-stub
+                  name="cil-basket"
                />
                 Shopping cart
              
@@ -340,8 +338,8 @@ exports[`Tabs.vue renders correctly 1`] = `
             
            <ctab-stub>
              <template>
-                <i
-                  class="cui-pie-chart"
+                <cicon-stub
+                  name="cil-chart-pie"
                />
                 Charts
              
@@ -4,8 +4,8 @@ exports[`Tooltips.vue renders correctly 1`] = `
 <div>
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -92,8 +92,8 @@ exports[`Tooltips.vue renders correctly 1`] = `
   
  <ccard-stub>
    <ccardheader-stub>
-      <i
-        class="fa fa-align-justify"
+      <cicon-stub
+        name="cil-justify-center"
      />
       
      <strong>
@@ -2,11 +2,7 @@ import Vue from 'vue'
 import { shallowMount, mount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import BrandButtons from '@/views/buttons/BrandButtons'
-import { CIconPlugin } from '@coreui/icons/vue'
-import { iconsSet } from '@/assets/icons/icons.js'

-
-Vue.use(CIconPlugin, iconsSet)
 Vue.use(CoreuiVue)

 describe('BrandButtons.vue', () => {
@@ -11,12 +11,13 @@ exports[`Dropdowns.vue renders correctly 1`] = `
      <div
        class="card"
      >
-        <!---->
        <header
          class="card-header"
        >
-          <i
-            class="fa fa-align-justify"
+          <svg
+            class="c-icon"
+            viewBox="0 0 64 64"
+            xmlns="http://www.w3.org/2000/svg"
          />
           
          <strong>
@@ -52,6 +53,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-secondary"
+                type="button"
              >
                Dropdown Button
              </button>
@@ -122,6 +124,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-secondary"
+                type="button"
              >
                Dropdown with divider
              </button>
@@ -172,6 +175,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-secondary"
+                type="button"
              >
                Dropdown with header
              </button>
@@ -206,7 +210,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            </div>
          </div>
        </div>
-        <!---->
      </div>
    </div>
     
@@ -216,12 +219,13 @@ exports[`Dropdowns.vue renders correctly 1`] = `
      <div
        class="card"
      >
-        <!---->
        <header
          class="card-header"
        >
-          <i
-            class="fa fa-align-justify"
+          <svg
+            class="c-icon"
+            viewBox="0 0 64 64"
+            xmlns="http://www.w3.org/2000/svg"
          />
           
          <strong>
@@ -244,6 +248,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-primary"
+                type="button"
              >
                Left align
              </button>
@@ -287,6 +292,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-primary"
+                type="button"
              >
                Right align
              </button>
@@ -332,6 +338,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-info"
+                type="button"
              >
                Drop-Up
              </button>
@@ -377,6 +384,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-secondary"
+                type="button"
              >
                Offset Dropdown
              </button>
@@ -427,6 +435,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="dropdown-toggle dropdown-toggle-split btn btn-secondary"
+                type="button"
              />
              <div
                class="dropdown-menu"
@@ -461,7 +470,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            </div>
          </div>
        </div>
-        <!---->
      </div>
    </div>
  </div>
@@ -475,12 +483,13 @@ exports[`Dropdowns.vue renders correctly 1`] = `
      <div
        class="card"
      >
-        <!---->
        <header
          class="card-header"
        >
-          <i
-            class="fa fa-align-justify"
+          <svg
+            class="c-icon"
+            viewBox="0 0 64 64"
+            xmlns="http://www.w3.org/2000/svg"
          />
           
          <strong>
@@ -503,6 +512,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="btn btn-lg btn-link"
+                type="button"
              >
                
                🔍
@@ -547,7 +557,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            </div>
          </div>
        </div>
-        <!---->
      </div>
    </div>
     
@@ -557,12 +566,13 @@ exports[`Dropdowns.vue renders correctly 1`] = `
      <div
        class="card"
      >
-        <!---->
        <header
          class="card-header"
        >
-          <i
-            class="fa fa-align-justify"
+          <svg
+            class="c-icon"
+            viewBox="0 0 64 64"
+            xmlns="http://www.w3.org/2000/svg"
          />
           
          <strong>
@@ -585,6 +595,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-lg btn-secondary"
+                type="button"
              >
                Large
              </button>
@@ -633,6 +644,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="dropdown-toggle dropdown-toggle-split btn btn-lg btn-secondary"
+                type="button"
              />
              <div
                class="dropdown-menu"
@@ -675,6 +687,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-sm btn-secondary"
+                type="button"
              >
                Small
              </button>
@@ -723,6 +736,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="dropdown-toggle dropdown-toggle-split btn btn-sm btn-secondary"
+                type="button"
              />
              <div
                class="dropdown-menu"
@@ -757,7 +771,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            </div>
          </div>
        </div>
-        <!---->
      </div>
    </div>
  </div>
@@ -771,12 +784,13 @@ exports[`Dropdowns.vue renders correctly 1`] = `
      <div
        class="card"
      >
-        <!---->
        <header
          class="card-header"
        >
-          <i
-            class="fa fa-align-justify"
+          <svg
+            class="c-icon"
+            viewBox="0 0 64 64"
+            xmlns="http://www.w3.org/2000/svg"
          />
           
          <strong>
@@ -799,6 +813,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-primary"
+                type="button"
              >
                Dropdown ARIA
              </button>
@@ -885,7 +900,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            </div>
          </div>
        </div>
-        <!---->
      </div>
    </div>
     
@@ -895,12 +909,13 @@ exports[`Dropdowns.vue renders correctly 1`] = `
      <div
        class="card"
      >
-        <!---->
        <header
          class="card-header"
        >
-          <i
-            class="fa fa-align-justify"
+          <svg
+            class="c-icon"
+            viewBox="0 0 64 64"
+            xmlns="http://www.w3.org/2000/svg"
          />
           
          <strong>
@@ -924,6 +939,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-primary"
+              type="button"
            >
              Primary
            </button>
@@ -967,6 +983,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-secondary"
+              type="button"
            >
              Secondary
            </button>
@@ -1010,6 +1027,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-success"
+              type="button"
            >
              Success
            </button>
@@ -1053,6 +1071,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-warning"
+              type="button"
            >
              Warning
            </button>
@@ -1096,6 +1115,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-danger"
+              type="button"
            >
              Danger
            </button>
@@ -1139,6 +1159,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-info"
+              type="button"
            >
              Info
            </button>
@@ -1182,6 +1203,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-light"
+              type="button"
            >
              Light
            </button>
@@ -1225,6 +1247,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-dark"
+              type="button"
            >
              Dark
            </button>
@@ -1268,6 +1291,7 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-link"
+              type="button"
            >
              Link
            </button>
@@ -1304,7 +1328,6 @@ exports[`Dropdowns.vue renders correctly 1`] = `
            </div>
          </div>
        </div>
-        <!---->
      </div>
    </div>
  </div>
@@ -10,8 +10,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
  >
    <ccard-stub>
      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
+        <cicon-stub
+          name="cil-justify-center"
        />
         
        <strong>
@@ -190,8 +190,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
  >
    <ccard-stub>
      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
+        <cicon-stub
+          name="cil-justify-center"
        />
         
        <strong>
@@ -337,8 +337,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
  >
    <ccard-stub>
      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
+        <cicon-stub
+          name="cil-justify-center"
        />
        <strong>
           Button group 
@@ -489,8 +489,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
  >
    <ccard-stub>
      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
+        <cicon-stub
+          name="cil-justify-center"
        />
         
        <strong>
@@ -552,8 +552,8 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
  >
    <ccard-stub>
      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
+        <cicon-stub
+          name="cil-justify-center"
        />
         
        <strong>
@@ -707,10 +707,10 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
          </cbuttongroup-stub>
           
          <cinput-stub
-            appendhtml=".00"
+            append=".00"
            class="mb-0 w-25 mx-1"
            lazy="400"
-            prependhtml="$"
+            prepend="$"
            size="sm"
            type="text"
            value="100"
@@ -720,7 +720,7 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
            class="mb-0 w-25 mx-1"
            custom="true"
            options="Large,Medium,Small"
-            prependhtml="Size"
+            prepend="Size"
            size="sm"
            value="Medium"
          />
@@ -34,45 +34,62 @@ exports[`Charts.vue renders correctly 1`] = `
      </ccardbody-stub>
    </ccard-stub>
     
-    <ccard-stub
-      bodywrapper="true"
-      headerhtml="Bar Chart"
-    >
+    <ccard-stub>
+      <ccardheader-stub>
+        Bar Chart
+      </ccardheader-stub>
+       
+      <ccardbody-stub>
        <cchartbarexample-stub />
+      </ccardbody-stub>
    </ccard-stub>
     
-    <ccard-stub
-      bodywrapper="true"
-      headerhtml="Doughnut Chart"
-    >
+    <ccard-stub>
+      <ccardheader-stub>
+        Doughnut Chart
+      </ccardheader-stub>
+       
+      <ccardbody-stub>
        <cchartdoughnutexample-stub />
+      </ccardbody-stub>
    </ccard-stub>
     
-    <ccard-stub
-      bodywrapper="true"
-      headerhtml="Radar Chart"
-    >
+    <ccard-stub>
+      <ccardheader-stub>
+        Radar Chart
+      </ccardheader-stub>
+       
+      <ccardbody-stub>
        <cchartradarexample-stub />
+      </ccardbody-stub>
    </ccard-stub>
     
-    <ccard-stub
-      bodywrapper="true"
-      headerhtml="Pie Chart"
-    >
+    <ccard-stub>
+      <ccardheader-stub>
+        Pie Chart
+      </ccardheader-stub>
+       
+      <ccardbody-stub>
        <cchartpieexample-stub />
+      </ccardbody-stub>
    </ccard-stub>
     
-    <ccard-stub
-      bodywrapper="true"
-      headerhtml="Polar Area Chart"
-    >
+    <ccard-stub>
+      <ccardheader-stub>
+        Polar Area Chart
+      </ccardheader-stub>
+       
+      <ccardbody-stub>
        <cchartpolarareaexample-stub />
+      </ccardbody-stub>
    </ccard-stub>
     
-    <ccard-stub
-      bodywrapper="true"
-      headerhtml="Simple line chart"
-    >
+    <ccard-stub>
+      <ccardheader-stub>
+        Simple line chart
+      </ccardheader-stub>
+       
+      <ccardbody-stub>
        <cchartlinesimple-stub
          backgroundcolor="transparent"
          bordercolor="success"
@@ -80,12 +97,15 @@ exports[`Charts.vue renders correctly 1`] = `
          label="Sales"
          labels="months"
        />
+      </ccardbody-stub>
    </ccard-stub>
     
-    <ccard-stub
-      bodywrapper="true"
-      headerhtml="Simple pointed chart"
-    >
+    <ccard-stub>
+      <ccardheader-stub>
+        Simple pointed chart
+      </ccardheader-stub>
+       
+      <ccardbody-stub>
        <cchartlinesimple-stub
          backgroundcolor="transparent"
          bordercolor="warning"
@@ -93,17 +113,21 @@ exports[`Charts.vue renders correctly 1`] = `
          label="Sales"
          pointed="true"
        />
+      </ccardbody-stub>
    </ccard-stub>
     
-    <ccard-stub
-      bodywrapper="true"
-      headerhtml="Simple bar chart"
-    >
+    <ccard-stub>
+      <ccardheader-stub>
+        Simple bar chart
+      </ccardheader-stub>
+       
+      <ccardbody-stub>
        <cchartbarsimple-stub
          backgroundcolor="danger"
          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
          label="Sales"
        />
+      </ccardbody-stub>
    </ccard-stub>
  </ccardgroup-stub>
 </div>
@@ -2,9 +2,7 @@ import Vue from 'vue'
 import { shallowMount, mount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import Brands from '@/views/icons/Brands'
-import { CIconPlugin } from '@coreui/icons/vue'

-Vue.use(CIconPlugin)
 Vue.use(CoreuiVue)

 describe('Brands.vue', () => {
@@ -1,11 +1,9 @@
 import Vue from 'vue'
 import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
-import { CIconPlugin } from '@coreui/icons/vue'
 import Flags from '@/views/icons/Flags'

 Vue.use(CoreuiVue)
-Vue.use(CIconPlugin)

 describe('Flags.vue', () => {
  it('has a name', () => {
@@ -11,8 +11,8 @@ exports[`Alerts.vue renders correctly 1`] = `
  >
    <ccard-stub>
      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
+        <cicon-stub
+          name="cil-justify-center"
        />
         
        <strong>
@@ -43,6 +43,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="primary"
+            fade="true"
            show="true"
          >
            Primary Alert
@@ -50,6 +51,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="secondary"
+            fade="true"
            show="true"
          >
            Secondary Alert
@@ -57,6 +59,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="success"
+            fade="true"
            show="true"
          >
            Success Alert
@@ -64,6 +67,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="danger"
+            fade="true"
            show="true"
          >
            Danger Alert
@@ -71,6 +75,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="warning"
+            fade="true"
            show="true"
          >
            Warning Alert
@@ -78,6 +83,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="info"
+            fade="true"
            show="true"
          >
            Info Alert
@@ -85,6 +91,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="light"
+            fade="true"
            show="true"
          >
            Light Alert
@@ -92,6 +99,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="dark"
+            fade="true"
            show="true"
          >
            Dark Alert
@@ -108,8 +116,8 @@ exports[`Alerts.vue renders correctly 1`] = `
  >
    <ccard-stub>
      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
+        <cicon-stub
+          name="cil-justify-center"
        />
         Alert
        
@@ -126,6 +134,7 @@ exports[`Alerts.vue renders correctly 1`] = `
        <div>
          <calert-stub
            color="primary"
+            fade="true"
            show="true"
          >
            
@@ -142,6 +151,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="secondary"
+            fade="true"
            show="true"
          >
            
@@ -158,6 +168,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="success"
+            fade="true"
            show="true"
          >
            
@@ -174,6 +185,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="danger"
+            fade="true"
            show="true"
          >
            
@@ -190,6 +202,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="warning"
+            fade="true"
            show="true"
          >
            
@@ -206,6 +219,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="info"
+            fade="true"
            show="true"
          >
            
@@ -222,6 +236,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="light"
+            fade="true"
            show="true"
          >
            
@@ -238,6 +253,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           
          <calert-stub
            color="dark"
+            fade="true"
            show="true"
          >
            
@@ -250,7 +266,6 @@ exports[`Alerts.vue renders correctly 1`] = `
              exactactiveclass="active"
              href="#"
              routertag="a"
-              tag="span"
              target="_self"
            >
              an example link
@@ -271,8 +286,8 @@ exports[`Alerts.vue renders correctly 1`] = `
  >
    <ccard-stub>
      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
+        <cicon-stub
+          name="cil-justify-center"
        />
         Alerts 
        <small>
@@ -283,6 +298,7 @@ exports[`Alerts.vue renders correctly 1`] = `
      <ccardbody-stub>
        <calert-stub
          color="success"
+          fade="true"
          show="true"
        >
          <h4
@@ -320,8 +336,8 @@ exports[`Alerts.vue renders correctly 1`] = `
  >
    <ccard-stub>
      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
+        <cicon-stub
+          name="cil-justify-center"
        />
         Alerts
        
@@ -334,6 +350,7 @@ exports[`Alerts.vue renders correctly 1`] = `
        <calert-stub
          closebutton="true"
          color="secondary"
+          fade="true"
          show="true"
        >
          
@@ -341,20 +358,10 @@ exports[`Alerts.vue renders correctly 1`] = `
        
        </calert-stub>
         
-        <calert-stub
-          closebutton="true"
-          color="secondary"
-          fade="true"
-          show="true"
-        >
-          
-          Dismissible Alert with fade effect!
-        
-        </calert-stub>
-         
        <calert-stub
          class="alert-dismissible"
          color="secondary"
+          fade="true"
          show="true"
        >
          
@@ -395,8 +402,8 @@ exports[`Alerts.vue renders correctly 1`] = `
     
    <ccard-stub>
      <ccardheader-stub>
-        <i
-          class="fa fa-align-justify"
+        <cicon-stub
+          name="cil-justify-center"
        />
         Alerts
        
@@ -426,6 +433,7 @@ exports[`Alerts.vue renders correctly 1`] = `
          <calert-stub
            closebutton="true"
            color="info"
+            fade="true"
            show="10"
          >
            
@@ -10,12 +10,13 @@ exports[`Badges.vue renders correctly 1`] = `
    <div
      class="card"
    >
-      <!---->
      <header
        class="card-header"
      >
-        <i
-          class="fa fa-align-justify"
+        <svg
+          class="c-icon"
+          viewBox="0 0 64 64"
+          xmlns="http://www.w3.org/2000/svg"
        />
         
        <strong>
@@ -106,7 +107,6 @@ exports[`Badges.vue renders correctly 1`] = `
          </span>
        </button>
      </footer>
-      <!---->
    </div>
  </div>
   
@@ -116,12 +116,13 @@ exports[`Badges.vue renders correctly 1`] = `
    <div
      class="card"
    >
-      <!---->
      <header
        class="card-header"
      >
-        <i
-          class="fa fa-align-justify"
+        <svg
+          class="c-icon"
+          viewBox="0 0 64 64"
+          xmlns="http://www.w3.org/2000/svg"
        />
         Badge
        
@@ -181,23 +182,23 @@ exports[`Badges.vue renders correctly 1`] = `
          Dark
        </span>
      </div>
-      <!---->
    </div>
     
    <div
      class="card"
    >
-      <!---->
      <header
        class="card-header"
      >
-        <i
-          class="fa fa-align-justify"
+        <svg
+          class="c-icon"
+          viewBox="0 0 64 64"
+          xmlns="http://www.w3.org/2000/svg"
        />
         Badge
        
        <small>
-          pills
+          shape="pill"
        </small>
      </header>
       
@@ -252,18 +253,18 @@ exports[`Badges.vue renders correctly 1`] = `
          Dark
        </span>
      </div>
-      <!---->
    </div>
     
    <div
      class="card"
    >
-      <!---->
      <header
        class="card-header"
      >
-        <i
-          class="fa fa-align-justify"
+        <svg
+          class="c-icon"
+          viewBox="0 0 64 64"
+          xmlns="http://www.w3.org/2000/svg"
        />
         Badge
        
@@ -339,7 +340,6 @@ exports[`Badges.vue renders correctly 1`] = `
          Dark
        </a>
      </div>
-      <!---->
    </div>
  </div>
 </div>
@@ -14,8 +14,8 @@ exports[`Modals.vue renders correctly 1`] = `
      >
        <ccard-stub>
          <ccardheader-stub>
-            <i
-              class="fa fa-align-justify"
+            <cicon-stub
+              name="cil-justify-center"
            />
             Bootstrap Modals
            
@@ -233,6 +233,7 @@ exports[`Modals.vue renders correctly 1`] = `
  <cmodal-stub
    backdrop="true"
    closeonbackdrop="true"
+    color="primary"
    fade="true"
    title="Modal title"
  >
@@ -32,7 +32,6 @@ exports[`Login.vue renders correctly 1`] = `
                autocomplete="username email"
                lazy="400"
                placeholder="Username"
-                prependhtml=<i class='cui-user'></i>
                type="text"
              />
               
@@ -40,7 +39,6 @@ exports[`Login.vue renders correctly 1`] = `
                autocomplete="curent-password"
                lazy="400"
                placeholder="Password"
-                prependhtml=<i class='cui-lock-locked'></i>
                type="password"
              />
               
@@ -90,7 +88,9 @@ exports[`Login.vue renders correctly 1`] = `
         
        <ccard-stub
          bodywrapper="true"
-          class="text-white text-center bg-primary py-5 d-md-down-none"
+          class="text-center py-5 d-md-down-none"
+          color="primary"
+          textcolor="white"
        >
          <h2>
            Sign up
@@ -41,7 +41,6 @@ exports[`Page404.vue renders correctly 1`] = `
          class="mb-3"
          lazy="400"
          placeholder="What are you looking for?"
-          prependhtml=<i class='cui-magnifying-glass'></i>
          type="text"
        />
      </div>
@@ -38,7 +38,6 @@ exports[`Page500.vue renders correctly 1`] = `
        class="mb-3"
        lazy="400"
        placeholder="What are you looking for?"
-        prependhtml=<i class='cui-magnifying-glass'></i>
        type="text"
      />
    </ccol-stub>
@@ -34,7 +34,6 @@ exports[`Register.vue renders correctly 1`] = `
              autocomplete="username"
              lazy="400"
              placeholder="Username"
-              prependhtml=<i class='cui-user'></i>
              type="text"
            />
             
@@ -42,7 +41,7 @@ exports[`Register.vue renders correctly 1`] = `
              autocomplete="email"
              lazy="400"
              placeholder="Email"
-              prependhtml="@"
+              prepend="@"
              type="text"
            />
             
@@ -50,7 +49,6 @@ exports[`Register.vue renders correctly 1`] = `
              autocomplete="new-password"
              lazy="400"
              placeholder="Password"
-              prependhtml=<i class='cui-lock-locked'></i>
              type="password"
            />
             
@@ -59,7 +57,6 @@ exports[`Register.vue renders correctly 1`] = `
              class="mb-4"
              lazy="400"
              placeholder="Repeat password"
-              prependhtml=<i class='cui-lock-locked'></i>
              type="password"
            />
             
@@ -5,12 +5,13 @@ exports[`Colors.vue renders correctly 1`] = `
  <div
    class="card"
  >
-    <!---->
    <header
      class="card-header"
    >
-      <i
-        class="cui-drop"
+      <svg
+        class="c-icon"
+        viewBox="0 0 64 64"
+        xmlns="http://www.w3.org/2000/svg"
      />
       Theme colors
    
@@ -399,18 +400,18 @@ exports[`Colors.vue renders correctly 1`] = `
        </div>
      </div>
    </div>
-    <!---->
  </div>
   
  <div
    class="card"
  >
-    <!---->
    <header
      class="card-header"
    >
-      <i
-        class="cui-drop"
+      <svg
+        class="c-icon"
+        viewBox="0 0 64 64"
+        xmlns="http://www.w3.org/2000/svg"
      />
       Grays
    
@@ -846,7 +847,6 @@ exports[`Colors.vue renders correctly 1`] = `
        </div>
      </div>
    </div>
-    <!---->
  </div>
 </div>
 `;
@@ -17,14 +17,14 @@ exports[`User.vue renders correctly 1`] = `
      </ccardheader-stub>
       
      <ccardbody-stub>
-        <ctable-stub
-          defaultsorter="[object Object]"
+        <cdatatable-stub
          fields="[object Object],[object Object]"
          fixed="true"
          items="[object Object]"
          itemsperpage="10"
          responsive="true"
          small=""
+          sortervalue="[object Object]"
          striped="true"
        />
      </ccardbody-stub>
@@ -10,22 +10,28 @@ exports[`Users.vue renders correctly 1`] = `
    xl="8"
  >
    <ccard-stub
-      bodywrapper="true"
-      headerhtml="Users"
      name="slide"
    >
-      <ctable-stub
+      <ccardheader-stub>
+        
+          Users
+        
+      </ccardheader-stub>
+       
+      <ccardbody-stub>
+        <cdatatable-stub
          clickablerows="true"
-        defaultsorter="[object Object]"
          fields="[object Object],[object Object],[object Object],[object Object]"
          hover="true"
-        indexcolumn="true"
+          index-column=""
          items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
          itemsperpage="5"
          pagination="[object Object]"
          responsive="true"
+          sortervalue="[object Object]"
          striped="true"
        />
+      </ccardbody-stub>
    </ccard-stub>
  </ccol-stub>
 </crow-stub>
@@ -2,9 +2,7 @@ import Vue from 'vue'
 import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import Widgets from '@/views/widgets/Widgets'
-import { CIconPlugin } from '@coreui/icons/vue'

-Vue.use(CIconPlugin)
 Vue.use(CoreuiVue)

 describe('Widgets.vue', () => {
--- a/Show More
+++ b/Show More