How to create Angular component that accepts input with PrimeNg

I am creating templates to be used across an app in Angular 14. I created a button component that accepts inputs in order to be reused. When creating a button passing in the icon as an input is causing the formatting to change as seen in the screenshot below.

I am expecting the component to look like the 3rd button, but it appears as the 2nd when using an icon. What might be causing it to display so differently as I am using the same classes and icon input? Is there a better way to create a reusable button component with an icon?

button.component.html

<button
    pButton
    class="p-button-outlined mr-2 mb-2"
    pRipple
    [type]="type"
    [ngClass]="{
        'sm-button': smallButton,
        'md-button': mediumButton,
        'lg-button': largeButton
       }"
    [label]="label"
    [disabled]="disabled"
    [icon]="icon"
    [pTooltip]="tooltip"
    (click)="onClick($event)"
    (hover)="onHover($event)">
    <ng-content></ng-content>
</button>

button.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { BUTTON_TYPE, SIZE } from 'src/constants/constants';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnInit {

  @Input() label = '';
  @Input() disabled = false;
  @Input() tooltip = '';
  @Input() size = SIZE.MEDIUM;
  @Input() type = BUTTON_TYPE.BUTTON;
  @Input() icon = '';
  @Output() click = new EventEmitter<any>();
  @Output() hover = new EventEmitter<any>();

  smallButton= false;
  mediumButton= false;
  largeButton= false;

  constructor() { }

  ngOnInit(): void {
    this.smallButton= this.buttonSize === SIZE.SMALL ? true : false;
    this.mediumButton= this.buttonSize === SIZE.MEDIUM ? true : false;
    this.largeButton= this.buttonSize === SIZE.LARGE ? true : false;
  }

   onClick(target: any) {
    this.click.emit(target);
  }

  onHover(target: any) {
    this.hover.emit(target);
  }

}

Calling the component in another page:

        <app-button>button</app-button>
        <app-button icon="pi pi-check">button with Icon</app-button>
        <button pButton pRipple label="button with Icon" class="p-button-outlined mr-2 mb-2" icon="pi pi-check"></button>