<p-button> with no label shows an empty transparent <span> with style ui-button-text that covers other text

Question

I have the following code on my web:

<p-button (onClick)="deleteFile(attachment,user_agreement)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
<a href="{{attachment.filePath}}" target="_blank">{{attachment.originalFilename}} - {{attachment.fileSize/1024 | number:'1.1-2'}} KB - {{attachment.createTime | date:'short'}}</a>

the button has no text but a trash icon

The result on web shows like the following

However, when I click mouse on text "Contents.json", the button gets triggered.

I inspected the button, it shows there is a "span" generated that covers the text as the following screenshots show

The <span> has the class "ui-button-text" assigned. And ui-button-text has the following definition

body .ui-button .ui-button-text, body .ui-datepicker-buttonpane > button .ui-button-text {
    padding: 0;
    line-height: 2.25em;
    min-width: 100px;
    min-height: 2.25em;
    text-align: left;
}

I never define css style ui-button-text so I don't want to modify the content. How can I resolve this button label overlapping the following clickable content issue?

Thank you very much!

Answer 1

"ui-button-text" automatically added by library internally but we can over ride this overlapping issue via css.

You need to add one more custom class on

<p-button (onClick)="deleteFile(attachment,user_agreement)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger custom-class-for-override"></p-button>

For reference is have added "custom-class-for-override" in above code. on this class you can write your css fot button width and height.