diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 16c208028..0a99fd495 100644
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -67,7 +67,6 @@
     import Modal from '../modal/Modal'
     import config from '../../utils/config'
     import { removeElement } from '../../utils/helpers'
-    import BaseElementMixin from '../../utils/BaseElementMixin'
 
     export default {
         name: 'BDialog',
@@ -75,11 +74,11 @@
             [Icon.name]: Icon
         },
         extends: Modal,
-        mixins: [BaseElementMixin],
         props: {
             title: String,
             message: String,
             icon: String,
+            iconPack: String,
             hasIcon: Boolean,
             type: {
                 type: String,
diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
index 320ededc9..13ad910c7 100644
--- a/src/components/message/Message.vue
+++ b/src/components/message/Message.vue
@@ -18,7 +18,7 @@
                     <div v-if="icon && hasIcon" class="media-left">
                         <b-icon
                             :icon="icon"
-                            :icon-pack="iconPack"
+                            :pack="iconPack"
                             :class="type"
                             both
                             :size="newIconSize"/>
diff --git a/src/components/notification/Notification.vue b/src/components/notification/Notification.vue
index b79ebc444..614e130dc 100644
--- a/src/components/notification/Notification.vue
+++ b/src/components/notification/Notification.vue
@@ -14,7 +14,7 @@
                 <div v-if="icon && hasIcon" class="media-left">
                     <b-icon
                         :icon="icon"
-                        :icon-pack="iconPack"
+                        :pack="iconPack"
                         both
                         size="is-large"/>
                 </div>
diff --git a/src/components/pagination/Pagination.vue b/src/components/pagination/Pagination.vue
index bcf4e1cf1..0a45ece6f 100644
--- a/src/components/pagination/Pagination.vue
+++ b/src/components/pagination/Pagination.vue
@@ -5,10 +5,10 @@
             href="#"
             class="pagination-previous"
             :disabled="!hasPrev"
-            @click.prevent="prev" >
+            @click.prevent="prev">
             <b-icon
                 icon="chevron-left"
-                :icon-pack="iconPack"
+                :pack="iconPack"
                 both/>
         </a>
         <a
@@ -16,10 +16,10 @@
             href="#"
             class="pagination-next"
             :disabled="!hasNext"
-            @click.prevent="next" >
+            @click.prevent="next">
             <b-icon
                 icon="chevron-right"
-                :icon-pack="iconPack"
+                :pack="iconPack"
                 both/>
         </a>
         <ul class="pagination-list" v-if="!simple">
@@ -72,14 +72,12 @@
 
 <script>
     import Icon from '../icon/Icon'
-    import BaseElementMixin from '../../utils/BaseElementMixin'
 
     export default {
         name: 'BPagination',
         components: {
             [Icon.name]: Icon
         },
-        mixins: [BaseElementMixin],
         props: {
             total: [Number, String],
             perPage: {
@@ -93,7 +91,8 @@
             size: String,
             simple: Boolean,
             rounded: Boolean,
-            order: String
+            order: String,
+            iconPack: String
         },
         computed: {
             rootClasses() {
diff --git a/src/components/table/Table.vue b/src/components/table/Table.vue
index ee09fe82b..768dc7283 100644
--- a/src/components/table/Table.vue
+++ b/src/components/table/Table.vue
@@ -51,7 +51,7 @@
                                 <b-icon
                                     v-show="currentSortColumn === column"
                                     icon="arrow-up"
-                                    :icon-pack="iconPack"
+                                    :pack="iconPack"
                                     both
                                     size="is-small"
                                     :class="{ 'is-desc': !isAsc }"/>
@@ -80,7 +80,7 @@
                                     @click.stop="toggleDetails(row)">
                                     <b-icon
                                         icon="chevron-right"
-                                        :icon-pack="iconPack"
+                                        :pack="iconPack"
                                         both
                                         :class="{'is-expanded': isVisibleDetailRow(row)}"/>
                                 </a>
@@ -181,8 +181,6 @@
     import TableMobileSort from './TableMobileSort'
     import TableColumn from './TableColumn'
 
-    import BaseElementMixin from '../../utils/BaseElementMixin'
-
     export default {
         name: 'BTable',
         components: {
@@ -192,7 +190,6 @@
             [TableMobileSort.name]: TableMobileSort,
             [TableColumn.name]: TableColumn
         },
-        mixins: [BaseElementMixin],
         props: {
             data: {
                 type: Array,
@@ -261,7 +258,8 @@
             total: {
                 type: [Number, String],
                 default: 0
-            }
+            },
+            iconPack: String
         },
         data() {
             return {
diff --git a/src/components/tabs/TabItem.vue b/src/components/tabs/TabItem.vue
index e905588a7..324cc4483 100644
--- a/src/components/tabs/TabItem.vue
+++ b/src/components/tabs/TabItem.vue
@@ -7,14 +7,12 @@
 </template>
 
 <script>
-    import BaseElementMixin from '../../utils/BaseElementMixin'
-
     export default {
         name: 'BTabItem',
-        mixins: [BaseElementMixin],
         props: {
             label: String,
             icon: String,
+            iconPack: String,
             disabled: Boolean,
             visible: {
                 type: Boolean,
diff --git a/src/utils/BaseElementMixin.js b/src/utils/BaseElementMixin.js
deleted file mode 100644
index 1b41521ff..000000000
--- a/src/utils/BaseElementMixin.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import config from './config'
-
-export default {
-    props: {
-        iconPack: String
-    },
-    data() {
-        return {
-            newIconPack: this.iconPack || config.defaultIconPack
-        }
-    }
-}
diff --git a/src/utils/FormElementMixin.js b/src/utils/FormElementMixin.js
index 891eebdc6..808caae69 100644
--- a/src/utils/FormElementMixin.js
+++ b/src/utils/FormElementMixin.js
@@ -1,13 +1,13 @@
-import BaseElementMixin from './BaseElementMixin'
+import config from '../utils/config'
 
 export default {
-    mixins: [BaseElementMixin],
     props: {
         size: String,
         expanded: Boolean,
         loading: Boolean,
         rounded: Boolean,
         icon: String,
+        iconPack: String,
         // Native options to use in HTML5 validation
         autocomplete: String,
         maxlength: [Number, String]
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             isValid: true,
-            isFocused: false
+            isFocused: false,
+            newIconPack: this.iconPack || config.defaultIconPack
         }
     },
     computed: {
diff --git a/src/utils/MessageMixin.js b/src/utils/MessageMixin.js
index 14df7414e..4e630f333 100644
--- a/src/utils/MessageMixin.js
+++ b/src/utils/MessageMixin.js
@@ -1,8 +1,6 @@
 import Icon from '../components/icon/Icon'
-import BaseElementMixin from './BaseElementMixin'
 
 export default {
-    mixins: [BaseElementMixin],
     components: {
         [Icon.name]: Icon
     },
@@ -19,6 +17,7 @@ export default {
         type: String,
         hasIcon: Boolean,
         size: String,
+        iconPack: String,
         iconSize: String,
         autoClose: {
             type: Boolean,