Change color of icon

Question

How do I change the color of an icon when clicked? I have created custom icons and are working perfectly, but I would like that selected, change your color. I’ve tried everything but I haven’t got anything yet. If anyone can help me.. Please. My icons look like this: HTML

<div no-padding>
<ion-segment [(ngModel)]="Menu" class="SwipedTabs-tabs">

  <ion-segment-button (click)="selectTab(0)">
    <ion-icon name="icon-ico_gastronomia_off"></ion-icon>
  </ion-segment-button>

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

      <ion-segment mode="md" [(ngModel)]="Menu">
      <ion-segment-button value="Todosgastronomia" class="round-button" 
      (click)="selecionaprodutoscategoria(1)">
        Todos
      </ion-segment-button>

      <ion-segment-button value="Bareserestaurantes" class="round-button" 
      (click)="selecionaprodutoscategoria(2)">
        Bares & Restaurantes
      </ion-segment-button>

scss

 .SwipedTabs-indicatorSegment{
    -webkit-transition: 0.3s all;
    -moz-transition:  0.3s all;
    -o-transition:  0.3s all;
    transition:  0.3s all;
    transform-origin: top 0 left 0;
    height: 6px;
    position: relative;
    top: -2px;
    background-color: #179c90 !important;

}

// COR GASTRONOMIA/COMPRAS/PASSEIOS  SEGMENTS //
.SwipedTabs-tabs ion-segment-button{
    border:none !important;
    color: carioca!important;
    background-color:white!important;
    background: transparent !important;

    ion-icon:before {
        font-size: 3.7rem !important;    
        color: #393d37;
     }
}

.SwipedTabs-tabs ion-segment-button.SwipedTabs-activeTab{
    color:#179c90     !important;
    width: fit-content !important;

}



.SwipedTabs-tabs
{
    border-bottom: solid 3px #cccabd  !important;
    border:none;
}

.segment-button {

    border-color: #332d2c !important;
    color: #393d37 !important;
    border-width: none !important;
    flex: auto !important;
    background: transparent;

    &.activated, &.segment-activated {   

    //border-bottom: 2px solid red !important;
                     //Corresponde a cor das subcategorias ativas
    color:#179c90  !important;  

    background-color: rgba(53, 52, 52, 0.089) !important;

                       //Corresponde a cor do ícone ativo
    ion-icon:Before {
    font-size: 4rem ;    
    background: transparent;
    color: #179c90;

    }   

    }
}

    ion-segment-button {
    border-style: none;
    color: #179c90;
    height: 6px;
    font-size: 11px !important;
    text-transform: none !important;  
    max-width: 100% !important;

Answer 1

You can change the color by the file Theme/variables.scss, but only found the solution for IOS. Example by changing the color to red:

$segment-button-ios-text-color: red;

Another option can be changed directly by the page . scss. Example:

.segment .segment-button {
    background-color: white;
    color: red;
    border-color: grey;
}

.segment .segment-button.segment-activated {
    background-color: red;
    color: white;
    border-color: blue;
}