[Fixed] How to reduce space between button text when new line is inserted in Angular?

Issue

I have a button with a new line inserted to break the long text of button in different lines . But there is a huge amount of space between the texts which is unwanted , i am not able to reduce the space by any means .

 <button mat-stroked-button>New <br /> Comment</button>
 <button mat-stroked-button color="primary">Comments/<br />Disposition</button>

My Buttons look like –

Can anyone help me in how to reduce the space between the 2 lines ?

Thanks in Advance

Solution

you need "override" the line-heigth, e.g.

.mat-stroked-button{
  line-height:1.25rem;
}

If you only want to affect one button define a class like

.mat-stroked-button.custom{
  line-height:1.25rem;
}

And use

<button mat-stroked-button class="custom">..</button>

NOTE: I use only with mat-stroked-button, see the .css that is created with the differents buttons and extend the idea