angularprimengprimeicons

PrimenG radio button icons not shown

I am trying to have a radio button displayed next to a question I will be asking a user. I am using PrimeNg and when I compile my code I do not get the empty circle next to my radio fields

I have installed primeicons aswell

Code for radio buttons

<p>
    I have enough hours to cover these Absences*
</p>
<div class="ui-g-12">
    <p-radioButton
        name="group1"
        value="YES"
        label="YES"
        [(ngModel)]="YES"
        inputId="YES"
    ></p-radioButton>
</div>
<div class="ui-g-12">
    <p-radioButton
        name="group1"
        value="NO"
        label="NO"
        [(ngModel)]="NO"
        inputId="NO"
    ></p-radioButton>
</div>

Here is what is outputted on my screen

Displayed code

Solution

  • This is a working Stackblitz of your code with visible icons.

    Make sure that styles for both theme and icons are used in styles.css or in angular.json as recommended in Getting Started guide.