diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md
index 2031853bef..8cd0162856 100644
--- a/core/src/components/fab/readme.md
+++ b/core/src/components/fab/readme.md
@@ -334,78 +334,78 @@ export class FabExample {
     <!-- fab placed to the top end -->
     <ion-fab vertical="top" horizontal="end" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="add"></ion-icon>
+        <ion-icon :icon="add"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the bottom end -->
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="arrow-forward-circle"></ion-icon>
+        <ion-icon :icon="arrowForwardCircle"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the top start -->
     <ion-fab vertical="top" horizontal="start" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="arrow-back-circle"></ion-icon>
+        <ion-icon :icon="arrowBackCircle"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the bottom start -->
     <ion-fab vertical="bottom" horizontal="start" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="arrow-up-circle"></ion-icon>
+        <ion-icon :icon="arrowUpCircle"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the (vertical) center and start -->
     <ion-fab vertical="center" horizontal="start" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="share"></ion-icon>
+        <ion-icon :icon="share"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the (vertical) center and end -->
     <ion-fab vertical="center" horizontal="end" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="add"></ion-icon>
+        <ion-icon :icon="add"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the top and end and on the top edge of the content overlapping header -->
     <ion-fab vertical="top" horizontal="end" edge slot="fixed">
       <ion-fab-button>
-        <ion-icon name="person"></ion-icon>
+        <ion-icon :icon="person"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->
     <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
       <ion-fab-button>
-        <ion-icon name="settings"></ion-icon>
+        <ion-icon :icon="settings"></ion-icon>
       </ion-fab-button>
       <ion-fab-list side="end">
-        <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+        <ion-fab-button><ion-icon :icon="logoVimeo"></ion-icon></ion-fab-button>
       </ion-fab-list>
     </ion-fab>
 
     <!-- fab placed in the center of the content with a list on each side -->
     <ion-fab vertical="center" horizontal="center" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="share"></ion-icon>
+        <ion-icon :icon="share"></ion-icon>
       </ion-fab-button>
       <ion-fab-list side="top">
-        <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+        <ion-fab-button><ion-icon :icon="logoVimeo"></ion-icon></ion-fab-button>
       </ion-fab-list>
       <ion-fab-list side="bottom">
-        <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+        <ion-fab-button><ion-icon :icon="logoFacebook"></ion-icon></ion-fab-button>
       </ion-fab-list>
       <ion-fab-list side="start">
-        <ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
+        <ion-fab-button><ion-icon :icon="logoInstagram"></ion-icon></ion-fab-button>
       </ion-fab-list>
       <ion-fab-list side="end">
-        <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+        <ion-fab-button><ion-icon :icon="logoTwitter"></ion-icon></ion-fab-button>
       </ion-fab-list>
     </ion-fab>
   </ion-content>
@@ -433,6 +433,7 @@ import {
   add, 
   arrowBackCircle,
   arrowForwardCircle, 
+  arrowUpCircle,
   logoFacebook, 
   logoInstagram, 
   logoTwitter, 
@@ -460,6 +461,7 @@ export default defineComponent({
       add, 
       arrowBackCircle,
       arrowForwardCircle, 
+      arrowUpCircle,
       logoFacebook, 
       logoInstagram, 
       logoTwitter, 
diff --git a/core/src/components/fab/usage/vue.md b/core/src/components/fab/usage/vue.md
index 8e5c3a1ea5..f95bd18eed 100644
--- a/core/src/components/fab/usage/vue.md
+++ b/core/src/components/fab/usage/vue.md
@@ -10,78 +10,78 @@
     <!-- fab placed to the top end -->
     <ion-fab vertical="top" horizontal="end" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="add"></ion-icon>
+        <ion-icon :icon="add"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the bottom end -->
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="arrow-forward-circle"></ion-icon>
+        <ion-icon :icon="arrowForwardCircle"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the top start -->
     <ion-fab vertical="top" horizontal="start" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="arrow-back-circle"></ion-icon>
+        <ion-icon :icon="arrowBackCircle"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the bottom start -->
     <ion-fab vertical="bottom" horizontal="start" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="arrow-up-circle"></ion-icon>
+        <ion-icon :icon="arrowUpCircle"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the (vertical) center and start -->
     <ion-fab vertical="center" horizontal="start" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="share"></ion-icon>
+        <ion-icon :icon="share"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the (vertical) center and end -->
     <ion-fab vertical="center" horizontal="end" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="add"></ion-icon>
+        <ion-icon :icon="add"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the top and end and on the top edge of the content overlapping header -->
     <ion-fab vertical="top" horizontal="end" edge slot="fixed">
       <ion-fab-button>
-        <ion-icon name="person"></ion-icon>
+        <ion-icon :icon="person"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
     <!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->
     <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
       <ion-fab-button>
-        <ion-icon name="settings"></ion-icon>
+        <ion-icon :icon="settings"></ion-icon>
       </ion-fab-button>
       <ion-fab-list side="end">
-        <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+        <ion-fab-button><ion-icon :icon="logoVimeo"></ion-icon></ion-fab-button>
       </ion-fab-list>
     </ion-fab>
 
     <!-- fab placed in the center of the content with a list on each side -->
     <ion-fab vertical="center" horizontal="center" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="share"></ion-icon>
+        <ion-icon :icon="share"></ion-icon>
       </ion-fab-button>
       <ion-fab-list side="top">
-        <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+        <ion-fab-button><ion-icon :icon="logoVimeo"></ion-icon></ion-fab-button>
       </ion-fab-list>
       <ion-fab-list side="bottom">
-        <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+        <ion-fab-button><ion-icon :icon="logoFacebook"></ion-icon></ion-fab-button>
       </ion-fab-list>
       <ion-fab-list side="start">
-        <ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
+        <ion-fab-button><ion-icon :icon="logoInstagram"></ion-icon></ion-fab-button>
       </ion-fab-list>
       <ion-fab-list side="end">
-        <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+        <ion-fab-button><ion-icon :icon="logoTwitter"></ion-icon></ion-fab-button>
       </ion-fab-list>
     </ion-fab>
   </ion-content>
@@ -109,6 +109,7 @@ import {
   add, 
   arrowBackCircle,
   arrowForwardCircle, 
+  arrowUpCircle,
   logoFacebook, 
   logoInstagram, 
   logoTwitter, 
@@ -136,6 +137,7 @@ export default defineComponent({
       add, 
       arrowBackCircle,
       arrowForwardCircle, 
+      arrowUpCircle,
       logoFacebook, 
       logoInstagram, 
       logoTwitter,