Using custom icons in Quasar components

[eleina]

Hello,

I was wondering if it is possible to use custom icons instead of material icons, the same way as they are used now. For example:

<q-drawer-link icon='my_icon'>Some drawer link</q-drawer-link>

I saw a topic that was tackling this same issue: http://forum.quasar-framework.org/topic/320/use-icons-outside-the-material-io/6, where someone suggests a plugin for this.
But it would be more nice if this would be possible without a plugin, maybe an idea for future releases?

Thanks in advance!

[s.molinari]

Good news! Version 0.14 will have more icons.

The docs are still rough, but it should give you an idea of what is coming.

https://github.com/quasarframework/quasar-framework.org/blob/dev/source/components/icons.md

Scott

[eleina]

@s.molinari Thanks for your reply! It’s really awesome that other icons will be implemented unfortunately the client wants to use some of its own icons… Found a way with CSS to put the icon there, but it’s a bit ugly

[packy]

@eleina now that Quasar is going to use fontawsome icon you can change a standard icon like so with CSS/Sass/Stylus (not sure if thats what you were referring to in your post about ‘Found a way with CSS to put the icon there, but it’s a bit ugly’):

.fa-facebook:before{
      content:url("path/to/your/img.svg");
}

[eleina]

@packy Thanks for your reply, I didn’t think about that being a possibility!

[mesqueeb]

@eleina A proposal is currently in progress to add the functionality for custom icons:
https://github.com/quasarframework/quasar/issues/2494

Also, in that thread is explained how to create your own icon font, though it be a bit cumbersome…

[eleina]

@mesqueeb One year later haha, but the proposal seems nice!

[Hawkeye64]

I am using the :before css to do the trick:

.fa-ptz16:before {
  content: url('~assets/ptz16x16-L.png');
}
.fa-ptz24:before {
  content: url('~assets/ptz24x24-L.png');
}
.fa-ptz32:before {
  content: url('~assets/ptz32x32-L.png');
}