CODEWITHSUNDEEP
cssangularaccordionng-bootstrap
core114
core114

Reputation: 5335

ng bootstrap Accordion to cant add arrow down icon

Any one know how to to add ng bootstrap Accordion for icon-arrow-down

I added this <i class="icon-arrow-down"></i> but not work

This is my code 

<ngb-accordion #acc="ngbAccordion">
  <ngb-panel title="Task Tyeps (5)">  <i class="icon-arrow-down"></i>
    <ng-template ngbPanelContent>
   text.....
    </ng-template>
  </ngb-panel>
</ngb-accordion>

I try to add like this

enter image description here

Thanks

Upvotes: 3

Views: 9344

Answers (2)

core114
core114

Reputation: 5335

Finally I solved my issue 

<ngb-accordion class="range-accordion">
    <ngb-panel>
        <ng-template ngbPanelTitle>
            <div class="d-flex justify-content-between">
                <div class="d-flex" style="font-weight: bold; color: #1c2128;">Checklist items</div>
                <div class="d-flex"><i class="icon-arrow-down"></i></div>
            </div>
        </ng-template>
        <ng-template ngbPanelContent>
            text
        </ng-template>
    </ngb-panel>
</ngb-accordion>

Add some custom styles for our requirements.

.range-accordion .btn-link {
    width: 100%;
    text-decoration-line: none;
}

Upvotes: 3

Ahmed Hassan
Ahmed Hassan

Reputation: 269

I don't know your full code but I guess you didn't import Font Awesome. "icon-arrow-down" needs Font Awesome 3.2.1 library, try to add following in the <head> section of your page

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Upvotes: 0

Related Questions