Indicators and Paginator styling for PrimeNG Carousel - html

Question

I have implemented a carousel using PrimeNG which looks like this
Notice the style of the carousel indicators and navigators. I want to have the default style of indicators/navigators for the carousel like this
I have added the imports for CarouselModule and ButtonModule in my module.ts file but it does not work. Is this possible using CSS or any other way?
PrimeNG Documentation - https://www.primefaces.org/primeng/carousel
My code:
app.component.html
<p-carousel
[value]="planDetails"
styleClass="custom-carousel"
[numVisible]="3"
[numScroll]="1"
[circular]="true"
[autoplayInterval]="3000"
>
<ng-template let-plan pTemplate="item">
<div class="centered-div">
<div class="plans">
<div class="card plan-card">
<div class="card-content">
<div class="plan-name">{{ plan?.planName }}</div>
<div class="plan-desc">
{{ plan?.description }}
</div>
<div class="plan-price">
<span class="plan-cost"
>$ {{ plan?.pricePerUser }}
<span>
<sup class="plan-currency">{{
plan?.currency
}}</sup>
</span></span
>
</div>
<div class="billing-way">per user billed annually</div>
<div class="plan-upgrade-btn">
<button
type="button"
class="remediator-blue-btn change-btn"
>
<span class="button-text" (click)="onUpgrade(plan)">
Select
</span>
</button>
</div>
<hr />
<div class="plan-features">Features</div>
<div class="plan-feature-1">
<img
src="assets/images/orange-check.svg"
alt=""
class="feature-check"
/>
<span class="feature-text"
>Daily search limit -
{{ plan.dailySearchLimit }}</span
>
</div>
<div class="plan-feature-1">
<img
src="assets/images/orange-check.svg"
alt=""
class="feature-check"
/>
<span class="feature-text"
>Maximum searches - {{ plan.maxSearches }}</span
>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</p-carousel>
</div>```

Answer 1

Please check that you have the primeng theme in angular.json file
can you upload the styles array from your angular.json file ?
add the theme to the styles array in angular.json
"node_modules/primeng/resources/themes/saga-blue/theme.css"
to edit the navigators icons with css you can use this:
::ng-deep .p-carousel .p-carousel-content .p-carousel-prev {
}
::ng-deep .p-carousel .p-carousel-content .p-carousel-next {
}