Change icon color

Navigation
0

How do I change the color of an icon when clicked? I have created custom icons and they are working perfectly, but I would like it selected, change its color. I've tried everything but I have not gotten 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;
    
asked by anonymous 02.08.2018 / 20:03

1 answer

0

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

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

Another option may be to change directly through the page's .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;
}
    
02.08.2018 / 20:53
Embedded Form Mailchimp does not redirect to landing page Adafruit_BMP in python 3