Change title by icon

Question

I am still learning about Ionic. I would like to know how to change the title of the guides by an icon or a custom image.

HTML

<ion-header>

  <ion-navbar>
    <ion-title>empty</ion-title>
  </ion-navbar>

</ion-header>


<ion-content >
    <ion-segment  class="SwipedTabs-tabs"  >
        <ion-segment-button *ngFor='let tab of tabs ; let i = index ' value="IngoreMe" (click)="selectTab(i)"
        [ngClass]='{ "SwipedTabs-activeTab" : ( this.SwipedTabsSlider  && ( this.SwipedTabsSlider.getActiveIndex() === i || (  tabs.length -1 === i&& this.SwipedTabsSlider.isEnd()))) }' >
          {{tab}}
        </ion-segment-button>
      </ion-segment>

      <!-- here is our dynamic line  "indicator"-->
      <div id='indicator' class="SwipedTabs-indicatorSegment" [ngStyle]="{'width.%': (100/this.tabs.length)}"></div>

      <ion-slides #SwipedTabsSlider  (ionSlideDrag)="animateIndicator($event)"
                  (ionSlideWillChange)="updateIndicatorPosition()"
                  (ionSlideDidChange)="updateIndicatorPosition()"
                  (pan)="updateIndicatorPosition()"
                  [pager]="false"
            >
        <ion-slide>
          <h1>Page 1 </h1>
        </ion-slide>
        <ion-slide>
          <h1>Page 2 </h1>
        </ion-slide>
        <ion-slide>
          <h1>Page 3 </h1>
        </ion-slide>
        <ion-slide>
          <h1>Page 4 </h1>
        </ion-slide>
      </ion-slides>

</ion-content>

TS

   import { Component, ViewChild } from '@angular/core';
    import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';

    /**
     * Generated class for the EmptyPage page.
     *
     * See https://ionicframework.com/docs/components/#navigation for more info on
     * Ionic pages and navigation.
     */

    @IonicPage()
    @Component({
      selector: 'page-empty',
      templateUrl: 'empty.html',
    })
    export class EmptyPage {

      @ViewChild('SwipedTabsSlider') SwipedTabsSlider: Slides ;

      SwipedTabsIndicator :any= null;
      tabs:any=[];


      constructor(public navCtrl: NavController) {
        this.tabs=["page1","page2","page3","page4"];
      }
      ionViewDidEnter() {
        this.SwipedTabsIndicator = document.getElementById("indicator");
      }

      selectTab(index) {    
        this.SwipedTabsIndicator.style.webkitTransform = 'translate3d('+(100*index)+'%,0,0)';
        this.SwipedTabsSlider.slideTo(index, 500);
      }

      updateIndicatorPosition() {
          // this condition is to avoid passing to incorrect index
        if( this.SwipedTabsSlider.length()> this.SwipedTabsSlider.getActiveIndex())
        {
            this.SwipedTabsIndicator.style.webkitTransform = 'translate3d('+(this.SwipedTabsSlider.getActiveIndex() * 100)+'%,0,0)';
        }

        }

      animateIndicator($event) {
        if(this.SwipedTabsIndicator)
            this.SwipedTabsIndicator.style.webkitTransform = 'translate3d(' + (($event.progress* (this.SwipedTabsSlider.length()-1))*100) + '%,0,0)';
      }

    }

Answer 1

for icons use tag <ion-icon></ion-icon> and for image use <ion-img width="80" height="80" src="..."></ion-img> remove {{tab}} and add the icon tag

    <ion-segment  class="SwipedTabs-tabs"  >
    <ion-segment-button *ngFor='let tab of tabs ; let i = index ' value="IngoreMe" (click)="selectTab(i)"
    [ngClass]='{ "SwipedTabs-activeTab" : ( this.SwipedTabsSlider  && ( this.SwipedTabsSlider.getActiveIndex() === i || (  tabs.length -1 === i&& this.SwipedTabsSlider.isEnd()))) }' >
        <ion-icon name="analytics"></ion-icon>
    </ion-segment-button>
  </ion-segment>

the best way to do this if static would be to add the ion-segment-button one by one in its code it is generating dynamically by ngFor and taking the values of this.tab so it generates 4 ion-segment-buttonIf you add a fifth tab it will create a new button. Example of static icons:

<ion-segment [(ngModel)]="icons" color="secondary">
  <ion-segment-button value="camera">
    <ion-icon name="camera"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="bookmark">
    <ion-icon name="bookmark"></ion-icon>
  </ion-segment-button>
</ion-segment> 

Answer 2

in . ts I can edit the title where it is:" constructor(public navCtrl: Navcontroller) { this.tabs=["page1","page2","page3","page4"]; "

But I don’t know how from here ( if it’s here ) I change to an icon, or an image. If anyone understands what I want and knows something that can help, I would be very grateful. : D