Unexpected 2-4px Height Increase in SVG After Extracting to Angular Component

After extracting it to a separate Angular component, I'm encountering an issue where an SVG's height increases by several pixels. The SVG displays correctly when inline, but the height grows unexpectedly in the component.
pause.component.html

<svg xmlns="http://www.w3.org/2000/svg" [attr.width]='width' [attr.height]="height" viewBox="0 0 100 100"
xml:space="preserve">
<path
d="M34.124 33.604a23.1 23.1 0 0 1 16.396-6.791 23.12 23.12 0 0 1 16.396 6.791 23.1 23.1 0 0 1 6.791 16.392 23.12 23.12 0 0 1-6.791 16.4c-9.055 9.055-23.737 9.055-32.792 0s-9.055-23.737 0-32.792M45.747 40v20m9.547-20v20"
fill="none" [attr.stroke]="strokeColor" [attr.stroke-width]="strokeWidth" stroke-linecap="round"
stroke-linejoin="round" stroke-miterlimit="10" />
</svg>



pause.component.ts

import { Component, Input } from '@angular/core';

@Component({
selector: 'pause-icon',
imports: [],
templateUrl: './pause.component.html',
})
export default class PauseIcon {
@Input() width?: number = 800;
@Input() height?: number = 800;
@Input() strokeColor?: string = '#fff';
@Input() strokeWidth?: number = 4;
}


Inside other component:
<button type='button' class='play-pause'>
<pause-icon [width]="24" [height]="24" />
</button>


Below I attached two pictures: the first is an SVG size, and the second is a pause component size.

Continue reading...