How To Remove Ionic 4 Segment Indicator (bottom Line)? Please Let Me Know

.segment-button-indicator { -ms-flex-item-align: end; align-self: flex-end; width: 100%; height: 2px; background-color: var(--indicator-co

Solution 1:

You cannot remove it, but you can hide it by setting it's color to transparent.

On theme/variables.scss add this:

ion-segment-button {
  --indicator-color: transparent !important;
  --indicator-color-checked: transparent !important;
}

Solution 2:

put into your scss page

  ion-segment-button {
    --color-checked: red;
    --indicator-color: none;
  }

• indicator for border bottom
• color for segment active/checked

Solution 3:

Please go and paste below code in your variables.scss it will work

.segment-button-checked{
  --border-width:0px;
  --indicator-color-checked: 0;   
}