Each checkbox is showing up twice

Question

I am trying mat-checkbox in Angular. Basically trying to design payment method UI. So, I used mat-checkbox to select one payment method. But each box is showing up double. Here I am adding my code:

<div fxLayout="column" fxLayoutGap="1rem">
          <p>Select Payment Method</p>
          <mat-checkbox>Cash On Delivery</mat-checkbox>
          <mat-checkbox>Online Payment</mat-checkbox>
          <mat-checkbox>Wallet</mat-checkbox>
        </div>

Also I am adding an Image of my UI:

Answer 1

It seems like some material styling is missing.

Check the installation guide from the official docs: Angular Material | Getting Started

ng add @angular/material

The ng add command will install Angular Material, the Component Dev Kit (CDK), Angular Animations and ask you the following questions to determine which features to include:

    Choose a prebuilt theme name, or "custom" for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

    Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

    Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular's animation system. Declining this will disable most of Angular Material's animations.

The ng add command will additionally perform the following configurations:

    Add project dependencies to package.json
    Add the Roboto font to your index.html
    Add the Material Design icon font to your index.html
    Add a few global CSS styles to:
        Remove margins from body
        Set height: 100% on html and body
        Set Roboto as the default application font