javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +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/"
],
"dependencies": {
"ionicons": "^5.0.0-13",
"ionicons": "5.0.0-15",
"tslib": "^1.10.0"
},
"devDependencies": {

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

@@ -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>

20
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-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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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 -->
<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>

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

@@ -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>

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

@@ -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>

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 --*/}
<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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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"/>
</>
);

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

@@ -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>

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-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">

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

@@ -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>

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

@@ -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>

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

@@ -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">

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

@@ -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">

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

@@ -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">

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

@@ -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">

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-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>

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

@@ -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>

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="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>

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 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>

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

@@ -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>

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

@@ -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>

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

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

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

@@ -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>

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 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>

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

@@ -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>

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

@@ -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>

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

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

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

@@ -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>

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-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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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-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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>