Q-btn and icon styling

[peihaochan]

Hi there!

I currently have a problem and do not know how to go about solving it.

I am looking to have a Full width Quasar button, with text to the left and icon to the far right of the Button. However the icon is only to the right side of the text and not sure how to get it to the far right of the button

My code

    <q-card-section class="text-h6">
        <q-btn flat align="left" class="full-width" icon-right="fas fa-sign-out-alt icon"> {{ $t("common.logout") }}
        </q-btn>
    </q-card-section>
  
    <q-separator inset size="2px"/>

How it currently looks;

And I want it to look more like this;

Is there any possible way with the Quasar framework?

Thanks

[rstoenescu]

The correct syntax is fas fa-sign-out-alt without the extra "icon". Here's the naming convention for all "icon" props (both links have same information):

• Qv1: https://quasar.dev/vue-components/icon#naming-convention
• Qv2: https://next.quasar.dev/vue-components/icon#naming-convention

Also make sure that you have the latest @quasar/extras installed.

Also, for best results when using icon props on a QBtn it's recommended to also use the label prop.

<q-btn flat align="left" class="full-width" icon-right="fas fa-sign-out-alt" :label="$t("common.logout")" />

[peihaochan]

Hi there, thanks for your reply.

I am not sure if there is a misunderstanding. The problem is not that my icon isn't showing. It is that I want it to be to the far right of the button, rather than right next to the text. For example I have tried to float:right for the icon but this does not work

[ontwikkelfabriek]

@peihaochan

q-btn uses flexbox internally to align it's content.

See this codepen:
https://codepen.io/ontwikkelfabriek/pen/xxqJyaE

[peihaochan]

@ontwikkelfabriek Thank you very much for showing me. I am not sure why this is not working still, maybe because I have placed it under a q-card. I will figure it out. Thanks once again