ionic 4 / ion-item details arrow opacity can't be modified

Issue

I'm working on a project that wasn't initially coded by me, and I've encountered an issue that I can't resolve.

Take a look at the following code:

<ion-item detail *ngIf="c.cv" [routerLink]="['/contact',c.uid]">
        <div class="avatar-voyant">
          <div class="group-circle">
            <div class="circle opacity-100" style="margin-left: -2px; margin-top: -2px; width: 62px;"></div>
            <div class="circle opacity-50" style="margin-top: 1px; margin-left: 7px;"></div>
            <div class="circle opacity-35" style="margin-top: 6px; margin-left: 13px; width: 45px"></div>
            <div class="circle opacity-20"
              style="margin-left: 0px; margin-top: 11px; width: 45px; height: 45px; border-radius: 13px;"></div>
            <div class="circle opacity-35" style="margin-top: 5px; margin-left: -10px; height: 45px;"></div>
            <div class="  circle opacity-20"
              style="margin-left: -7px; margin-top: 0px; border-radius: 50%; height: 35px; width: 35px;"></div>
            <ion-thumbnail>
              <ion-img [src]="c.picture"></ion-img>
            </ion-thumbnail>
          </div>

          <div style="padding-bottom: 15px"></div>
        </div>
        <ion-label class="ion-text-wrap">
          <h3 class="text-rose-pale padding-bottom-5"><b>{{c.username}}</b></h3>
          <h5>{{c.competence1}} - {{c.competence2}} - {{c.competence3}}</h5>
          <!-- <p [ngClass]="{'appEllipseContent': c.buttonText == 'Plus', 'appEllipseContenthover': c.buttonText != 'Plus'}"
              [innerHTML]="c.cv" class="appEllipseContenthover">{{c.cv}}</p> -->

        </ion-label>

        <ion-badge slot="end" *ngIf="c.nbMsg">{{c.nbMsg}}</ion-badge>
        <ion-icon name="mail" color="tertiary" slot="end" size="small"
          *ngIf="c.m && c.m.fromUid!=profileServ.uid && c.m.lu<1"></ion-icon>

      </ion-item>

The main problem is that I must use the ion-item with the detail parameter, which displays an arrow on the right side of the list. However, the original opacity is set to 0.2, and I've tried to override it by targeting the SVG or the ion-item. I also attempted to use a variable by placing it in my global.scss file like this:

.item-detail-icon {
    color: var(--detail-icon-color);
    font-size: var(--detail-icon-font-size);
    opacity: var(--detail-icon-opacity);
}

But even if i wrote --detail-icon-opacity this doesn't affect the opacity that still look like to be set to 0.2.

--detail-icon-opacity see to be no in the project si i'm out of idea to set the opacity to 1.0

But even though I've written --detail-icon-opacity, it doesn't seem to affect the opacity, which still appears to be set at 0.2. It seems that --detail-icon-opacity is not defined in the project, so I'm running out of ideas on how to set the opacity to 1.0.

I would greatly appreciate the help of the community if someone knows how to fix this issue."

I tryed modify the value --detail-icon-opacity or overwrite the opacity

Solution

I created a component with the following template:

<ion-item detail>
  <ion-label>
    Label
  </ion-label>
</ion-item>

Then added this rule to the global.scss file:

ion-item {
  --detail-icon-opacity: 1;
}

The rule was applied as expected. You might want to try applying the rule to the ion-item component, as shown in my example.

(Tested with @angular/[email protected] and @ionic/[email protected])

Answered By - hunterbring