[Vuejs]-How can I use my svg icons with q-btn-toggle

by

3👍

✅

The documentation says the following about specifying custom icons:

icon : String

Description

Icon of option button; Use this prop and/or ‘label’, but at least one is required

Examples
  • map
  • ion-add
  • img:https://cdn.quasar.dev/logo-v2/svg/logo.svg
  • img:path/to/some_image.png

The path to the icon image must be prepended with img:. Furthermore, the Quasar documentation discusses referencing files in the assets here and says:

Quasar provides the assets alias out of the box, so it is recommended that you use it like this: <img src="~assets/logo.png">. Notice ~ in front of ‘assets’.

Putting all of this together, your option definitions should probably look something like:

[
  {
    label: 'Calendar',
    value: 'calendar',
    slot: 'two',
    icon: 'img:~assets/svg/toggle/Table.svg'
  },
  . . .
]

Here is a working example showing a custom icon that references an image at a URL: https://codepen.io/euphemism/pen/PoQLqRe?editors=101

👤euphemism

Leave a comment