Button with empty label and text shows "ui-button"

[Emdee89]

**I'm submitting a bug report.

Plunkr Case (Bug Reports)
http://plnkr.co/edit/Vtp8OTakHAekaZOc6kUl?p=preview

Current behavior
I have a button with no label and no further content (only want to show its icon):
<button pButton id="menuButtonWeights" type="button" label="" icon="fa-balance-scale" class="ui-button-secondary"></button>
The button shows the text "ui-button" right to the icon.

Expected behavior
Only the icon should be visible, thus the text "ui-button" should not occur.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?
I only need a button with an icon and w/o text.

Please tell us about your environment:
PrimeNG 1.1.1, Angular 2.4.0

• Angular version: 2.0.X
  2.4.0

• PrimeNG version: 2.0.X
  PrimeNG 1.1.1

All browsers

[Mrtcndkn]

Hi,

It's the default label value of p-button.If you describe a label="" like this it will show default value.If you dont want anything to write just delete label property.

[rafaelcoutinho]

Think it's related to this issue. I want to use Material icons (other than font-awesome ones). If I create a tag like this:
<button pButton type="button" ><i class="material-icons">accessible</i> MyBtn</button>

It is displaying the ui-button text

[Mrtcndkn]

You should do that via css you can take look at ultima-ng

http://www.primefaces.org/ultima-ng/#/sample

[JuanELo-O]

Hi!,

I have a similar issue when I try to interpolate a label value, in older releases I don't have this problem.

This is my code:

<button type="button"
                pButton
                icon="fa-close"
                label="{{'no' | translate}}"
                class="secondary"
                (click)="confDialog.reject();"></button>

And this is my button:

Only if I put the label directly it works.

[nguyenjk]

I have no label but it is still showing ui-button as a text.

angular: 2.4.4
primeng: 2.0.1

[Kappyh]

If you are using angular.cli try this:
(Sorry for bad english)

In angular-cli.json file insert a style.css in this order

"styles":[
"../node_modules/primeng/resources/primeng.min.css",
        "./app/resources/css/styles.css"]

After this, recompile the project.

Style css file insert this:

.ui-button-text-only .ui-button-text{
    display: none !important;
}

Button config in html:

<button pButton 
            [disabled]="!(usuario.login.length > 0 && usuario.password.length > 0)"
            class="btn btn-primary"
            icon="fa-sign-in"
            type="submit">
            <i class="fa fa-fw fa-sign-in"> <!-- my icon -->
            </i>Entrar</button>

Worked for me, I hope this can help someone.

[sabithpocker]

Label is empty when using async pipe also with an Observable