q-btn fails to render icon on-[left|right] css classes

[cmpscabral]

When including an icon inside q-btn, there is no space between the text and the icon (both icon and icon-right), because the <i> element doesn’t have the on-left or on-right class.

I just tried with a fresh 1.9.13 local install and can reproduce the error.

But… I tested on codepen/jsfiddle and the classes are rendered correctly.

Has anyone have an idea why?

Thanks!

[s.molinari]

Let’s see your code.

Scott

[cmpscabral]

@s-molinari Thank you for replying. I included the relevant parts, hope this helps

quasar create test

> Project name (internal usage for dev) test
> Project product name (must start with letter if building mobile apps) Quasar App
> Project description A Quasar Framework app
> Author
> Pick your favorite CSS preprocessor: (can be changed later) SCSS
> Pick a Quasar components & directives import strategy: (can be changed later) Auto import
> Check the features needed for your project: ESLint, Vuex, Axios, Vue-i18n
> Pick an ESLint preset: Standard
> Cordova/Capacitor id (disregard if not building mobile apps) org.cordova.quasar.app
> Should we run `npm install` for you after the project has been created? (recommended) yarn

quasar info

Operating System - Darwin(15.6.0) - darwin/x64
NodeJs - 12.16.1

Global packages
  NPM - 6.13.4
  yarn - 1.22.4
  @quasar/cli - 1.0.5
  cordova - Not installed

Important local packages
  quasar - 1.9.13 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 1.6.1 -- Quasar Framework local CLI
  @quasar/extras - 1.6.1 -- Quasar Framework fonts, icons and animations
  vue - 2.6.11 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.1.6 -- Official router for Vue.js 2
  vuex - 3.1.3 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed
  @babel/core - 7.9.0 -- Babel compiler core.
  webpack - 4.42.1 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.10.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.7.1 -- Script for registering service worker, with hooks

Quasar App Extensions
  *None installed*

Networking
  Host - ****
  en0 - ****

file Index.vue inside /src/pages

<template>
  <div class="q-pa-md">
    <q-btn icon="mail">test</q-btn>
  </div>
</template>

<script>
export default {
  name: 'PageIndex'
}
</script>

rendered html

(...)
<button tabindex="0" type="button" role="button" class="q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle q-btn--actionable q-focusable q-hoverable q-btn--wrap q-btn--active">
  <div tabindex="-1" class="q-focus-helper"></div>
  <div class="q-btn__wrapper col row q-anchor--skip">
    <div class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
      <i aria-hidden="true" role="img" class="material-icons q-icon notranslate">mail</i>
      test
    </div>
  </div>
</button>
(...)

[s.molinari]

All you had to do was make a codepen with the button code you have.

Use the label prop. Then things are spaced as you expect.

https://codepen.io/smolinari/pen/eYNqQjv?editors=1010

Scott

[cmpscabral]

@s-molinari sorry for the trouble and thank you!!