icon.page.html

<app-header title="Icon"></app-header>

<ion-content>
  <ion-grid class="page-content" fixed>
    <ion-row>
      <ion-col size="12">
        <app-example [api]="'assets/docs/snippets/icon/api.md'" [typescript]="'assets/docs/snippets/icon/ts.md'" [css]="'assets/docs/snippets/icon/css.md'"
          [html]="'assets/docs/snippets/icon/html.md'" [title]="'Icon Component'" [subtitle]="'This is basically an ion-icon but it can also display badge notifications and has smooth icon change transitions.'">
          <ion-item-divider>
            <ion-label>Basic Example</ion-label>
          </ion-item-divider>

          <ion-button (click)="getNewIcon()">
            change icon
          </ion-button>
          <ion-button (click)="increment()">
            <ion-icon slot="icon-only" name="add"></ion-icon>
          </ion-button>
          <ion-button (click)="decrement()">
            <ion-icon slot="icon-only" name="remove"></ion-icon>
          </ion-button>

          <ion-item>
            <ion-label>Icon turned off</ion-label>
            <ion-checkbox [(ngModel)]="off" slot="end"></ion-checkbox>
          </ion-item>
          <ion-item>
            <ion-label>Icon dot</ion-label>
            <ion-checkbox [(ngModel)]="dot" slot="end"></ion-checkbox>
          </ion-item>

          <div class="example">
            <ion-button [fivCenter] fill="clear">
              <fiv-icon [off]="off" [dotVisible]="dot" slot="icon-only" [indicatorValue]="indicatorValue" [name]="icon"></fiv-icon>
            </ion-button>
          </div>


        </app-example>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>