diff --git a/vue/package.json b/vue/package.json
index 13618118a2..f8650eb233 100644
--- a/vue/package.json
+++ b/vue/package.json
@@ -57,9 +57,13 @@
     "vue-property-decorator": "^7.2.0",
     "vue": "^2.5.17",
     "vue-template-compiler": "^2.5.17",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "ionicons": "^4.6.0"
   },
   "dependencies": {
-    "@ionic/core": "^4.0.0"
+    "@ionic/core": "^4.6.0"
+  },
+  "peerDependencies": {
+    "ionicons": "^4.5.10-2"
   }
 }
diff --git a/vue/src/api-utils.ts b/vue/src/api-utils.ts
index c792130dd2..eef85607e8 100644
--- a/vue/src/api-utils.ts
+++ b/vue/src/api-utils.ts
@@ -1,3 +1,5 @@
+import { HTMLStencilElement } from '@ionic/core';
+
 // A proxy method that initializes the controller and calls requested method
 export function proxyMethod(tag: string, method: string, ...opts: any[]): Promise<any> {
   return initController(tag).then((ctrl: any) => ctrl[method].apply(ctrl, opts));
diff --git a/vue/src/app-initialize.ts b/vue/src/app-initialize.ts
index 79f4f9b156..b80f1e7308 100644
--- a/vue/src/app-initialize.ts
+++ b/vue/src/app-initialize.ts
@@ -4,7 +4,7 @@ import { IonicConfig } from '@ionic/core';
 
 // Webpack import for ionicons
 import { addIcons } from 'ionicons';
-import { ICON_PATHS } from 'ionicons/icons';
+import { close, reorder, menu, arrowDown, arrowForward, arrowBack, search, closeCircle } from 'ionicons/icons';
 
 // import '@ionic/core/css/ionic.bundle.css';
 // import 'ionicons/dist/collection/icon/icon.css';
@@ -18,5 +18,23 @@ export function appInitialize(config?: IonicConfig) {
 
   Ionic.config = config;
   defineCustomElements(window);
-  addIcons(ICON_PATHS);
+  // Icons that are used by internal components
+  addIcons({
+    'ios-close': close.ios,
+    'md-close': close.md,
+    'ios-reorder': reorder.ios,
+    'md-reorder': reorder.md,
+    'ios-menu': menu.ios,
+    'md-menu': menu.md,
+    'ios-arrow-forward': arrowForward.ios,
+    'md-arrow-forward': arrowForward.md,
+    'ios-arrow-back': arrowBack.ios,
+    'md-arrow-back': arrowBack.md,
+    'ios-arrow-down': arrowDown.ios,
+    'md-arrow-down': arrowDown.md,
+    'ios-search': search.ios,
+    'md-search': search.md,
+    'ios-close-circle': closeCircle.ios,
+    'md-close-circle': closeCircle.md,
+  });
 }
diff --git a/vue/src/components/ion-page.ts b/vue/src/components/ion-page.ts
new file mode 100644
index 0000000000..122cb0616d
--- /dev/null
+++ b/vue/src/components/ion-page.ts
@@ -0,0 +1,9 @@
+import { CreateElement, RenderContext } from 'vue';
+
+export default {
+  name: 'IonPage',
+  functional: true,
+  render(h: CreateElement, { children }: RenderContext) {
+    return h('div', { class: { 'ion-page':true } }, children);
+  }
+};
diff --git a/vue/src/interfaces.ts b/vue/src/interfaces.ts
index aadacc9019..d18669013f 100644
--- a/vue/src/interfaces.ts
+++ b/vue/src/interfaces.ts
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import { RouterDirection } from '@ionic/core';
+import { RouterDirection, HTMLStencilElement } from '@ionic/core';
 import { RouterOptions } from 'vue-router/types/router';
 
 declare module 'vue-router/types/router' {
@@ -42,8 +42,6 @@ export interface IonicWindow extends Window {
   Ionic: IonicGlobal;
 }
 
-
-
 export interface FrameworkDelegate {
   attachViewToDom(parentElement: HTMLElement, component: HTMLElement | WebpackFunction | object | Vue, opts?: object, classes?: string[]): Promise<HTMLElement>;
   removeViewFromDom(parentElement: HTMLElement, childElement: HTMLVueElement): Promise<void>;
diff --git a/vue/src/util.ts b/vue/src/util.ts
index d36db39491..05f1a7e6d9 100644
--- a/vue/src/util.ts
+++ b/vue/src/util.ts
@@ -1,3 +1,5 @@
+import { HTMLStencilElement } from '@ionic/core';
+
 export class OverlayBaseController<Opts, Overlay> {
   constructor(private ctrl: string) {}