diff --git a/vue/CIcon.vue b/vue/CIcon.vue
index c992d348f..810697208 100644
--- a/vue/CIcon.vue
+++ b/vue/CIcon.vue
@@ -1,21 +1,41 @@
 <template>
-  <svg width="64" height="64" v-html="computedCode"></svg>
+  <svg
+    viewBox="0 0 64 64"
+    :style="style"
+    v-html="computedCode"
+  ></svg>
 </template>
 
 <script>
 export default {
   name: 'CIcon',
+  //This object contains icons added before component registration
   icons: {},
   props: {
-    iconCode: String,
-    icon: String
-  },
-  mounted () {
-    console.log(this.$options.icons)
+    name: String,
+    content: String,
+    fill: String,
+    background: String
   },
   computed: {
+    iconName () {
+      return this.name.includes('-') ? this.toCamelCase(this.name) : this.name
+    },
     computedCode () {
-      return this.iconCode || this.$options.icons[this.icon]
+      return this.content || this.$options.icons[this.iconName]
+    },
+    style () {
+      return {
+        fill: this.fill || 'currentColor',
+        background: this.background
+      }
+    }
+  },
+  methods: {
+    toCamelCase (str) {
+      return str.replace(/([-_][a-z])/ig, ($1) => {
+        return $1.toUpperCase().replace('-', '')
+      })
     }
   }
 }