From 9318d2418ec144bbce4a3b7ead33cf099d6ec25b Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 3 Jan 2020 12:19:17 -0500
Subject: [PATCH] fix(icons): fix the ellipsis fill in ionicons (#20137)

- update docs icon usage for Ionicons 5
- update tests to remove mode prefixed icons
- update tests to use the correct icons for Ionicons 5
- update to latest ionicons dev which fixes the ellipsis icon fill
---
 core/package.json                             |  2 +-
 .../components/button/test/toolbar/index.html | 10 ++--
 core/src/components/buttons/readme.md         | 20 +++----
 .../components/buttons/test/icon/index.html   |  2 +-
 core/src/components/buttons/usage/angular.md  |  4 +-
 .../components/buttons/usage/javascript.md    |  4 +-
 core/src/components/buttons/usage/react.md    |  6 +-
 core/src/components/buttons/usage/vue.md      |  6 +-
 .../card/test/translucent/index.html          |  2 +-
 core/src/components/fab/readme.md             | 18 +++---
 core/src/components/fab/usage/angular.md      |  6 +-
 core/src/components/fab/usage/javascript.md   |  6 +-
 core/src/components/fab/usage/react.md        |  6 +-
 core/src/components/fab/usage/vue.md          |  6 +-
 core/src/components/icon/usage/angular.md     |  8 +--
 core/src/components/icon/usage/javascript.md  |  8 +--
 core/src/components/icon/usage/react.md       | 16 ++----
 core/src/components/icon/usage/vue.md         |  8 +--
 core/src/components/item-sliding/readme.md    | 32 +++++------
 .../item-sliding/test/basic/index.html        | 22 ++++----
 .../item-sliding/test/lines/index.html        |  2 +-
 .../components/item-sliding/usage/angular.md  |  8 +--
 .../item-sliding/usage/javascript.md          |  8 +--
 .../components/item-sliding/usage/react.md    |  8 +--
 core/src/components/item-sliding/usage/vue.md |  8 +--
 .../src/components/list/test/icons/index.html |  2 +-
 .../components/range/test/basic/index.html    |  8 +--
 .../range/test/standalone/index.html          |  8 +--
 core/src/components/tab-button/readme.md      |  8 +--
 .../components/tab-button/usage/angular.md    |  2 +-
 .../components/tab-button/usage/javascript.md |  2 +-
 core/src/components/tab-button/usage/react.md |  2 +-
 core/src/components/tab-button/usage/vue.md   |  2 +-
 core/src/components/tabs/readme.md            |  8 +--
 core/src/components/tabs/usage/angular.md     |  2 +-
 core/src/components/tabs/usage/javascript.md  |  2 +-
 core/src/components/tabs/usage/react.md       |  2 +-
 core/src/components/tabs/usage/vue.md         |  2 +-
 core/src/components/toolbar/readme.md         | 56 +++++++++----------
 .../components/toolbar/test/basic/index.html  |  2 +-
 .../components/toolbar/test/colors/index.html | 22 ++++----
 .../toolbar/test/scenarios/index.html         |  6 +-
 .../components/toolbar/test/spec/index.html   |  2 +-
 core/src/components/toolbar/usage/angular.md  | 14 ++---
 .../components/toolbar/usage/javascript.md    | 14 ++---
 core/src/components/toolbar/usage/react.md    | 14 ++---
 core/src/components/toolbar/usage/vue.md      | 14 ++---
 core/src/themes/test/css-variables/index.html | 30 +++++-----
 48 files changed, 217 insertions(+), 233 deletions(-)

diff --git a/core/package.json b/core/package.json
index 96199bfde1..ca2bdf48df 100644
--- a/core/package.json
+++ b/core/package.json
@@ -30,7 +30,7 @@
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "^5.0.0-13",
+    "ionicons": "5.0.0-15",
     "tslib": "^1.10.0"
   },
   "devDependencies": {
diff --git a/core/src/components/button/test/toolbar/index.html b/core/src/components/button/test/toolbar/index.html
index 8a17767817..de8ecc726f 100644
--- a/core/src/components/button/test/toolbar/index.html
+++ b/core/src/components/button/test/toolbar/index.html
@@ -40,7 +40,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button color="secondary">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
@@ -57,7 +57,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button color="secondary">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
@@ -74,7 +74,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button fill="solid" color="secondary">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
@@ -91,7 +91,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button color="secondary">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Defaults</ion-title>
@@ -108,7 +108,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button color="secondary" class="activated">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Defaults.activated</ion-title>
diff --git a/core/src/components/buttons/readme.md b/core/src/components/buttons/readme.md
index b654e4879c..30587cf014 100644
--- a/core/src/components/buttons/readme.md
+++ b/core/src/components/buttons/readme.md
@@ -30,7 +30,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -39,7 +39,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
   <ion-title>Default Buttons</ion-title>
   <ion-buttons slot="primary">
     <ion-button color="secondary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
 </ion-toolbar>
@@ -80,7 +80,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -89,7 +89,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
   <ion-title>Default Buttons</ion-title>
   <ion-buttons slot="primary">
     <ion-button color="secondary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
 </ion-toolbar>
@@ -148,7 +148,7 @@ export const ButtonsExample: React.FC = () => (
     <IonToolbar>
       <IonButtons slot="secondary">
         <IonButton>
-          <IonIcon slot="icon-only" name="contact" />
+          <IonIcon slot="icon-only" name="person-circle" />
         </IonButton>
         <IonButton>
           <IonIcon slot="icon-only" name="search" />
@@ -157,7 +157,7 @@ export const ButtonsExample: React.FC = () => (
       <IonTitle>Default Buttons</IonTitle>
       <IonButtons slot="primary">
         <IonButton color="secondary">
-          <IonIcon slot="icon-only" name="more" />
+          <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
         </IonButton>
       </IonButtons>
     </IonToolbar>
@@ -173,7 +173,7 @@ export const ButtonsExample: React.FC = () => (
         <IonMenuButton autoHide={false} />
       </IonButtons>
     </IonToolbar>
-    
+
     <IonToolbar>
       <IonButtons collapse="true">
         <IonButton>
@@ -201,7 +201,7 @@ export const ButtonsExample: React.FC = () => (
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="contact"></ion-icon>
+        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
       </ion-button>
       <ion-button>
         <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -210,7 +210,7 @@ export const ButtonsExample: React.FC = () => (
     <ion-title>Default Buttons</ion-title>
     <ion-buttons slot="primary">
       <ion-button color="secondary">
-        <ion-icon slot="icon-only" name="more"></ion-icon>
+        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
@@ -226,7 +226,7 @@ export const ButtonsExample: React.FC = () => (
       <ion-menu-button autoHide="false"></ion-menu-button>
     </ion-buttons>
   </ion-toolbar>
-  
+
   <ion-toolbar>
     <ion-buttons collapse="true">
       <ion-button>
diff --git a/core/src/components/buttons/test/icon/index.html b/core/src/components/buttons/test/icon/index.html
index e528bf9d24..92b1f88321 100644
--- a/core/src/components/buttons/test/icon/index.html
+++ b/core/src/components/buttons/test/icon/index.html
@@ -22,7 +22,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button slot="icon-only">
-            <ion-icon name="more"></ion-icon>
+            <ion-icon ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
       </ion-toolbar>
diff --git a/core/src/components/buttons/usage/angular.md b/core/src/components/buttons/usage/angular.md
index 029528963c..3af3e63a4d 100644
--- a/core/src/components/buttons/usage/angular.md
+++ b/core/src/components/buttons/usage/angular.md
@@ -9,7 +9,7 @@
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -18,7 +18,7 @@
   <ion-title>Default Buttons</ion-title>
   <ion-buttons slot="primary">
     <ion-button color="secondary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
 </ion-toolbar>
diff --git a/core/src/components/buttons/usage/javascript.md b/core/src/components/buttons/usage/javascript.md
index d7b9fbd5eb..707cfc4e16 100644
--- a/core/src/components/buttons/usage/javascript.md
+++ b/core/src/components/buttons/usage/javascript.md
@@ -9,7 +9,7 @@
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -18,7 +18,7 @@
   <ion-title>Default Buttons</ion-title>
   <ion-buttons slot="primary">
     <ion-button color="secondary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
 </ion-toolbar>
diff --git a/core/src/components/buttons/usage/react.md b/core/src/components/buttons/usage/react.md
index 89c089cece..dbb51964ce 100644
--- a/core/src/components/buttons/usage/react.md
+++ b/core/src/components/buttons/usage/react.md
@@ -23,7 +23,7 @@ export const ButtonsExample: React.FC = () => (
     <IonToolbar>
       <IonButtons slot="secondary">
         <IonButton>
-          <IonIcon slot="icon-only" name="contact" />
+          <IonIcon slot="icon-only" name="person-circle" />
         </IonButton>
         <IonButton>
           <IonIcon slot="icon-only" name="search" />
@@ -32,7 +32,7 @@ export const ButtonsExample: React.FC = () => (
       <IonTitle>Default Buttons</IonTitle>
       <IonButtons slot="primary">
         <IonButton color="secondary">
-          <IonIcon slot="icon-only" name="more" />
+          <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
         </IonButton>
       </IonButtons>
     </IonToolbar>
@@ -48,7 +48,7 @@ export const ButtonsExample: React.FC = () => (
         <IonMenuButton autoHide={false} />
       </IonButtons>
     </IonToolbar>
-    
+
     <IonToolbar>
       <IonButtons collapse="true">
         <IonButton>
diff --git a/core/src/components/buttons/usage/vue.md b/core/src/components/buttons/usage/vue.md
index 887a96c729..114cc2579b 100644
--- a/core/src/components/buttons/usage/vue.md
+++ b/core/src/components/buttons/usage/vue.md
@@ -10,7 +10,7 @@
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="contact"></ion-icon>
+        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
       </ion-button>
       <ion-button>
         <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -19,7 +19,7 @@
     <ion-title>Default Buttons</ion-title>
     <ion-buttons slot="primary">
       <ion-button color="secondary">
-        <ion-icon slot="icon-only" name="more"></ion-icon>
+        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
@@ -35,7 +35,7 @@
       <ion-menu-button autoHide="false"></ion-menu-button>
     </ion-buttons>
   </ion-toolbar>
-  
+
   <ion-toolbar>
     <ion-buttons collapse="true">
       <ion-button>
diff --git a/core/src/components/card/test/translucent/index.html b/core/src/components/card/test/translucent/index.html
index a23e7b3cf4..f4d4704c37 100644
--- a/core/src/components/card/test/translucent/index.html
+++ b/core/src/components/card/test/translucent/index.html
@@ -232,7 +232,7 @@
             </ion-col>
             <ion-col class="ion-no-padding ion-text-right">
               <ion-button fill="clear" size="small" color="dark">
-                <ion-icon slot="start" name="share-alt"></ion-icon>
+                <ion-icon slot="start" name="share"></ion-icon>
                 Share
               </ion-button>
             </ion-col>
diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md
index 256233c000..4762403a98 100644
--- a/core/src/components/fab/readme.md
+++ b/core/src/components/fab/readme.md
@@ -21,21 +21,21 @@ Fabs are container elements that contain one or more fab buttons. They should be
   <!-- fab placed to the bottom end -->
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
     <ion-fab-button>
-      <ion-icon name="arrow-dropleft"></ion-icon>
+      <ion-icon name="arrow-forward-circle"></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-dropright"></ion-icon>
+      <ion-icon name="arrow-back-circle"></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-dropup"></ion-icon>
+      <ion-icon name="arrow-up-circle"></ion-icon>
     </ion-fab-button>
   </ion-fab>
 
@@ -110,21 +110,21 @@ export const FabExample: React.FC = () => (
     {/*-- fab placed to the bottom end --*/}
     <IonFab vertical="bottom" horizontal="end" slot="fixed">
       <IonFabButton>
-        <IonIcon name="arrow-dropleft" />
+        <IonIcon name="arrow-forward-circle" />
       </IonFabButton>
     </IonFab>
 
     {/*-- fab placed to the top start --*/}
     <IonFab vertical="top" horizontal="start" slot="fixed">
       <IonFabButton>
-        <IonIcon name="arrow-dropright" />
+        <IonIcon name="arrow-back-circle" />
       </IonFabButton>
     </IonFab>
 
     {/*-- fab placed to the bottom start --*/}
     <IonFab vertical="bottom" horizontal="start" slot="fixed">
       <IonFabButton>
-        <IonIcon name="arrow-dropup" />
+        <IonIcon name="arrow-up-circle" />
       </IonFabButton>
     </IonFab>
 
@@ -197,21 +197,21 @@ export const FabExample: React.FC = () => (
     <!-- fab placed to the bottom end -->
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="arrow-dropleft"></ion-icon>
+        <ion-icon name="arrow-forward-circle"></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-dropright"></ion-icon>
+        <ion-icon name="arrow-back-circle"></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-dropup"></ion-icon>
+        <ion-icon name="arrow-up-circle"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
diff --git a/core/src/components/fab/usage/angular.md b/core/src/components/fab/usage/angular.md
index 8a07afa839..3f13c497c7 100644
--- a/core/src/components/fab/usage/angular.md
+++ b/core/src/components/fab/usage/angular.md
@@ -10,21 +10,21 @@
   <!-- fab placed to the bottom end -->
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
     <ion-fab-button>
-      <ion-icon name="arrow-dropleft"></ion-icon>
+      <ion-icon name="arrow-forward-circle"></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-dropright"></ion-icon>
+      <ion-icon name="arrow-back-circle"></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-dropup"></ion-icon>
+      <ion-icon name="arrow-up-circle"></ion-icon>
     </ion-fab-button>
   </ion-fab>
 
diff --git a/core/src/components/fab/usage/javascript.md b/core/src/components/fab/usage/javascript.md
index 8a07afa839..3f13c497c7 100644
--- a/core/src/components/fab/usage/javascript.md
+++ b/core/src/components/fab/usage/javascript.md
@@ -10,21 +10,21 @@
   <!-- fab placed to the bottom end -->
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
     <ion-fab-button>
-      <ion-icon name="arrow-dropleft"></ion-icon>
+      <ion-icon name="arrow-forward-circle"></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-dropright"></ion-icon>
+      <ion-icon name="arrow-back-circle"></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-dropup"></ion-icon>
+      <ion-icon name="arrow-up-circle"></ion-icon>
     </ion-fab-button>
   </ion-fab>
 
diff --git a/core/src/components/fab/usage/react.md b/core/src/components/fab/usage/react.md
index e37f1967bb..392ec6a352 100644
--- a/core/src/components/fab/usage/react.md
+++ b/core/src/components/fab/usage/react.md
@@ -14,21 +14,21 @@ export const FabExample: React.FC = () => (
     {/*-- fab placed to the bottom end --*/}
     <IonFab vertical="bottom" horizontal="end" slot="fixed">
       <IonFabButton>
-        <IonIcon name="arrow-dropleft" />
+        <IonIcon name="arrow-forward-circle" />
       </IonFabButton>
     </IonFab>
 
     {/*-- fab placed to the top start --*/}
     <IonFab vertical="top" horizontal="start" slot="fixed">
       <IonFabButton>
-        <IonIcon name="arrow-dropright" />
+        <IonIcon name="arrow-back-circle" />
       </IonFabButton>
     </IonFab>
 
     {/*-- fab placed to the bottom start --*/}
     <IonFab vertical="bottom" horizontal="start" slot="fixed">
       <IonFabButton>
-        <IonIcon name="arrow-dropup" />
+        <IonIcon name="arrow-up-circle" />
       </IonFabButton>
     </IonFab>
 
diff --git a/core/src/components/fab/usage/vue.md b/core/src/components/fab/usage/vue.md
index 6c96bb671f..c7f57e6d33 100644
--- a/core/src/components/fab/usage/vue.md
+++ b/core/src/components/fab/usage/vue.md
@@ -11,21 +11,21 @@
     <!-- fab placed to the bottom end -->
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button>
-        <ion-icon name="arrow-dropleft"></ion-icon>
+        <ion-icon name="arrow-forward-circle"></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-dropright"></ion-icon>
+        <ion-icon name="arrow-back-circle"></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-dropup"></ion-icon>
+        <ion-icon name="arrow-up-circle"></ion-icon>
       </ion-fab-button>
     </ion-fab>
 
diff --git a/core/src/components/icon/usage/angular.md b/core/src/components/icon/usage/angular.md
index 97d37c9b7c..7ea7dbe54f 100644
--- a/core/src/components/icon/usage/angular.md
+++ b/core/src/components/icon/usage/angular.md
@@ -1,13 +1,9 @@
 ```html
-<!-- automatically uses the correct "star" icon depending on the mode -->
+<!-- uses "star" icon for both modes -->
 <ion-icon name="star"></ion-icon>
 
 <!-- explicitly set the icon for each mode -->
-<ion-icon ios="ios-home" md="md-home"></ion-icon>
-
-<!-- always use the same icon, no matter what the mode is -->
-<ion-icon name="ios-clock"></ion-icon>
-<ion-icon name="logo-twitter"></ion-icon>
+<ion-icon ios="home" md="star"></ion-icon>
 
 <!-- use a custom svg icon -->
 <ion-icon src="/path/to/external/file.svg"></ion-icon>
diff --git a/core/src/components/icon/usage/javascript.md b/core/src/components/icon/usage/javascript.md
index 97d37c9b7c..7ea7dbe54f 100644
--- a/core/src/components/icon/usage/javascript.md
+++ b/core/src/components/icon/usage/javascript.md
@@ -1,13 +1,9 @@
 ```html
-<!-- automatically uses the correct "star" icon depending on the mode -->
+<!-- uses "star" icon for both modes -->
 <ion-icon name="star"></ion-icon>
 
 <!-- explicitly set the icon for each mode -->
-<ion-icon ios="ios-home" md="md-home"></ion-icon>
-
-<!-- always use the same icon, no matter what the mode is -->
-<ion-icon name="ios-clock"></ion-icon>
-<ion-icon name="logo-twitter"></ion-icon>
+<ion-icon ios="home" md="star"></ion-icon>
 
 <!-- use a custom svg icon -->
 <ion-icon src="/path/to/external/file.svg"></ion-icon>
diff --git a/core/src/components/icon/usage/react.md b/core/src/components/icon/usage/react.md
index 370a05713f..a1843bfcc0 100644
--- a/core/src/components/icon/usage/react.md
+++ b/core/src/components/icon/usage/react.md
@@ -5,22 +5,18 @@ import { IonIcon } from '@ionic/react';
 
 const Example: React.FC<{}> = () => (
   <>
-    {/*-- automatically uses the correct "star" icon depending on the mode --*/}
-    <IonIcon name="star" />
+    {/*-- uses "star" icon for both modes --*/}
+    <IonIcon name="star"/>
 
     {/*-- explicitly set the icon for each mode --*/}
-    <IonIcon ios="ios-home" md="md-home" />
-
-    {/*-- always use the same icon, no matter what the mode is --*/}
-    <IonIcon name="ios-clock" />
-    <IonIcon name="logo-twitter" />
+    <IonIcon ios="home" md="star"/>
 
     {/*-- use a custom svg icon --*/}
-    <IonIcon src="/path/to/external/file.svg" />
+    <IonIcon src="/path/to/external/file.svg"/>
 
     {/*-- set the icon size --*/}
-    <IonIcon size="small" name="heart" />
-    <IonIcon size="large" name="heart" />
+    <IonIcon size="small" name="heart"/>
+    <IonIcon size="large" name="heart"/>
   </>
 );
 
diff --git a/core/src/components/icon/usage/vue.md b/core/src/components/icon/usage/vue.md
index 79a66d8ec6..c009083b38 100644
--- a/core/src/components/icon/usage/vue.md
+++ b/core/src/components/icon/usage/vue.md
@@ -1,14 +1,10 @@
 ```html
 <template>
-  <!-- automatically uses the correct "star" icon depending on the mode -->
+  <!-- uses "star" icon for both modes -->
   <ion-icon name="star"></ion-icon>
 
   <!-- explicitly set the icon for each mode -->
-  <ion-icon ios="ios-home" md="md-home"></ion-icon>
-
-  <!-- always use the same icon, no matter what the mode is -->
-  <ion-icon name="ios-clock"></ion-icon>
-  <ion-icon name="logo-twitter"></ion-icon>
+  <ion-icon ios="home" md="star"></ion-icon>
 
   <!-- use a custom svg icon -->
   <ion-icon src="/path/to/external/file.svg"></ion-icon>
diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md
index 89c81b356a..b91287a1db 100644
--- a/core/src/components/item-sliding/readme.md
+++ b/core/src/components/item-sliding/readme.md
@@ -108,7 +108,7 @@ Options can be expanded to take up the full width of the item if you swipe past
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="start" name="more"></ion-icon>
+        <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -127,7 +127,7 @@ Options can be expanded to take up the full width of the item if you swipe past
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="end" name="more"></ion-icon>
+        <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -146,7 +146,7 @@ Options can be expanded to take up the full width of the item if you swipe past
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="top" name="more"></ion-icon>
+        <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -165,7 +165,7 @@ Options can be expanded to take up the full width of the item if you swipe past
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="bottom" name="more"></ion-icon>
+        <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -255,7 +255,7 @@ Options can be expanded to take up the full width of the item if you swipe past
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="start" name="more"></ion-icon>
+        <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -274,7 +274,7 @@ Options can be expanded to take up the full width of the item if you swipe past
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="end" name="more"></ion-icon>
+        <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -293,7 +293,7 @@ Options can be expanded to take up the full width of the item if you swipe past
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="top" name="more"></ion-icon>
+        <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -312,7 +312,7 @@ Options can be expanded to take up the full width of the item if you swipe past
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="bottom" name="more"></ion-icon>
+        <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -406,7 +406,7 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="start" name="more"></IonIcon>
+        <IonIcon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
@@ -425,7 +425,7 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="end" name="more"></IonIcon>
+        <IonIcon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
@@ -444,7 +444,7 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="top" name="more"></IonIcon>
+        <IonIcon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
@@ -463,7 +463,7 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="bottom" name="more"></IonIcon>
+        <IonIcon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
@@ -555,7 +555,7 @@ export const ItemSlidingExample: React.FC = () => (
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="start" name="more"></ion-icon>
+          <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
@@ -574,7 +574,7 @@ export const ItemSlidingExample: React.FC = () => (
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="end" name="more"></ion-icon>
+          <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
@@ -593,7 +593,7 @@ export const ItemSlidingExample: React.FC = () => (
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="top" name="more"></ion-icon>
+          <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
@@ -612,7 +612,7 @@ export const ItemSlidingExample: React.FC = () => (
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="bottom" name="more"></ion-icon>
+          <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
diff --git a/core/src/components/item-sliding/test/basic/index.html b/core/src/components/item-sliding/test/basic/index.html
index a8063b4df0..813ab055a7 100644
--- a/core/src/components/item-sliding/test/basic/index.html
+++ b/core/src/components/item-sliding/test/basic/index.html
@@ -62,7 +62,7 @@
             </ion-item>
             <ion-item-options class="show-options">
               <ion-item-option color="primary">
-                <ion-icon slot="start" name="more"></ion-icon>
+                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                 <span class="more-text"></span>
               </ion-item-option>
               <ion-item-option color="secondary" onclick="archive('item6')">
@@ -80,12 +80,12 @@
             </ion-item>
             <ion-item-options side="start">
               <ion-item-option color="primary">
-                <ion-icon slot="icon-only" name="more"></ion-icon>
+                <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
               </ion-item-option>
             </ion-item-options>
             <ion-item-options side="end" class="show-options">
               <ion-item-option color="primary">
-                <ion-icon slot="start" name="more"></ion-icon>
+                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                 <span class="more-text"></span>
               </ion-item-option>
               <ion-item-option color="secondary" onclick="archive('item6')">
@@ -183,7 +183,7 @@
             </ion-item>
             <ion-item-options side="start" class="sliding-enabled">
               <ion-item-option color="secondary" expandable onclick="unread('item2')">
-                <ion-icon slot="start" name="ios-checkmark"></ion-icon>
+                <ion-icon slot="start" name="checkmark"></ion-icon>
                 Unread
               </ion-item-option>
             </ion-item-options>
@@ -209,7 +209,7 @@
             </ion-item>
             <ion-item-options side="start" icon-start class="sliding-enabled">
               <ion-item-option color="secondary" expandable onclick="unread('item3')">
-                <ion-icon slot="start" name="ios-checkmark"></ion-icon>
+                <ion-icon slot="start" name="checkmark"></ion-icon>
                 Unread
               </ion-item-option>
             </ion-item-options>
@@ -254,7 +254,7 @@
             </ion-item>
             <ion-item-options>
               <ion-item-option color="primary" expandable>
-                <ion-icon slot="start" name="more"></ion-icon>
+                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                 More
               </ion-item-option>
               <ion-item-option color="secondary" onclick="archive('item5')">
@@ -277,7 +277,7 @@
             </ion-item>
             <ion-item-options icon-start>
               <ion-item-option color="primary">
-                <ion-icon slot="start" name="more"></ion-icon>
+                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                 <span class="more-text"></span>
               </ion-item-option>
               <ion-item-option color="secondary" onclick="archive('item7')">
@@ -332,19 +332,19 @@
             </ion-item>
             <ion-item-options side="start" class="sliding-enabled">
               <ion-item-option color="primary" expandable>
-                <ion-icon slot="start" name="ios-checkmark"></ion-icon>
+                <ion-icon slot="start" name="checkmark"></ion-icon>
                 Btn 1
               </ion-item-option>
               <ion-item-option color="secondary" expandable>
-                <ion-icon slot="start" name="ios-checkmark"></ion-icon>
+                <ion-icon slot="start" name="checkmark"></ion-icon>
                 Btn 2
               </ion-item-option>
               <ion-item-option color="danger" expandable>
-                <ion-icon slot="start" name="ios-checkmark"></ion-icon>
+                <ion-icon slot="start" name="checkmark"></ion-icon>
                 Btn 3
               </ion-item-option>
               <ion-item-option color="tertiary" expandable>
-                <ion-icon slot="start" name="ios-checkmark"></ion-icon>
+                <ion-icon slot="start" name="checkmark"></ion-icon>
                 Btn 4
               </ion-item-option>
             </ion-item-options>
diff --git a/core/src/components/item-sliding/test/lines/index.html b/core/src/components/item-sliding/test/lines/index.html
index 8bd003becc..4023752c2b 100644
--- a/core/src/components/item-sliding/test/lines/index.html
+++ b/core/src/components/item-sliding/test/lines/index.html
@@ -80,7 +80,7 @@
           </ion-item>
           <ion-item-options side="start">
             <ion-item-option color="secondary" expandable>
-              <ion-icon name="ios-checkmark"></ion-icon>
+              <ion-icon name="checkmark"></ion-icon>
               Unread
             </ion-item-option>
           </ion-item-options>
diff --git a/core/src/components/item-sliding/usage/angular.md b/core/src/components/item-sliding/usage/angular.md
index 63d07afa11..fae9330e64 100644
--- a/core/src/components/item-sliding/usage/angular.md
+++ b/core/src/components/item-sliding/usage/angular.md
@@ -73,7 +73,7 @@
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="start" name="more"></ion-icon>
+        <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -92,7 +92,7 @@
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="end" name="more"></ion-icon>
+        <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -111,7 +111,7 @@
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="top" name="more"></ion-icon>
+        <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -130,7 +130,7 @@
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="bottom" name="more"></ion-icon>
+        <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
diff --git a/core/src/components/item-sliding/usage/javascript.md b/core/src/components/item-sliding/usage/javascript.md
index 4884fc0492..abe68377d3 100644
--- a/core/src/components/item-sliding/usage/javascript.md
+++ b/core/src/components/item-sliding/usage/javascript.md
@@ -73,7 +73,7 @@
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="start" name="more"></ion-icon>
+        <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -92,7 +92,7 @@
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="end" name="more"></ion-icon>
+        <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -111,7 +111,7 @@
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="top" name="more"></ion-icon>
+        <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
@@ -130,7 +130,7 @@
     </ion-item>
     <ion-item-options>
       <ion-item-option color="primary">
-        <ion-icon slot="bottom" name="more"></ion-icon>
+        <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         More
       </ion-item-option>
       <ion-item-option color="secondary">
diff --git a/core/src/components/item-sliding/usage/react.md b/core/src/components/item-sliding/usage/react.md
index f09e1f27af..08ceb726d0 100644
--- a/core/src/components/item-sliding/usage/react.md
+++ b/core/src/components/item-sliding/usage/react.md
@@ -77,7 +77,7 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="start" name="more"></IonIcon>
+        <IonIcon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
@@ -96,7 +96,7 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="end" name="more"></IonIcon>
+        <IonIcon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
@@ -115,7 +115,7 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="top" name="more"></IonIcon>
+        <IonIcon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
@@ -134,7 +134,7 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="bottom" name="more"></IonIcon>
+        <IonIcon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
diff --git a/core/src/components/item-sliding/usage/vue.md b/core/src/components/item-sliding/usage/vue.md
index f42519b422..9fb7b5ff08 100644
--- a/core/src/components/item-sliding/usage/vue.md
+++ b/core/src/components/item-sliding/usage/vue.md
@@ -74,7 +74,7 @@
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="start" name="more"></ion-icon>
+          <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
@@ -93,7 +93,7 @@
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="end" name="more"></ion-icon>
+          <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
@@ -112,7 +112,7 @@
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="top" name="more"></ion-icon>
+          <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
@@ -131,7 +131,7 @@
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="bottom" name="more"></ion-icon>
+          <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
diff --git a/core/src/components/list/test/icons/index.html b/core/src/components/list/test/icons/index.html
index 04e7687f44..761a5f1868 100644
--- a/core/src/components/list/test/icons/index.html
+++ b/core/src/components/list/test/icons/index.html
@@ -21,7 +21,7 @@
             <ion-icon slot="icon-only" name="search"></ion-icon>
           </ion-button>
           <ion-button>
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
       </ion-toolbar>
diff --git a/core/src/components/range/test/basic/index.html b/core/src/components/range/test/basic/index.html
index 67532b5ff2..656777b1ea 100644
--- a/core/src/components/range/test/basic/index.html
+++ b/core/src/components/range/test/basic/index.html
@@ -38,12 +38,12 @@
         </ion-item>
         <ion-item>
           <ion-range pin="true" color="secondary" value="86">
-            <ion-icon small name="ios-sunny" slot="start"></ion-icon>
-            <ion-icon name="ios-sunny" slot="end"></ion-icon>
+            <ion-icon small name="sunny" slot="start"></ion-icon>
+            <ion-icon name="sunny" slot="end"></ion-icon>
           </ion-range>
           <ion-range pin="true" color="danger" value="54">
-            <ion-icon small name="ios-thermometer" slot="start"></ion-icon>
-            <ion-icon name="ios-thermometer" slot="end"></ion-icon>
+            <ion-icon small name="thermometer" slot="start"></ion-icon>
+            <ion-icon name="thermometer" slot="end"></ion-icon>
           </ion-range>
         </ion-item>
         <ion-item>
diff --git a/core/src/components/range/test/standalone/index.html b/core/src/components/range/test/standalone/index.html
index 3f1c03bea8..58fb46b788 100644
--- a/core/src/components/range/test/standalone/index.html
+++ b/core/src/components/range/test/standalone/index.html
@@ -16,12 +16,12 @@
   <ion-range value="60" color="light"></ion-range>
   <ion-range value="80" color="dark"></ion-range>
   <ion-range pin="true" color="secondary" value="86">
-    <ion-icon size="small" name="ios-sunny" slot="start"></ion-icon>
-    <ion-icon name="ios-sunny" slot="end"></ion-icon>
+    <ion-icon size="small" name="sunny" slot="start"></ion-icon>
+    <ion-icon name="sunny" slot="end"></ion-icon>
   </ion-range>
   <ion-range pin="true" color="danger" value="54">
-    <ion-icon size="small" name="ios-thermometer" slot="start"></ion-icon>
-    <ion-icon name="ios-thermometer" slot="end"></ion-icon>
+    <ion-icon size="small" name="thermometer" slot="start"></ion-icon>
+    <ion-icon name="thermometer" slot="end"></ion-icon>
   </ion-range>
   <ion-range value="50" pin class="custom"></ion-range>
   <ion-range value="150" pin color="tertiary" class="custom"></ion-range>
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index 2de6d21433..13bba94407 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -22,7 +22,7 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
     </ion-tab-button>
 
     <ion-tab-button tab="speakers">
-      <ion-icon name="contacts"></ion-icon>
+      <ion-icon name="person-circle"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
@@ -53,7 +53,7 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
     </ion-tab-button>
 
     <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
-      <ion-icon name="contacts"></ion-icon>
+      <ion-icon name="person-circle"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
@@ -104,7 +104,7 @@ export const TabButtonExample: React.FC = () => (
         </IonTabButton>
 
         <IonTabButton tab="speakers">
-          <IonIcon name="contacts" />
+          <IonIcon name="person-circle" />
           <IonLabel>Speakers</IonLabel>
         </IonTabButton>
 
@@ -137,7 +137,7 @@ export const TabButtonExample: React.FC = () => (
       </ion-tab-button>
 
       <ion-tab-button tab="speakers">
-        <ion-icon name="contacts"></ion-icon>
+        <ion-icon name="person-circle"></ion-icon>
         <ion-label>Speakers</ion-label>
       </ion-tab-button>
 
diff --git a/core/src/components/tab-button/usage/angular.md b/core/src/components/tab-button/usage/angular.md
index 4fc4021d88..64afca6abf 100644
--- a/core/src/components/tab-button/usage/angular.md
+++ b/core/src/components/tab-button/usage/angular.md
@@ -8,7 +8,7 @@
     </ion-tab-button>
 
     <ion-tab-button tab="speakers">
-      <ion-icon name="contacts"></ion-icon>
+      <ion-icon name="person-circle"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
diff --git a/core/src/components/tab-button/usage/javascript.md b/core/src/components/tab-button/usage/javascript.md
index 7c73f0f28f..6c8379c6a5 100644
--- a/core/src/components/tab-button/usage/javascript.md
+++ b/core/src/components/tab-button/usage/javascript.md
@@ -8,7 +8,7 @@
     </ion-tab-button>
 
     <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
-      <ion-icon name="contacts"></ion-icon>
+      <ion-icon name="person-circle"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
diff --git a/core/src/components/tab-button/usage/react.md b/core/src/components/tab-button/usage/react.md
index bc1e3ac5c2..3a0674da4b 100644
--- a/core/src/components/tab-button/usage/react.md
+++ b/core/src/components/tab-button/usage/react.md
@@ -12,7 +12,7 @@ export const TabButtonExample: React.FC = () => (
         </IonTabButton>
 
         <IonTabButton tab="speakers">
-          <IonIcon name="contacts" />
+          <IonIcon name="person-circle" />
           <IonLabel>Speakers</IonLabel>
         </IonTabButton>
 
diff --git a/core/src/components/tab-button/usage/vue.md b/core/src/components/tab-button/usage/vue.md
index c603abfc1e..fd67ba39ab 100644
--- a/core/src/components/tab-button/usage/vue.md
+++ b/core/src/components/tab-button/usage/vue.md
@@ -9,7 +9,7 @@
       </ion-tab-button>
 
       <ion-tab-button tab="speakers">
-        <ion-icon name="contacts"></ion-icon>
+        <ion-icon name="person-circle"></ion-icon>
         <ion-label>Speakers</ion-label>
       </ion-tab-button>
 
diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
index 48a37bd845..bed0259504 100644
--- a/core/src/components/tabs/readme.md
+++ b/core/src/components/tabs/readme.md
@@ -27,7 +27,7 @@ The `ion-tab-bar` needs a slot defined in order to be projected to the right pla
     </ion-tab-button>
 
     <ion-tab-button tab="speakers">
-      <ion-icon name="contacts"></ion-icon>
+      <ion-icon name="person-circle"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
@@ -118,7 +118,7 @@ const routes: Routes = [
     </ion-tab-button>
 
     <ion-tab-button tab="tab-speaker">
-      <ion-icon name="contacts"></ion-icon>
+      <ion-icon name="person-circle"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
@@ -189,7 +189,7 @@ export const TabsExample: React.FC = () => (
       </IonTabButton>
 
       <IonTabButton tab="speakers">
-        <IonIcon name="contacts" />
+        <IonIcon name="person-circle" />
         <IonLabel>Speakers</IonLabel>
       </IonTabButton>
 
@@ -244,7 +244,7 @@ export const TabsExample: React.FC = () => (
 
         <!-- Provide a custom route to navigate to -->
         <ion-tab-button tab="speakers" :to="{ name: 'app.speakers' }">
-          <ion-icon name="contacts"></ion-icon>
+          <ion-icon name="person-circle"></ion-icon>
           <ion-label>Speakers</ion-label>
         </ion-tab-button>
 
diff --git a/core/src/components/tabs/usage/angular.md b/core/src/components/tabs/usage/angular.md
index fff379b30c..a676002316 100644
--- a/core/src/components/tabs/usage/angular.md
+++ b/core/src/components/tabs/usage/angular.md
@@ -8,7 +8,7 @@
     </ion-tab-button>
 
     <ion-tab-button tab="speakers">
-      <ion-icon name="contacts"></ion-icon>
+      <ion-icon name="person-circle"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
diff --git a/core/src/components/tabs/usage/javascript.md b/core/src/components/tabs/usage/javascript.md
index b48482d43c..93fbdbc208 100644
--- a/core/src/components/tabs/usage/javascript.md
+++ b/core/src/components/tabs/usage/javascript.md
@@ -25,7 +25,7 @@
     </ion-tab-button>
 
     <ion-tab-button tab="tab-speaker">
-      <ion-icon name="contacts"></ion-icon>
+      <ion-icon name="person-circle"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
diff --git a/core/src/components/tabs/usage/react.md b/core/src/components/tabs/usage/react.md
index aeca88b007..7ee57a4a60 100644
--- a/core/src/components/tabs/usage/react.md
+++ b/core/src/components/tabs/usage/react.md
@@ -12,7 +12,7 @@ export const TabsExample: React.FC = () => (
       </IonTabButton>
 
       <IonTabButton tab="speakers">
-        <IonIcon name="contacts" />
+        <IonIcon name="person-circle" />
         <IonLabel>Speakers</IonLabel>
       </IonTabButton>
 
diff --git a/core/src/components/tabs/usage/vue.md b/core/src/components/tabs/usage/vue.md
index d183616e37..5be2cb57ef 100644
--- a/core/src/components/tabs/usage/vue.md
+++ b/core/src/components/tabs/usage/vue.md
@@ -32,7 +32,7 @@
 
         <!-- Provide a custom route to navigate to -->
         <ion-tab-button tab="speakers" :to="{ name: 'app.speakers' }">
-          <ion-icon name="contacts"></ion-icon>
+          <ion-icon name="person-circle"></ion-icon>
           <ion-label>Speakers</ion-label>
         </ion-tab-button>
 
diff --git a/core/src/components/toolbar/readme.md b/core/src/components/toolbar/readme.md
index 2429d30b79..0da522df7c 100644
--- a/core/src/components/toolbar/readme.md
+++ b/core/src/components/toolbar/readme.md
@@ -50,7 +50,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -58,7 +58,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
   </ion-buttons>
   <ion-buttons slot="primary">
     <ion-button color="secondary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
   <ion-title>Default Buttons</ion-title>
@@ -67,7 +67,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button fill="solid">
-      <ion-icon slot="start" name="contact"></ion-icon>
+      <ion-icon slot="start" name="person-circle"></ion-icon>
       Contact
     </ion-button>
   </ion-buttons>
@@ -159,7 +159,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
 <ion-toolbar color="secondary">
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -167,7 +167,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
   </ion-buttons>
   <ion-buttons slot="primary">
     <ion-button color="primary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
   <ion-title>Secondary Toolbar</ion-title>
@@ -176,7 +176,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
 <ion-toolbar color="dark">
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -184,7 +184,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
   </ion-buttons>
   <ion-buttons slot="primary">
     <ion-button color="danger">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
   <ion-title>Dark Toolbar</ion-title>
@@ -216,7 +216,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -224,7 +224,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
   </ion-buttons>
   <ion-buttons slot="primary">
     <ion-button color="secondary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
   <ion-title>Default Buttons</ion-title>
@@ -233,7 +233,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button fill="solid">
-      <ion-icon slot="start" name="contact"></ion-icon>
+      <ion-icon slot="start" name="person-circle"></ion-icon>
       Contact
     </ion-button>
   </ion-buttons>
@@ -323,7 +323,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
 <ion-toolbar color="secondary">
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -331,7 +331,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
   </ion-buttons>
   <ion-buttons slot="primary">
     <ion-button color="primary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
   <ion-title>Secondary Toolbar</ion-title>
@@ -340,7 +340,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
 <ion-toolbar color="dark">
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -348,7 +348,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
   </ion-buttons>
   <ion-buttons slot="primary">
     <ion-button color="danger">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
   <ion-title>Dark Toolbar</ion-title>
@@ -395,7 +395,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="contact" />
+        <IonIcon slot="icon-only" name="person-circle" />
       </IonButton>
       <IonButton>
         <IonIcon slot="icon-only" name="search" />
@@ -403,7 +403,7 @@ export const ToolbarExample: React.FC = () => (
     </IonButtons>
     <IonButtons slot="primary">
       <IonButton color="secondary">
-        <IonIcon slot="icon-only" name="more" />
+        <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
       </IonButton>
     </IonButtons>
     <IonTitle>Default Buttons</IonTitle>
@@ -412,7 +412,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="secondary">
       <IonButton fill="solid">
-        <IonIcon slot="start" name="contact" />
+        <IonIcon slot="start" name="person-circle" />
         Contact
       </IonButton>
     </IonButtons>
@@ -496,7 +496,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar color="secondary">
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="contact" />
+        <IonIcon slot="icon-only" name="person-circle" />
       </IonButton>
       <IonButton>
         <IonIcon slot="icon-only" name="search" />
@@ -504,7 +504,7 @@ export const ToolbarExample: React.FC = () => (
     </IonButtons>
     <IonButtons slot="primary">
       <IonButton color="primary">
-        <IonIcon slot="icon-only" name="more" />
+        <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
       </IonButton>
     </IonButtons>
     <IonTitle>Secondary Toolbar</IonTitle>
@@ -513,7 +513,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar color="dark">
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="contact" />
+        <IonIcon slot="icon-only" name="person-circle" />
       </IonButton>
       <IonButton>
         <IonIcon slot="icon-only" name="search" />
@@ -521,7 +521,7 @@ export const ToolbarExample: React.FC = () => (
     </IonButtons>
     <IonButtons slot="primary">
       <IonButton color="danger">
-        <IonIcon slot="icon-only" name="more" />
+        <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
       </IonButton>
     </IonButtons>
     <IonTitle>Dark Toolbar</IonTitle>
@@ -555,7 +555,7 @@ export const ToolbarExample: React.FC = () => (
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="contact"></ion-icon>
+        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
       </ion-button>
       <ion-button>
         <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -563,7 +563,7 @@ export const ToolbarExample: React.FC = () => (
     </ion-buttons>
     <ion-buttons slot="primary">
       <ion-button color="secondary">
-        <ion-icon slot="icon-only" name="more"></ion-icon>
+        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
@@ -572,7 +572,7 @@ export const ToolbarExample: React.FC = () => (
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button fill="solid">
-        <ion-icon slot="start" name="contact"></ion-icon>
+        <ion-icon slot="start" name="person-circle"></ion-icon>
         Contact
       </ion-button>
     </ion-buttons>
@@ -664,7 +664,7 @@ export const ToolbarExample: React.FC = () => (
   <ion-toolbar color="secondary">
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="contact"></ion-icon>
+        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
       </ion-button>
       <ion-button>
         <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -672,7 +672,7 @@ export const ToolbarExample: React.FC = () => (
     </ion-buttons>
     <ion-buttons slot="primary">
       <ion-button color="primary">
-        <ion-icon slot="icon-only" name="more"></ion-icon>
+        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Secondary Toolbar</ion-title>
@@ -681,7 +681,7 @@ export const ToolbarExample: React.FC = () => (
   <ion-toolbar color="dark">
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="contact"></ion-icon>
+        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
       </ion-button>
       <ion-button>
         <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -689,7 +689,7 @@ export const ToolbarExample: React.FC = () => (
     </ion-buttons>
     <ion-buttons slot="primary">
       <ion-button color="danger">
-        <ion-icon slot="icon-only" name="more"></ion-icon>
+        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Dark Toolbar</ion-title>
diff --git a/core/src/components/toolbar/test/basic/index.html b/core/src/components/toolbar/test/basic/index.html
index 2ec3161ac5..d4f74d0b2b 100644
--- a/core/src/components/toolbar/test/basic/index.html
+++ b/core/src/components/toolbar/test/basic/index.html
@@ -29,7 +29,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button color="secondary">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Subheader</ion-title>
diff --git a/core/src/components/toolbar/test/colors/index.html b/core/src/components/toolbar/test/colors/index.html
index b51a98e8a1..b2332f6f99 100644
--- a/core/src/components/toolbar/test/colors/index.html
+++ b/core/src/components/toolbar/test/colors/index.html
@@ -26,7 +26,7 @@
         <ion-buttons slot="primary">
           <ion-button fill="clear">Clear</ion-button>
           <ion-button>
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Toolbar</ion-title>
@@ -42,7 +42,7 @@
         <ion-buttons slot="primary">
           <ion-button fill="clear">Clear</ion-button>
           <ion-button>
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Primary</ion-title>
@@ -58,7 +58,7 @@
         <ion-buttons slot="primary">
           <ion-button fill="clear">Clear</ion-button>
           <ion-button>
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Secondary</ion-title>
@@ -74,7 +74,7 @@
         <ion-buttons slot="primary">
           <ion-button fill="clear">Clear</ion-button>
           <ion-button>
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Tertiary</ion-title>
@@ -90,7 +90,7 @@
         <ion-buttons slot="primary">
           <ion-button fill="clear">Clear</ion-button>
           <ion-button>
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Success</ion-title>
@@ -106,7 +106,7 @@
         <ion-buttons slot="primary">
           <ion-button fill="clear">Clear</ion-button>
           <ion-button>
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Warning</ion-title>
@@ -122,7 +122,7 @@
         <ion-buttons slot="primary">
           <ion-button fill="clear">Clear</ion-button>
           <ion-button>
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Danger</ion-title>
@@ -138,7 +138,7 @@
         <ion-buttons slot="primary">
           <ion-button fill="outline">Outline</ion-button>
           <ion-button>
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Light</ion-title>
@@ -154,7 +154,7 @@
         <ion-buttons slot="primary">
           <ion-button fill="clear">Clear</ion-button>
           <ion-button>
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Medium</ion-title>
@@ -170,7 +170,7 @@
         <ion-buttons slot="primary">
           <ion-button fill="clear">Clear</ion-button>
           <ion-button>
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Dark</ion-title>
@@ -186,7 +186,7 @@
         <ion-buttons slot="primary">
           <ion-button fill="clear">Clear</ion-button>
           <ion-button>
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Custom</ion-title>
diff --git a/core/src/components/toolbar/test/scenarios/index.html b/core/src/components/toolbar/test/scenarios/index.html
index f1f3a21caf..fe5ba50223 100644
--- a/core/src/components/toolbar/test/scenarios/index.html
+++ b/core/src/components/toolbar/test/scenarios/index.html
@@ -33,7 +33,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button color="secondary">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
@@ -50,7 +50,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button color="secondary">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Defaults</ion-title>
@@ -67,7 +67,7 @@
         </ion-buttons>
         <ion-buttons slot="primary">
           <ion-button color="secondary" class="activated">
-            <ion-icon slot="icon-only" name="more"></ion-icon>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-title>Defaults.activated</ion-title>
diff --git a/core/src/components/toolbar/test/spec/index.html b/core/src/components/toolbar/test/spec/index.html
index 0a160cacf6..dd69041b06 100644
--- a/core/src/components/toolbar/test/spec/index.html
+++ b/core/src/components/toolbar/test/spec/index.html
@@ -46,7 +46,7 @@
               <ion-icon slot="icon-only" name="search"></ion-icon>
             </ion-button>
             <ion-button>
-              <ion-icon slot="icon-only" name="more"></ion-icon>
+              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
             </ion-button>
           </ion-buttons>
 
diff --git a/core/src/components/toolbar/usage/angular.md b/core/src/components/toolbar/usage/angular.md
index a23a61d155..045ae64cad 100644
--- a/core/src/components/toolbar/usage/angular.md
+++ b/core/src/components/toolbar/usage/angular.md
@@ -20,7 +20,7 @@
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -28,7 +28,7 @@
   </ion-buttons>
   <ion-buttons slot="primary">
     <ion-button color="secondary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
   <ion-title>Default Buttons</ion-title>
@@ -37,7 +37,7 @@
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button fill="solid">
-      <ion-icon slot="start" name="contact"></ion-icon>
+      <ion-icon slot="start" name="person-circle"></ion-icon>
       Contact
     </ion-button>
   </ion-buttons>
@@ -129,7 +129,7 @@
 <ion-toolbar color="secondary">
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -137,7 +137,7 @@
   </ion-buttons>
   <ion-buttons slot="primary">
     <ion-button color="primary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
   <ion-title>Secondary Toolbar</ion-title>
@@ -146,7 +146,7 @@
 <ion-toolbar color="dark">
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -154,7 +154,7 @@
   </ion-buttons>
   <ion-buttons slot="primary">
     <ion-button color="danger">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
   <ion-title>Dark Toolbar</ion-title>
diff --git a/core/src/components/toolbar/usage/javascript.md b/core/src/components/toolbar/usage/javascript.md
index 0119b6ac0b..54f869bb60 100644
--- a/core/src/components/toolbar/usage/javascript.md
+++ b/core/src/components/toolbar/usage/javascript.md
@@ -20,7 +20,7 @@
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -28,7 +28,7 @@
   </ion-buttons>
   <ion-buttons slot="primary">
     <ion-button color="secondary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
   <ion-title>Default Buttons</ion-title>
@@ -37,7 +37,7 @@
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button fill="solid">
-      <ion-icon slot="start" name="contact"></ion-icon>
+      <ion-icon slot="start" name="person-circle"></ion-icon>
       Contact
     </ion-button>
   </ion-buttons>
@@ -127,7 +127,7 @@
 <ion-toolbar color="secondary">
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -135,7 +135,7 @@
   </ion-buttons>
   <ion-buttons slot="primary">
     <ion-button color="primary">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
   <ion-title>Secondary Toolbar</ion-title>
@@ -144,7 +144,7 @@
 <ion-toolbar color="dark">
   <ion-buttons slot="secondary">
     <ion-button>
-      <ion-icon slot="icon-only" name="contact"></ion-icon>
+      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
     </ion-button>
     <ion-button>
       <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -152,7 +152,7 @@
   </ion-buttons>
   <ion-buttons slot="primary">
     <ion-button color="danger">
-      <ion-icon slot="icon-only" name="more"></ion-icon>
+      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
     </ion-button>
   </ion-buttons>
   <ion-title>Dark Toolbar</ion-title>
diff --git a/core/src/components/toolbar/usage/react.md b/core/src/components/toolbar/usage/react.md
index 6d14f27639..2beedad67b 100644
--- a/core/src/components/toolbar/usage/react.md
+++ b/core/src/components/toolbar/usage/react.md
@@ -35,7 +35,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="contact" />
+        <IonIcon slot="icon-only" name="person-circle" />
       </IonButton>
       <IonButton>
         <IonIcon slot="icon-only" name="search" />
@@ -43,7 +43,7 @@ export const ToolbarExample: React.FC = () => (
     </IonButtons>
     <IonButtons slot="primary">
       <IonButton color="secondary">
-        <IonIcon slot="icon-only" name="more" />
+        <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
       </IonButton>
     </IonButtons>
     <IonTitle>Default Buttons</IonTitle>
@@ -52,7 +52,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="secondary">
       <IonButton fill="solid">
-        <IonIcon slot="start" name="contact" />
+        <IonIcon slot="start" name="person-circle" />
         Contact
       </IonButton>
     </IonButtons>
@@ -136,7 +136,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar color="secondary">
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="contact" />
+        <IonIcon slot="icon-only" name="person-circle" />
       </IonButton>
       <IonButton>
         <IonIcon slot="icon-only" name="search" />
@@ -144,7 +144,7 @@ export const ToolbarExample: React.FC = () => (
     </IonButtons>
     <IonButtons slot="primary">
       <IonButton color="primary">
-        <IonIcon slot="icon-only" name="more" />
+        <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
       </IonButton>
     </IonButtons>
     <IonTitle>Secondary Toolbar</IonTitle>
@@ -153,7 +153,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar color="dark">
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="contact" />
+        <IonIcon slot="icon-only" name="person-circle" />
       </IonButton>
       <IonButton>
         <IonIcon slot="icon-only" name="search" />
@@ -161,7 +161,7 @@ export const ToolbarExample: React.FC = () => (
     </IonButtons>
     <IonButtons slot="primary">
       <IonButton color="danger">
-        <IonIcon slot="icon-only" name="more" />
+        <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
       </IonButton>
     </IonButtons>
     <IonTitle>Dark Toolbar</IonTitle>
diff --git a/core/src/components/toolbar/usage/vue.md b/core/src/components/toolbar/usage/vue.md
index d444ae8b2c..38169b4350 100644
--- a/core/src/components/toolbar/usage/vue.md
+++ b/core/src/components/toolbar/usage/vue.md
@@ -21,7 +21,7 @@
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="contact"></ion-icon>
+        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
       </ion-button>
       <ion-button>
         <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -29,7 +29,7 @@
     </ion-buttons>
     <ion-buttons slot="primary">
       <ion-button color="secondary">
-        <ion-icon slot="icon-only" name="more"></ion-icon>
+        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
@@ -38,7 +38,7 @@
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button fill="solid">
-        <ion-icon slot="start" name="contact"></ion-icon>
+        <ion-icon slot="start" name="person-circle"></ion-icon>
         Contact
       </ion-button>
     </ion-buttons>
@@ -130,7 +130,7 @@
   <ion-toolbar color="secondary">
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="contact"></ion-icon>
+        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
       </ion-button>
       <ion-button>
         <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -138,7 +138,7 @@
     </ion-buttons>
     <ion-buttons slot="primary">
       <ion-button color="primary">
-        <ion-icon slot="icon-only" name="more"></ion-icon>
+        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Secondary Toolbar</ion-title>
@@ -147,7 +147,7 @@
   <ion-toolbar color="dark">
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="contact"></ion-icon>
+        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
       </ion-button>
       <ion-button>
         <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -155,7 +155,7 @@
     </ion-buttons>
     <ion-buttons slot="primary">
       <ion-button color="danger">
-        <ion-icon slot="icon-only" name="more"></ion-icon>
+        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Dark Toolbar</ion-title>
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index 7b9933b48c..24dc85401b 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -69,7 +69,7 @@
         </ion-tab-button>
         <ion-tab-button tab="overlays">
           <ion-label>Overlays</ion-label>
-          <ion-icon name="more"></ion-icon>
+          <ion-icon ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
         </ion-tab-button>
       </ion-tab-bar>
 
@@ -526,12 +526,12 @@
                 <ion-icon name="happy" color="warning"></ion-icon>
                 <ion-icon name="people"></ion-icon>
                 <ion-icon name="person" color="tertiary"></ion-icon>
-                <ion-icon name="contact"></ion-icon>
+                <ion-icon name="person-circle"></ion-icon>
 
                 <ion-icon name="apps"></ion-icon>
-                <ion-icon name="lock"></ion-icon>
+                <ion-icon name="lock-closed"></ion-icon>
                 <ion-icon name="key" color="success"></ion-icon>
-                <ion-icon name="unlock"></ion-icon>
+                <ion-icon name="lock-open"></ion-icon>
 
                 <ion-icon name="map" color="secondary"></ion-icon>
                 <ion-icon name="navigate"></ion-icon>
@@ -541,7 +541,7 @@
                 <ion-icon name="mic"></ion-icon>
                 <ion-icon name="musical-notes" color="warning"></ion-icon>
                 <ion-icon name="volume-high"></ion-icon>
-                <ion-icon name="microphone" color="tertiary"></ion-icon>
+                <ion-icon name="mic" color="tertiary"></ion-icon>
 
                 <ion-icon name="cafe" color="success"></ion-icon>
                 <ion-icon name="calculator"></ion-icon>
@@ -609,7 +609,7 @@
                   </ion-buttons>
                   <ion-buttons slot="primary">
                     <ion-button>
-                      <ion-icon slot="icon-only" name="more"></ion-icon>
+                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                     </ion-button>
                   </ion-buttons>
                   <ion-title>Toolbar</ion-title>
@@ -623,7 +623,7 @@
                   </ion-buttons>
                   <ion-buttons slot="primary">
                     <ion-button>
-                      <ion-icon slot="icon-only" name="more"></ion-icon>
+                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                     </ion-button>
                   </ion-buttons>
                   <ion-segment>
@@ -635,7 +635,7 @@
                 <ion-toolbar color="secondary">
                   <ion-buttons slot="primary">
                     <ion-button>
-                      <ion-icon slot="icon-only" name="more"></ion-icon>
+                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                     </ion-button>
                   </ion-buttons>
                   <ion-searchbar></ion-searchbar>
@@ -649,7 +649,7 @@
                   </ion-buttons>
                   <ion-buttons slot="primary">
                     <ion-button>
-                      <ion-icon slot="icon-only" name="more"></ion-icon>
+                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                     </ion-button>
                   </ion-buttons>
                   <ion-title>Tertiary</ion-title>
@@ -663,7 +663,7 @@
                   </ion-buttons>
                   <ion-buttons slot="primary">
                     <ion-button>
-                      <ion-icon slot="icon-only" name="more"></ion-icon>
+                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                     </ion-button>
                   </ion-buttons>
                   <ion-title>Success</ion-title>
@@ -677,7 +677,7 @@
                   </ion-buttons>
                   <ion-buttons slot="primary">
                     <ion-button>
-                      <ion-icon slot="icon-only" name="more"></ion-icon>
+                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                     </ion-button>
                   </ion-buttons>
                   <ion-title>Warning</ion-title>
@@ -686,7 +686,7 @@
                 <ion-toolbar color="danger">
                   <ion-buttons slot="primary">
                     <ion-button>
-                      <ion-icon slot="icon-only" name="more"></ion-icon>
+                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                     </ion-button>
                   </ion-buttons>
                   <ion-searchbar></ion-searchbar>
@@ -700,7 +700,7 @@
                   </ion-buttons>
                   <ion-buttons slot="primary">
                     <ion-button>
-                      <ion-icon slot="icon-only" name="more"></ion-icon>
+                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                     </ion-button>
                   </ion-buttons>
                   <ion-segment>
@@ -717,7 +717,7 @@
                   </ion-buttons>
                   <ion-buttons slot="primary">
                     <ion-button>
-                      <ion-icon slot="icon-only" name="more"></ion-icon>
+                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                     </ion-button>
                   </ion-buttons>
                   <ion-title>Medium</ion-title>
@@ -731,7 +731,7 @@
                   </ion-buttons>
                   <ion-buttons slot="primary">
                     <ion-button>
-                      <ion-icon slot="icon-only" name="more"></ion-icon>
+                      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                     </ion-button>
                   </ion-buttons>
                   <ion-title>Dark</ion-title>