p-rating component with custom icons

[mselerin]

I'm submitting a ...

[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap

Current behavior
The rating component shows only stars icons.

Expected behavior
It would be usefull if we could specify the icons to render this component.

What is the motivation / use case for changing the behavior?
A concrete use case is when we want to show a "price rating" component. Instead of stars, we could show dollars / euros signs.

A simple implementation for this is to have 3 more inputs :

@Input() iconActive: string = 'fa-star';
@Input() iconInactive: string = 'fa-star-o';
@Input() iconBan: string = 'fa-ban';

and use it in the component template :

@Component({
    selector: 'p-rating',
    template: `
        <div class="ui-rating" [ngClass]="{'ui-state-disabled': disabled}">
            <a href="#" *ngIf="cancel" (click)="clear($event)">
                <span class="fa" [ngClass]="[iconBan]"></span>
            </a>
            <a href="#" *ngFor="let star of starsArray;let i=index" (click)="rate($event,i)">
                <span class="fa" [ngClass]="{iconInactive: (!value || i >= value), iconActive:(i < value)}"></span>
            </a>
        </div>
    `,
    providers: [RATING_VALUE_ACCESSOR]
})

I'll provide a PR with this solution ASAP.

[MrBlaise]

I would love to see this feature as well. However I would love to have even more options. I really like how the guys at ng-boostrap (https://ng-bootstrap.github.io/#/components/rating/examples) doing the rating component.

It would be really nice if we could pass a template to customize the ratings, and be able to use fractions.