Button iconPos not working

UI Components for Vue
Post Reply
ricombnation
Posts: 24
Joined: 11 Jan 2022, 10:54

13 Jan 2022, 20:07

Im only getting started with PrimeVue - so be nice ;-)

I'm trying to change the icon position of a Button to the right. So like this:

Code: Select all

<Button label="Add" icon="pi pi-plus" iconPos="right" class="p-button p-button-success" />
However, I get this:

Image

Also - for round buttons, the icon is not aligned properly. There is a "non breakable space" from the label:

Code: Select all

<Button icon="pi pi-plus" class="p-button-rounded p-button-success" />
Image

... what am I doing wrong?

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

14 Jan 2022, 13:53

Did you import the PrimeVue ?

Code: Select all

import 'primevue/resources/primevue.min.css'

ricombnation
Posts: 24
Joined: 11 Jan 2022, 10:54

14 Jan 2022, 15:31

Nice thanks - now it is working.

What is the suggested approach to import all the css - in the html oder js.

At the moment I have ...

Code: Select all

import 'primeflex/primeflex.css'
import 'primeicons/primeicons.css'
import 'primevue/resources/primevue.min.css'
in my app.js file an the in the html template ...

Code: Select all

<!-- from app.js -->
<link href="/js/app.css" rel="stylesheet">

<!--  theme -->
<link href="/css/theme.css" rel="stylesheet">

<!-- custom styles -->
<link href="/css/app.css'" rel="stylesheet">
This feels rather messy ...

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests