ng-bootstrap accordion applies style to child icons

Question

Star shows when there is no focus on the accordion

Star dissappears when there's focus on the accordian

Here's my CSS to display the star to the left of the accordion:

.icon-star2.relevant-source {
  position: absolute;
  margin-left: -5em;
}

Here's the markup[replaced variables with x to hide sensitive info]:

 <ngb-accordion class="accordion accordion-alternate">
           <ngb-panel class="source-accordion" *ngFor="x">
                            <ng-template ngbPanelTitle>
                                <i *ngIf="x > 0" class="icon-star2 relevant-source"
                                   title="This source contains {{x}} of the top 10 most relevant documents.">
                                </i>
                                <span class="source-link source-link-text">{{x}}</span><span class="float-right source-link">
                                {{x | number:0 }}</span>
                            </ng-template>
                            <ng-template ngbPanelContent>
                                List of documents
                            </ng-template>
                        </ngb-panel>
                    </ngb-accordion>

My goal is to have a star next to certain accordion elements with a title on it. (native tooltip)

I've tried a handfull of things but I can't seem to get this issue resolved. Does anyone have any suggestions?

Answer 1

try with deep

/deep/ ngb-accordion > ngb-panel> i.icon-star2.relevant-source{
 position: absolute;
 margin-left: -5em;
}