ionic/demos/icon/main.html at feature/progressbar · CssFormWork/ionic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<ion-header>

  <ion-navbar>
    <ion-title>Icon</ion-title>
  </ion-navbar>

</ion-header>


<ion-content text-center class="icon-demo">

  <ion-row>
    <ion-col><ion-icon name="ionic" primary></ion-icon></ion-col>
    <ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
    <ion-col><ion-icon name="heart" danger></ion-icon></ion-col>
    <ion-col><ion-icon name="ionitron" primary></ion-icon></ion-col>

    <ion-col><ion-icon name="happy" vibrant></ion-icon></ion-col>
    <ion-col><ion-icon name="people"></ion-icon></ion-col>
    <ion-col><ion-icon name="person"></ion-icon></ion-col>
    <ion-col><ion-icon name="contact"></ion-icon></ion-col>

    <ion-col><ion-icon name="apps"></ion-icon></ion-col>
    <ion-col><ion-icon name="lock"></ion-icon></ion-col>
    <ion-col><ion-icon name="key" bright></ion-icon></ion-col>
    <ion-col><ion-icon name="unlock"></ion-icon></ion-col>

    <ion-col><ion-icon name="map" secondary></ion-icon></ion-col>
    <ion-col><ion-icon name="navigate"></ion-icon></ion-col>
    <ion-col><ion-icon name="pin"></ion-icon></ion-col>
    <ion-col><ion-icon name="locate"></ion-icon></ion-col>

    <ion-col><ion-icon name="mic"></ion-icon></ion-col>
    <ion-col><ion-icon name="musical-notes" vibrant></ion-icon></ion-col>
    <ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
    <ion-col><ion-icon name="microphone"></ion-icon></ion-col>

    <ion-col><ion-icon name="cafe" bright></ion-icon></ion-col>
    <ion-col><ion-icon name="calculator"></ion-icon></ion-col>
    <ion-col><ion-icon name="bus"></ion-icon></ion-col>
    <ion-col><ion-icon name="wine" danger></ion-icon></ion-col>

    <ion-col><ion-icon name="camera"></ion-icon></ion-col>
    <ion-col><ion-icon name="image" secondary></ion-icon></ion-col>
    <ion-col><ion-icon name="star" bright></ion-icon></ion-col>
    <ion-col><ion-icon name="pin"></ion-icon></ion-col>

    <ion-col><ion-icon name="arrow-dropup-circle" vibrant></ion-icon></ion-col>
    <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
    <ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
    <ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>

    <ion-col><ion-icon name="cloud"></ion-icon></ion-col>
    <ion-col><ion-icon name="sunny" bright></ion-icon></ion-col>
    <ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
    <ion-col><ion-icon name="rainy" primary></ion-icon></ion-col>
  </ion-row>

</ion-content>

<style>
  .icon-demo ion-icon {
    font-size: 50px;
  }

  .icon-demo ion-row {
    height: 100%;
    flex-wrap: wrap;
  }

  .icon-demo ion-col {
    flex: 0 0 25%;
    max-width: 25%;
    text-align: center;
    padding: 10px 5px;
  }
</style>