javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(icons): fix the ellipsis fill in ionicons (#20137)

Browse Source 
- 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
This commit is contained in:
Brandy Carney
2020-01-03 12:19:17 -05:00
committed by GitHub
parent 02a46a1007
commit 9318d2418e
48 changed files with 217 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/package.json
View File

@ -30,7 +30,7 @@
"loader/" "loader/"
], ],
"dependencies": { "dependencies": {
"ionicons": "^5.0.0-13", "ionicons": "5.0.0-15",
"tslib": "^1.10.0" "tslib": "^1.10.0"
}, },
"devDependencies": { "devDependencies": {

10
core/src/components/button/test/toolbar/index.html
View File

@ -40,7 +40,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title> <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>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title> <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>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="solid" color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title> <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>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Defaults</ion-title> <ion-title>Defaults</ion-title>
@ -108,7 +108,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary" class="activated"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Defaults.activated</ion-title> <ion-title>Defaults.activated</ion-title>

16
core/src/components/buttons/readme.md
View File

@ -30,7 +30,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <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-title>Default Buttons</ion-title>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
@ -80,7 +80,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <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-title>Default Buttons</ion-title>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
@ -148,7 +148,7 @@ export const ButtonsExample: React.FC = () => (
<IonToolbar> <IonToolbar>
<IonButtons slot="secondary"> <IonButtons slot="secondary">
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="contact" /> <IonIcon slot="icon-only" name="person-circle" />
</IonButton> </IonButton>
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="search" /> <IonIcon slot="icon-only" name="search" />
@ -157,7 +157,7 @@ export const ButtonsExample: React.FC = () => (
<IonTitle>Default Buttons</IonTitle> <IonTitle>Default Buttons</IonTitle>
<IonButtons slot="primary"> <IonButtons slot="primary">
<IonButton color="secondary"> <IonButton color="secondary">
<IonIcon slot="icon-only" name="more" /> <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
</IonButton> </IonButton>
</IonButtons> </IonButtons>
</IonToolbar> </IonToolbar>
@ -201,7 +201,7 @@ export const ButtonsExample: React.FC = () => (
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <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-title>Default Buttons</ion-title>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>

2
core/src/components/buttons/test/icon/index.html
View File

@ -22,7 +22,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button slot="icon-only"> <ion-button slot="icon-only">
<ion-icon name="more"></ion-icon> <ion-icon ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>

4
core/src/components/buttons/usage/angular.md
View File

@ -9,7 +9,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -18,7 +18,7 @@
<ion-title>Default Buttons</ion-title> <ion-title>Default Buttons</ion-title>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>

4
core/src/components/buttons/usage/javascript.md
View File

@ -9,7 +9,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -18,7 +18,7 @@
<ion-title>Default Buttons</ion-title> <ion-title>Default Buttons</ion-title>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>

4
core/src/components/buttons/usage/react.md
View File

@ -23,7 +23,7 @@ export const ButtonsExample: React.FC = () => (
<IonToolbar> <IonToolbar>
<IonButtons slot="secondary"> <IonButtons slot="secondary">
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="contact" /> <IonIcon slot="icon-only" name="person-circle" />
</IonButton> </IonButton>
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="search" /> <IonIcon slot="icon-only" name="search" />
@ -32,7 +32,7 @@ export const ButtonsExample: React.FC = () => (
<IonTitle>Default Buttons</IonTitle> <IonTitle>Default Buttons</IonTitle>
<IonButtons slot="primary"> <IonButtons slot="primary">
<IonButton color="secondary"> <IonButton color="secondary">
<IonIcon slot="icon-only" name="more" /> <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
</IonButton> </IonButton>
</IonButtons> </IonButtons>
</IonToolbar> </IonToolbar>

4
core/src/components/buttons/usage/vue.md
View File

@ -10,7 +10,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -19,7 +19,7 @@
<ion-title>Default Buttons</ion-title> <ion-title>Default Buttons</ion-title>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>

2
core/src/components/card/test/translucent/index.html
View File

@ -232,7 +232,7 @@
</ion-col> </ion-col>
<ion-col class="ion-no-padding ion-text-right"> <ion-col class="ion-no-padding ion-text-right">
<ion-button fill="clear" size="small" color="dark"> <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 Share
</ion-button> </ion-button>
</ion-col> </ion-col>

18
core/src/components/fab/readme.md
View File

@ -21,21 +21,21 @@ Fabs are container elements that contain one or more fab buttons. They should be
<!-- fab placed to the bottom end --> <!-- fab placed to the bottom end -->
<ion-fab vertical="bottom" horizontal="end" slot="fixed"> <ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropleft"></ion-icon> <ion-icon name="arrow-forward-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
<!-- fab placed to the top start --> <!-- fab placed to the top start -->
<ion-fab vertical="top" horizontal="start" slot="fixed"> <ion-fab vertical="top" horizontal="start" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropright"></ion-icon> <ion-icon name="arrow-back-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
<!-- fab placed to the bottom start --> <!-- fab placed to the bottom start -->
<ion-fab vertical="bottom" horizontal="start" slot="fixed"> <ion-fab vertical="bottom" horizontal="start" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropup"></ion-icon> <ion-icon name="arrow-up-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
@ -110,21 +110,21 @@ export const FabExample: React.FC = () => (
{/*-- fab placed to the bottom end --*/} {/*-- fab placed to the bottom end --*/}
<IonFab vertical="bottom" horizontal="end" slot="fixed"> <IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton> <IonFabButton>
<IonIcon name="arrow-dropleft" /> <IonIcon name="arrow-forward-circle" />
</IonFabButton> </IonFabButton>
</IonFab> </IonFab>
{/*-- fab placed to the top start --*/} {/*-- fab placed to the top start --*/}
<IonFab vertical="top" horizontal="start" slot="fixed"> <IonFab vertical="top" horizontal="start" slot="fixed">
<IonFabButton> <IonFabButton>
<IonIcon name="arrow-dropright" /> <IonIcon name="arrow-back-circle" />
</IonFabButton> </IonFabButton>
</IonFab> </IonFab>
{/*-- fab placed to the bottom start --*/} {/*-- fab placed to the bottom start --*/}
<IonFab vertical="bottom" horizontal="start" slot="fixed"> <IonFab vertical="bottom" horizontal="start" slot="fixed">
<IonFabButton> <IonFabButton>
<IonIcon name="arrow-dropup" /> <IonIcon name="arrow-up-circle" />
</IonFabButton> </IonFabButton>
</IonFab> </IonFab>
@ -197,21 +197,21 @@ export const FabExample: React.FC = () => (
<!-- fab placed to the bottom end --> <!-- fab placed to the bottom end -->
<ion-fab vertical="bottom" horizontal="end" slot="fixed"> <ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropleft"></ion-icon> <ion-icon name="arrow-forward-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
<!-- fab placed to the top start --> <!-- fab placed to the top start -->
<ion-fab vertical="top" horizontal="start" slot="fixed"> <ion-fab vertical="top" horizontal="start" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropright"></ion-icon> <ion-icon name="arrow-back-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
<!-- fab placed to the bottom start --> <!-- fab placed to the bottom start -->
<ion-fab vertical="bottom" horizontal="start" slot="fixed"> <ion-fab vertical="bottom" horizontal="start" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropup"></ion-icon> <ion-icon name="arrow-up-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>

6
core/src/components/fab/usage/angular.md
View File

@ -10,21 +10,21 @@
<!-- fab placed to the bottom end --> <!-- fab placed to the bottom end -->
<ion-fab vertical="bottom" horizontal="end" slot="fixed"> <ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropleft"></ion-icon> <ion-icon name="arrow-forward-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
<!-- fab placed to the top start --> <!-- fab placed to the top start -->
<ion-fab vertical="top" horizontal="start" slot="fixed"> <ion-fab vertical="top" horizontal="start" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropright"></ion-icon> <ion-icon name="arrow-back-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
<!-- fab placed to the bottom start --> <!-- fab placed to the bottom start -->
<ion-fab vertical="bottom" horizontal="start" slot="fixed"> <ion-fab vertical="bottom" horizontal="start" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropup"></ion-icon> <ion-icon name="arrow-up-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>

6
core/src/components/fab/usage/javascript.md
View File

@ -10,21 +10,21 @@
<!-- fab placed to the bottom end --> <!-- fab placed to the bottom end -->
<ion-fab vertical="bottom" horizontal="end" slot="fixed"> <ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropleft"></ion-icon> <ion-icon name="arrow-forward-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
<!-- fab placed to the top start --> <!-- fab placed to the top start -->
<ion-fab vertical="top" horizontal="start" slot="fixed"> <ion-fab vertical="top" horizontal="start" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropright"></ion-icon> <ion-icon name="arrow-back-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
<!-- fab placed to the bottom start --> <!-- fab placed to the bottom start -->
<ion-fab vertical="bottom" horizontal="start" slot="fixed"> <ion-fab vertical="bottom" horizontal="start" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropup"></ion-icon> <ion-icon name="arrow-up-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>

6
core/src/components/fab/usage/react.md
View File

@ -14,21 +14,21 @@ export const FabExample: React.FC = () => (
{/*-- fab placed to the bottom end --*/} {/*-- fab placed to the bottom end --*/}
<IonFab vertical="bottom" horizontal="end" slot="fixed"> <IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton> <IonFabButton>
<IonIcon name="arrow-dropleft" /> <IonIcon name="arrow-forward-circle" />
</IonFabButton> </IonFabButton>
</IonFab> </IonFab>
{/*-- fab placed to the top start --*/} {/*-- fab placed to the top start --*/}
<IonFab vertical="top" horizontal="start" slot="fixed"> <IonFab vertical="top" horizontal="start" slot="fixed">
<IonFabButton> <IonFabButton>
<IonIcon name="arrow-dropright" /> <IonIcon name="arrow-back-circle" />
</IonFabButton> </IonFabButton>
</IonFab> </IonFab>
{/*-- fab placed to the bottom start --*/} {/*-- fab placed to the bottom start --*/}
<IonFab vertical="bottom" horizontal="start" slot="fixed"> <IonFab vertical="bottom" horizontal="start" slot="fixed">
<IonFabButton> <IonFabButton>
<IonIcon name="arrow-dropup" /> <IonIcon name="arrow-up-circle" />
</IonFabButton> </IonFabButton>
</IonFab> </IonFab>

6
core/src/components/fab/usage/vue.md
View File

@ -11,21 +11,21 @@
<!-- fab placed to the bottom end --> <!-- fab placed to the bottom end -->
<ion-fab vertical="bottom" horizontal="end" slot="fixed"> <ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropleft"></ion-icon> <ion-icon name="arrow-forward-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
<!-- fab placed to the top start --> <!-- fab placed to the top start -->
<ion-fab vertical="top" horizontal="start" slot="fixed"> <ion-fab vertical="top" horizontal="start" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropright"></ion-icon> <ion-icon name="arrow-back-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
<!-- fab placed to the bottom start --> <!-- fab placed to the bottom start -->
<ion-fab vertical="bottom" horizontal="start" slot="fixed"> <ion-fab vertical="bottom" horizontal="start" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="arrow-dropup"></ion-icon> <ion-icon name="arrow-up-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>

8
core/src/components/icon/usage/angular.md
View File

@ -1,13 +1,9 @@
```html ```html
<!-- automatically uses the correct "star" icon depending on the mode --> <!-- uses "star" icon for both modes -->
<ion-icon name="star"></ion-icon> <ion-icon name="star"></ion-icon>
<!-- explicitly set the icon for each mode --> <!-- explicitly set the icon for each mode -->
<ion-icon ios="ios-home" md="md-home"></ion-icon> <ion-icon ios="home" md="star"></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>
<!-- use a custom svg icon --> <!-- use a custom svg icon -->
<ion-icon src="/path/to/external/file.svg"></ion-icon> <ion-icon src="/path/to/external/file.svg"></ion-icon>

8
core/src/components/icon/usage/javascript.md
View File

@ -1,13 +1,9 @@
```html ```html
<!-- automatically uses the correct "star" icon depending on the mode --> <!-- uses "star" icon for both modes -->
<ion-icon name="star"></ion-icon> <ion-icon name="star"></ion-icon>
<!-- explicitly set the icon for each mode --> <!-- explicitly set the icon for each mode -->
<ion-icon ios="ios-home" md="md-home"></ion-icon> <ion-icon ios="home" md="star"></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>
<!-- use a custom svg icon --> <!-- use a custom svg icon -->
<ion-icon src="/path/to/external/file.svg"></ion-icon> <ion-icon src="/path/to/external/file.svg"></ion-icon>

16
core/src/components/icon/usage/react.md
View File

@ -5,22 +5,18 @@ import { IonIcon } from '@ionic/react';
const Example: React.FC<{}> = () => ( const Example: React.FC<{}> = () => (
<> <>
{/*-- automatically uses the correct "star" icon depending on the mode --*/} {/*-- uses "star" icon for both modes --*/}
<IonIcon name="star" /> <IonIcon name="star"/>
{/*-- explicitly set the icon for each mode --*/} {/*-- explicitly set the icon for each mode --*/}
<IonIcon ios="ios-home" md="md-home" /> <IonIcon ios="home" md="star"/>
{/*-- always use the same icon, no matter what the mode is --*/}
<IonIcon name="ios-clock" />
<IonIcon name="logo-twitter" />
{/*-- use a custom svg icon --*/} {/*-- use a custom svg icon --*/}
<IonIcon src="/path/to/external/file.svg" /> <IonIcon src="/path/to/external/file.svg"/>
{/*-- set the icon size --*/} {/*-- set the icon size --*/}
<IonIcon size="small" name="heart" /> <IonIcon size="small" name="heart"/>
<IonIcon size="large" name="heart" /> <IonIcon size="large" name="heart"/>
</> </>
); );

8
core/src/components/icon/usage/vue.md
View File

@ -1,14 +1,10 @@
```html ```html
<template> <template>
<!-- automatically uses the correct "star" icon depending on the mode --> <!-- uses "star" icon for both modes -->
<ion-icon name="star"></ion-icon> <ion-icon name="star"></ion-icon>
<!-- explicitly set the icon for each mode --> <!-- explicitly set the icon for each mode -->
<ion-icon ios="ios-home" md="md-home"></ion-icon> <ion-icon ios="home" md="star"></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>
<!-- use a custom svg icon --> <!-- use a custom svg icon -->
<ion-icon src="/path/to/external/file.svg"></ion-icon> <ion-icon src="/path/to/external/file.svg"></ion-icon>

32
core/src/components/item-sliding/readme.md
View File

@ -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>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <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>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <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>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <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>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <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>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <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>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <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>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <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>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -406,7 +406,7 @@ export const ItemSlidingExample: React.FC = () => (
</IonItem> </IonItem>
<IonItemOptions> <IonItemOptions>
<IonItemOption color="primary"> <IonItemOption color="primary">
<IonIcon slot="start" name="more"></IonIcon> <IonIcon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
More More
</IonItemOption> </IonItemOption>
<IonItemOption color="secondary"> <IonItemOption color="secondary">
@ -425,7 +425,7 @@ export const ItemSlidingExample: React.FC = () => (
</IonItem> </IonItem>
<IonItemOptions> <IonItemOptions>
<IonItemOption color="primary"> <IonItemOption color="primary">
<IonIcon slot="end" name="more"></IonIcon> <IonIcon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
More More
</IonItemOption> </IonItemOption>
<IonItemOption color="secondary"> <IonItemOption color="secondary">
@ -444,7 +444,7 @@ export const ItemSlidingExample: React.FC = () => (
</IonItem> </IonItem>
<IonItemOptions> <IonItemOptions>
<IonItemOption color="primary"> <IonItemOption color="primary">
<IonIcon slot="top" name="more"></IonIcon> <IonIcon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
More More
</IonItemOption> </IonItemOption>
<IonItemOption color="secondary"> <IonItemOption color="secondary">
@ -463,7 +463,7 @@ export const ItemSlidingExample: React.FC = () => (
</IonItem> </IonItem>
<IonItemOptions> <IonItemOptions>
<IonItemOption color="primary"> <IonItemOption color="primary">
<IonIcon slot="bottom" name="more"></IonIcon> <IonIcon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
More More
</IonItemOption> </IonItemOption>
<IonItemOption color="secondary"> <IonItemOption color="secondary">
@ -555,7 +555,7 @@ export const ItemSlidingExample: React.FC = () => (
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -574,7 +574,7 @@ export const ItemSlidingExample: React.FC = () => (
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -593,7 +593,7 @@ export const ItemSlidingExample: React.FC = () => (
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -612,7 +612,7 @@ export const ItemSlidingExample: React.FC = () => (
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">

22
core/src/components/item-sliding/test/basic/index.html
View File

@ -62,7 +62,7 @@
</ion-item> </ion-item>
<ion-item-options class="show-options"> <ion-item-options class="show-options">
<ion-item-option color="primary"> <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> <span class="more-text"></span>
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary" onclick="archive('item6')"> <ion-item-option color="secondary" onclick="archive('item6')">
@ -80,12 +80,12 @@
</ion-item> </ion-item>
<ion-item-options side="start"> <ion-item-options side="start">
<ion-item-option color="primary"> <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-option>
</ion-item-options> </ion-item-options>
<ion-item-options side="end" class="show-options"> <ion-item-options side="end" class="show-options">
<ion-item-option color="primary"> <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> <span class="more-text"></span>
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary" onclick="archive('item6')"> <ion-item-option color="secondary" onclick="archive('item6')">
@ -183,7 +183,7 @@
</ion-item> </ion-item>
<ion-item-options side="start" class="sliding-enabled"> <ion-item-options side="start" class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item2')"> <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 Unread
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>
@ -209,7 +209,7 @@
</ion-item> </ion-item>
<ion-item-options side="start" icon-start class="sliding-enabled"> <ion-item-options side="start" icon-start class="sliding-enabled">
<ion-item-option color="secondary" expandable onclick="unread('item3')"> <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 Unread
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>
@ -254,7 +254,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary" expandable> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary" onclick="archive('item5')"> <ion-item-option color="secondary" onclick="archive('item5')">
@ -277,7 +277,7 @@
</ion-item> </ion-item>
<ion-item-options icon-start> <ion-item-options icon-start>
<ion-item-option color="primary"> <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> <span class="more-text"></span>
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary" onclick="archive('item7')"> <ion-item-option color="secondary" onclick="archive('item7')">
@ -332,19 +332,19 @@
</ion-item> </ion-item>
<ion-item-options side="start" class="sliding-enabled"> <ion-item-options side="start" class="sliding-enabled">
<ion-item-option color="primary" expandable> <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 Btn 1
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary" expandable> <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 Btn 2
</ion-item-option> </ion-item-option>
<ion-item-option color="danger" expandable> <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 Btn 3
</ion-item-option> </ion-item-option>
<ion-item-option color="tertiary" expandable> <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 Btn 4
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>

2
core/src/components/item-sliding/test/lines/index.html
View File

@ -80,7 +80,7 @@
</ion-item> </ion-item>
<ion-item-options side="start"> <ion-item-options side="start">
<ion-item-option color="secondary" expandable> <ion-item-option color="secondary" expandable>
<ion-icon name="ios-checkmark"></ion-icon> <ion-icon name="checkmark"></ion-icon>
Unread Unread
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>

8
core/src/components/item-sliding/usage/angular.md
View File

@ -73,7 +73,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -92,7 +92,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -111,7 +111,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -130,7 +130,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">

8
core/src/components/item-sliding/usage/javascript.md
View File

@ -73,7 +73,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -92,7 +92,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -111,7 +111,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -130,7 +130,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">

8
core/src/components/item-sliding/usage/react.md
View File

@ -77,7 +77,7 @@ export const ItemSlidingExample: React.FC = () => (
</IonItem> </IonItem>
<IonItemOptions> <IonItemOptions>
<IonItemOption color="primary"> <IonItemOption color="primary">
<IonIcon slot="start" name="more"></IonIcon> <IonIcon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
More More
</IonItemOption> </IonItemOption>
<IonItemOption color="secondary"> <IonItemOption color="secondary">
@ -96,7 +96,7 @@ export const ItemSlidingExample: React.FC = () => (
</IonItem> </IonItem>
<IonItemOptions> <IonItemOptions>
<IonItemOption color="primary"> <IonItemOption color="primary">
<IonIcon slot="end" name="more"></IonIcon> <IonIcon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
More More
</IonItemOption> </IonItemOption>
<IonItemOption color="secondary"> <IonItemOption color="secondary">
@ -115,7 +115,7 @@ export const ItemSlidingExample: React.FC = () => (
</IonItem> </IonItem>
<IonItemOptions> <IonItemOptions>
<IonItemOption color="primary"> <IonItemOption color="primary">
<IonIcon slot="top" name="more"></IonIcon> <IonIcon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
More More
</IonItemOption> </IonItemOption>
<IonItemOption color="secondary"> <IonItemOption color="secondary">
@ -134,7 +134,7 @@ export const ItemSlidingExample: React.FC = () => (
</IonItem> </IonItem>
<IonItemOptions> <IonItemOptions>
<IonItemOption color="primary"> <IonItemOption color="primary">
<IonIcon slot="bottom" name="more"></IonIcon> <IonIcon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
More More
</IonItemOption> </IonItemOption>
<IonItemOption color="secondary"> <IonItemOption color="secondary">

8
core/src/components/item-sliding/usage/vue.md
View File

@ -74,7 +74,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -93,7 +93,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -112,7 +112,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -131,7 +131,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <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 More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">

2
core/src/components/list/test/icons/index.html
View File

@ -21,7 +21,7 @@
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button> </ion-button>
<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-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>

8
core/src/components/range/test/basic/index.html
View File

@ -38,12 +38,12 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-range pin="true" color="secondary" value="86"> <ion-range pin="true" color="secondary" value="86">
<ion-icon small name="ios-sunny" slot="start"></ion-icon> <ion-icon small name="sunny" slot="start"></ion-icon>
<ion-icon name="ios-sunny" slot="end"></ion-icon> <ion-icon name="sunny" slot="end"></ion-icon>
</ion-range> </ion-range>
<ion-range pin="true" color="danger" value="54"> <ion-range pin="true" color="danger" value="54">
<ion-icon small name="ios-thermometer" slot="start"></ion-icon> <ion-icon small name="thermometer" slot="start"></ion-icon>
<ion-icon name="ios-thermometer" slot="end"></ion-icon> <ion-icon name="thermometer" slot="end"></ion-icon>
</ion-range> </ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>

8
core/src/components/range/test/standalone/index.html
View File

@ -16,12 +16,12 @@
<ion-range value="60" color="light"></ion-range> <ion-range value="60" color="light"></ion-range>
<ion-range value="80" color="dark"></ion-range> <ion-range value="80" color="dark"></ion-range>
<ion-range pin="true" color="secondary" value="86"> <ion-range pin="true" color="secondary" value="86">
<ion-icon size="small" name="ios-sunny" slot="start"></ion-icon> <ion-icon size="small" name="sunny" slot="start"></ion-icon>
<ion-icon name="ios-sunny" slot="end"></ion-icon> <ion-icon name="sunny" slot="end"></ion-icon>
</ion-range> </ion-range>
<ion-range pin="true" color="danger" value="54"> <ion-range pin="true" color="danger" value="54">
<ion-icon size="small" name="ios-thermometer" slot="start"></ion-icon> <ion-icon size="small" name="thermometer" slot="start"></ion-icon>
<ion-icon name="ios-thermometer" slot="end"></ion-icon> <ion-icon name="thermometer" slot="end"></ion-icon>
</ion-range> </ion-range>
<ion-range value="50" pin class="custom"></ion-range> <ion-range value="50" pin class="custom"></ion-range>
<ion-range value="150" pin color="tertiary" class="custom"></ion-range> <ion-range value="150" pin color="tertiary" class="custom"></ion-range>

8
core/src/components/tab-button/readme.md
View File

@ -22,7 +22,7 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="speakers"> <ion-tab-button tab="speakers">
<ion-icon name="contacts"></ion-icon> <ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label> <ion-label>Speakers</ion-label>
</ion-tab-button> </ion-tab-button>
@ -53,7 +53,7 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)"> <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-label>Speakers</ion-label>
</ion-tab-button> </ion-tab-button>
@ -104,7 +104,7 @@ export const TabButtonExample: React.FC = () => (
</IonTabButton> </IonTabButton>
<IonTabButton tab="speakers"> <IonTabButton tab="speakers">
<IonIcon name="contacts" /> <IonIcon name="person-circle" />
<IonLabel>Speakers</IonLabel> <IonLabel>Speakers</IonLabel>
</IonTabButton> </IonTabButton>
@ -137,7 +137,7 @@ export const TabButtonExample: React.FC = () => (
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="speakers"> <ion-tab-button tab="speakers">
<ion-icon name="contacts"></ion-icon> <ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label> <ion-label>Speakers</ion-label>
</ion-tab-button> </ion-tab-button>

2
core/src/components/tab-button/usage/angular.md
View File

@ -8,7 +8,7 @@
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="speakers"> <ion-tab-button tab="speakers">
<ion-icon name="contacts"></ion-icon> <ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label> <ion-label>Speakers</ion-label>
</ion-tab-button> </ion-tab-button>

2
core/src/components/tab-button/usage/javascript.md
View File

@ -8,7 +8,7 @@
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)"> <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-label>Speakers</ion-label>
</ion-tab-button> </ion-tab-button>

2
core/src/components/tab-button/usage/react.md
View File

@ -12,7 +12,7 @@ export const TabButtonExample: React.FC = () => (
</IonTabButton> </IonTabButton>
<IonTabButton tab="speakers"> <IonTabButton tab="speakers">
<IonIcon name="contacts" /> <IonIcon name="person-circle" />
<IonLabel>Speakers</IonLabel> <IonLabel>Speakers</IonLabel>
</IonTabButton> </IonTabButton>

2
core/src/components/tab-button/usage/vue.md
View File

@ -9,7 +9,7 @@
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="speakers"> <ion-tab-button tab="speakers">
<ion-icon name="contacts"></ion-icon> <ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label> <ion-label>Speakers</ion-label>
</ion-tab-button> </ion-tab-button>

8
core/src/components/tabs/readme.md
View File

@ -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>
<ion-tab-button tab="speakers"> <ion-tab-button tab="speakers">
<ion-icon name="contacts"></ion-icon> <ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label> <ion-label>Speakers</ion-label>
</ion-tab-button> </ion-tab-button>
@ -118,7 +118,7 @@ const routes: Routes = [
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="tab-speaker"> <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-label>Speakers</ion-label>
</ion-tab-button> </ion-tab-button>
@ -189,7 +189,7 @@ export const TabsExample: React.FC = () => (
</IonTabButton> </IonTabButton>
<IonTabButton tab="speakers"> <IonTabButton tab="speakers">
<IonIcon name="contacts" /> <IonIcon name="person-circle" />
<IonLabel>Speakers</IonLabel> <IonLabel>Speakers</IonLabel>
</IonTabButton> </IonTabButton>
@ -244,7 +244,7 @@ export const TabsExample: React.FC = () => (
<!-- Provide a custom route to navigate to --> <!-- Provide a custom route to navigate to -->
<ion-tab-button tab="speakers" :to="{ name: 'app.speakers' }"> <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-label>Speakers</ion-label>
</ion-tab-button> </ion-tab-button>

2
core/src/components/tabs/usage/angular.md
View File

@ -8,7 +8,7 @@
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="speakers"> <ion-tab-button tab="speakers">
<ion-icon name="contacts"></ion-icon> <ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label> <ion-label>Speakers</ion-label>
</ion-tab-button> </ion-tab-button>

2
core/src/components/tabs/usage/javascript.md
View File

@ -25,7 +25,7 @@
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="tab-speaker"> <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-label>Speakers</ion-label>
</ion-tab-button> </ion-tab-button>

2
core/src/components/tabs/usage/react.md
View File

@ -12,7 +12,7 @@ export const TabsExample: React.FC = () => (
</IonTabButton> </IonTabButton>
<IonTabButton tab="speakers"> <IonTabButton tab="speakers">
<IonIcon name="contacts" /> <IonIcon name="person-circle" />
<IonLabel>Speakers</IonLabel> <IonLabel>Speakers</IonLabel>
</IonTabButton> </IonTabButton>

2
core/src/components/tabs/usage/vue.md
View File

@ -32,7 +32,7 @@
<!-- Provide a custom route to navigate to --> <!-- Provide a custom route to navigate to -->
<ion-tab-button tab="speakers" :to="{ name: 'app.speakers' }"> <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-label>Speakers</ion-label>
</ion-tab-button> </ion-tab-button>

56
core/src/components/toolbar/readme.md
View File

@ -50,7 +50,7 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <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>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Default Buttons</ion-title> <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-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button fill="solid"> <ion-button fill="solid">
<ion-icon slot="start" name="contact"></ion-icon> <ion-icon slot="start" name="person-circle"></ion-icon>
Contact Contact
</ion-button> </ion-button>
</ion-buttons> </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-toolbar color="secondary">
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <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>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="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-button>
</ion-buttons> </ion-buttons>
<ion-title>Secondary Toolbar</ion-title> <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-toolbar color="dark">
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <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>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="danger"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Dark Toolbar</ion-title> <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-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <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>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Default Buttons</ion-title> <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-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button fill="solid"> <ion-button fill="solid">
<ion-icon slot="start" name="contact"></ion-icon> <ion-icon slot="start" name="person-circle"></ion-icon>
Contact Contact
</ion-button> </ion-button>
</ion-buttons> </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-toolbar color="secondary">
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <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>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="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-button>
</ion-buttons> </ion-buttons>
<ion-title>Secondary Toolbar</ion-title> <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-toolbar color="dark">
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <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>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="danger"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Dark Toolbar</ion-title> <ion-title>Dark Toolbar</ion-title>
@ -395,7 +395,7 @@ export const ToolbarExample: React.FC = () => (
<IonToolbar> <IonToolbar>
<IonButtons slot="secondary"> <IonButtons slot="secondary">
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="contact" /> <IonIcon slot="icon-only" name="person-circle" />
</IonButton> </IonButton>
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="search" /> <IonIcon slot="icon-only" name="search" />
@ -403,7 +403,7 @@ export const ToolbarExample: React.FC = () => (
</IonButtons> </IonButtons>
<IonButtons slot="primary"> <IonButtons slot="primary">
<IonButton color="secondary"> <IonButton color="secondary">
<IonIcon slot="icon-only" name="more" /> <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
</IonButton> </IonButton>
</IonButtons> </IonButtons>
<IonTitle>Default Buttons</IonTitle> <IonTitle>Default Buttons</IonTitle>
@ -412,7 +412,7 @@ export const ToolbarExample: React.FC = () => (
<IonToolbar> <IonToolbar>
<IonButtons slot="secondary"> <IonButtons slot="secondary">
<IonButton fill="solid"> <IonButton fill="solid">
<IonIcon slot="start" name="contact" /> <IonIcon slot="start" name="person-circle" />
Contact Contact
</IonButton> </IonButton>
</IonButtons> </IonButtons>
@ -496,7 +496,7 @@ export const ToolbarExample: React.FC = () => (
<IonToolbar color="secondary"> <IonToolbar color="secondary">
<IonButtons slot="secondary"> <IonButtons slot="secondary">
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="contact" /> <IonIcon slot="icon-only" name="person-circle" />
</IonButton> </IonButton>
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="search" /> <IonIcon slot="icon-only" name="search" />
@ -504,7 +504,7 @@ export const ToolbarExample: React.FC = () => (
</IonButtons> </IonButtons>
<IonButtons slot="primary"> <IonButtons slot="primary">
<IonButton color="primary"> <IonButton color="primary">
<IonIcon slot="icon-only" name="more" /> <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
</IonButton> </IonButton>
</IonButtons> </IonButtons>
<IonTitle>Secondary Toolbar</IonTitle> <IonTitle>Secondary Toolbar</IonTitle>
@ -513,7 +513,7 @@ export const ToolbarExample: React.FC = () => (
<IonToolbar color="dark"> <IonToolbar color="dark">
<IonButtons slot="secondary"> <IonButtons slot="secondary">
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="contact" /> <IonIcon slot="icon-only" name="person-circle" />
</IonButton> </IonButton>
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="search" /> <IonIcon slot="icon-only" name="search" />
@ -521,7 +521,7 @@ export const ToolbarExample: React.FC = () => (
</IonButtons> </IonButtons>
<IonButtons slot="primary"> <IonButtons slot="primary">
<IonButton color="danger"> <IonButton color="danger">
<IonIcon slot="icon-only" name="more" /> <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
</IonButton> </IonButton>
</IonButtons> </IonButtons>
<IonTitle>Dark Toolbar</IonTitle> <IonTitle>Dark Toolbar</IonTitle>
@ -555,7 +555,7 @@ export const ToolbarExample: React.FC = () => (
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -563,7 +563,7 @@ export const ToolbarExample: React.FC = () => (
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Default Buttons</ion-title> <ion-title>Default Buttons</ion-title>
@ -572,7 +572,7 @@ export const ToolbarExample: React.FC = () => (
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button fill="solid"> <ion-button fill="solid">
<ion-icon slot="start" name="contact"></ion-icon> <ion-icon slot="start" name="person-circle"></ion-icon>
Contact Contact
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
@ -664,7 +664,7 @@ export const ToolbarExample: React.FC = () => (
<ion-toolbar color="secondary"> <ion-toolbar color="secondary">
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -672,7 +672,7 @@ export const ToolbarExample: React.FC = () => (
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="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-button>
</ion-buttons> </ion-buttons>
<ion-title>Secondary Toolbar</ion-title> <ion-title>Secondary Toolbar</ion-title>
@ -681,7 +681,7 @@ export const ToolbarExample: React.FC = () => (
<ion-toolbar color="dark"> <ion-toolbar color="dark">
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -689,7 +689,7 @@ export const ToolbarExample: React.FC = () => (
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="danger"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Dark Toolbar</ion-title> <ion-title>Dark Toolbar</ion-title>

2
core/src/components/toolbar/test/basic/index.html
View File

@ -29,7 +29,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Subheader</ion-title> <ion-title>Subheader</ion-title>

22
core/src/components/toolbar/test/colors/index.html
View File

@ -26,7 +26,7 @@
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button> <ion-button fill="clear">Clear</ion-button>
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Toolbar</ion-title> <ion-title>Toolbar</ion-title>
@ -42,7 +42,7 @@
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button> <ion-button fill="clear">Clear</ion-button>
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Primary</ion-title> <ion-title>Primary</ion-title>
@ -58,7 +58,7 @@
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button> <ion-button fill="clear">Clear</ion-button>
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Secondary</ion-title> <ion-title>Secondary</ion-title>
@ -74,7 +74,7 @@
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button> <ion-button fill="clear">Clear</ion-button>
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Tertiary</ion-title> <ion-title>Tertiary</ion-title>
@ -90,7 +90,7 @@
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button> <ion-button fill="clear">Clear</ion-button>
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Success</ion-title> <ion-title>Success</ion-title>
@ -106,7 +106,7 @@
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button> <ion-button fill="clear">Clear</ion-button>
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Warning</ion-title> <ion-title>Warning</ion-title>
@ -122,7 +122,7 @@
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button> <ion-button fill="clear">Clear</ion-button>
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Danger</ion-title> <ion-title>Danger</ion-title>
@ -138,7 +138,7 @@
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="outline">Outline</ion-button> <ion-button fill="outline">Outline</ion-button>
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Light</ion-title> <ion-title>Light</ion-title>
@ -154,7 +154,7 @@
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button> <ion-button fill="clear">Clear</ion-button>
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Medium</ion-title> <ion-title>Medium</ion-title>
@ -170,7 +170,7 @@
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button> <ion-button fill="clear">Clear</ion-button>
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Dark</ion-title> <ion-title>Dark</ion-title>
@ -186,7 +186,7 @@
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button> <ion-button fill="clear">Clear</ion-button>
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Custom</ion-title> <ion-title>Custom</ion-title>

6
core/src/components/toolbar/test/scenarios/index.html
View File

@ -33,7 +33,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title> <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>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Defaults</ion-title> <ion-title>Defaults</ion-title>
@ -67,7 +67,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary" class="activated"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Defaults.activated</ion-title> <ion-title>Defaults.activated</ion-title>

2
core/src/components/toolbar/test/spec/index.html
View File

@ -46,7 +46,7 @@
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button> </ion-button>
<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-button>
</ion-buttons> </ion-buttons>

14
core/src/components/toolbar/usage/angular.md
View File

@ -20,7 +20,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -28,7 +28,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Default Buttons</ion-title> <ion-title>Default Buttons</ion-title>
@ -37,7 +37,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button fill="solid"> <ion-button fill="solid">
<ion-icon slot="start" name="contact"></ion-icon> <ion-icon slot="start" name="person-circle"></ion-icon>
Contact Contact
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
@ -129,7 +129,7 @@
<ion-toolbar color="secondary"> <ion-toolbar color="secondary">
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -137,7 +137,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="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-button>
</ion-buttons> </ion-buttons>
<ion-title>Secondary Toolbar</ion-title> <ion-title>Secondary Toolbar</ion-title>
@ -146,7 +146,7 @@
<ion-toolbar color="dark"> <ion-toolbar color="dark">
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -154,7 +154,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="danger"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Dark Toolbar</ion-title> <ion-title>Dark Toolbar</ion-title>

14
core/src/components/toolbar/usage/javascript.md
View File

@ -20,7 +20,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -28,7 +28,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Default Buttons</ion-title> <ion-title>Default Buttons</ion-title>
@ -37,7 +37,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button fill="solid"> <ion-button fill="solid">
<ion-icon slot="start" name="contact"></ion-icon> <ion-icon slot="start" name="person-circle"></ion-icon>
Contact Contact
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
@ -127,7 +127,7 @@
<ion-toolbar color="secondary"> <ion-toolbar color="secondary">
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -135,7 +135,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="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-button>
</ion-buttons> </ion-buttons>
<ion-title>Secondary Toolbar</ion-title> <ion-title>Secondary Toolbar</ion-title>
@ -144,7 +144,7 @@
<ion-toolbar color="dark"> <ion-toolbar color="dark">
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -152,7 +152,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="danger"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Dark Toolbar</ion-title> <ion-title>Dark Toolbar</ion-title>

14
core/src/components/toolbar/usage/react.md
View File

@ -35,7 +35,7 @@ export const ToolbarExample: React.FC = () => (
<IonToolbar> <IonToolbar>
<IonButtons slot="secondary"> <IonButtons slot="secondary">
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="contact" /> <IonIcon slot="icon-only" name="person-circle" />
</IonButton> </IonButton>
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="search" /> <IonIcon slot="icon-only" name="search" />
@ -43,7 +43,7 @@ export const ToolbarExample: React.FC = () => (
</IonButtons> </IonButtons>
<IonButtons slot="primary"> <IonButtons slot="primary">
<IonButton color="secondary"> <IonButton color="secondary">
<IonIcon slot="icon-only" name="more" /> <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
</IonButton> </IonButton>
</IonButtons> </IonButtons>
<IonTitle>Default Buttons</IonTitle> <IonTitle>Default Buttons</IonTitle>
@ -52,7 +52,7 @@ export const ToolbarExample: React.FC = () => (
<IonToolbar> <IonToolbar>
<IonButtons slot="secondary"> <IonButtons slot="secondary">
<IonButton fill="solid"> <IonButton fill="solid">
<IonIcon slot="start" name="contact" /> <IonIcon slot="start" name="person-circle" />
Contact Contact
</IonButton> </IonButton>
</IonButtons> </IonButtons>
@ -136,7 +136,7 @@ export const ToolbarExample: React.FC = () => (
<IonToolbar color="secondary"> <IonToolbar color="secondary">
<IonButtons slot="secondary"> <IonButtons slot="secondary">
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="contact" /> <IonIcon slot="icon-only" name="person-circle" />
</IonButton> </IonButton>
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="search" /> <IonIcon slot="icon-only" name="search" />
@ -144,7 +144,7 @@ export const ToolbarExample: React.FC = () => (
</IonButtons> </IonButtons>
<IonButtons slot="primary"> <IonButtons slot="primary">
<IonButton color="primary"> <IonButton color="primary">
<IonIcon slot="icon-only" name="more" /> <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
</IonButton> </IonButton>
</IonButtons> </IonButtons>
<IonTitle>Secondary Toolbar</IonTitle> <IonTitle>Secondary Toolbar</IonTitle>
@ -153,7 +153,7 @@ export const ToolbarExample: React.FC = () => (
<IonToolbar color="dark"> <IonToolbar color="dark">
<IonButtons slot="secondary"> <IonButtons slot="secondary">
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="contact" /> <IonIcon slot="icon-only" name="person-circle" />
</IonButton> </IonButton>
<IonButton> <IonButton>
<IonIcon slot="icon-only" name="search" /> <IonIcon slot="icon-only" name="search" />
@ -161,7 +161,7 @@ export const ToolbarExample: React.FC = () => (
</IonButtons> </IonButtons>
<IonButtons slot="primary"> <IonButtons slot="primary">
<IonButton color="danger"> <IonButton color="danger">
<IonIcon slot="icon-only" name="more" /> <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
</IonButton> </IonButton>
</IonButtons> </IonButtons>
<IonTitle>Dark Toolbar</IonTitle> <IonTitle>Dark Toolbar</IonTitle>

14
core/src/components/toolbar/usage/vue.md
View File

@ -21,7 +21,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -29,7 +29,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Default Buttons</ion-title> <ion-title>Default Buttons</ion-title>
@ -38,7 +38,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button fill="solid"> <ion-button fill="solid">
<ion-icon slot="start" name="contact"></ion-icon> <ion-icon slot="start" name="person-circle"></ion-icon>
Contact Contact
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
@ -130,7 +130,7 @@
<ion-toolbar color="secondary"> <ion-toolbar color="secondary">
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -138,7 +138,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="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-button>
</ion-buttons> </ion-buttons>
<ion-title>Secondary Toolbar</ion-title> <ion-title>Secondary Toolbar</ion-title>
@ -147,7 +147,7 @@
<ion-toolbar color="dark"> <ion-toolbar color="dark">
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <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-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -155,7 +155,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="danger"> <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-button>
</ion-buttons> </ion-buttons>
<ion-title>Dark Toolbar</ion-title> <ion-title>Dark Toolbar</ion-title>

30
core/src/themes/test/css-variables/index.html
View File

@ -69,7 +69,7 @@
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="overlays"> <ion-tab-button tab="overlays">
<ion-label>Overlays</ion-label> <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-button>
</ion-tab-bar> </ion-tab-bar>
@ -526,12 +526,12 @@
<ion-icon name="happy" color="warning"></ion-icon> <ion-icon name="happy" color="warning"></ion-icon>
<ion-icon name="people"></ion-icon> <ion-icon name="people"></ion-icon>
<ion-icon name="person" color="tertiary"></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="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="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="map" color="secondary"></ion-icon>
<ion-icon name="navigate"></ion-icon> <ion-icon name="navigate"></ion-icon>
@ -541,7 +541,7 @@
<ion-icon name="mic"></ion-icon> <ion-icon name="mic"></ion-icon>
<ion-icon name="musical-notes" color="warning"></ion-icon> <ion-icon name="musical-notes" color="warning"></ion-icon>
<ion-icon name="volume-high"></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="cafe" color="success"></ion-icon>
<ion-icon name="calculator"></ion-icon> <ion-icon name="calculator"></ion-icon>
@ -609,7 +609,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Toolbar</ion-title> <ion-title>Toolbar</ion-title>
@ -623,7 +623,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<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-button>
</ion-buttons> </ion-buttons>
<ion-segment> <ion-segment>
@ -635,7 +635,7 @@
<ion-toolbar color="secondary"> <ion-toolbar color="secondary">
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<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-button>
</ion-buttons> </ion-buttons>
<ion-searchbar></ion-searchbar> <ion-searchbar></ion-searchbar>
@ -649,7 +649,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Tertiary</ion-title> <ion-title>Tertiary</ion-title>
@ -663,7 +663,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Success</ion-title> <ion-title>Success</ion-title>
@ -677,7 +677,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Warning</ion-title> <ion-title>Warning</ion-title>
@ -686,7 +686,7 @@
<ion-toolbar color="danger"> <ion-toolbar color="danger">
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<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-button>
</ion-buttons> </ion-buttons>
<ion-searchbar></ion-searchbar> <ion-searchbar></ion-searchbar>
@ -700,7 +700,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<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-button>
</ion-buttons> </ion-buttons>
<ion-segment> <ion-segment>
@ -717,7 +717,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Medium</ion-title> <ion-title>Medium</ion-title>
@ -731,7 +731,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<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-button>
</ion-buttons> </ion-buttons>
<ion-title>Dark</ion-title> <ion-title>Dark</ion-title>