change color of material icons
When using a drawer I want to change the color of the material icons. I checked but the color of icons is not part of the customizing variables list (I do find icon size etc). I tried setting it with CSS but was not succesful. Any idea?
How are you styling the CSS for them? I think Quasar displays them using the font, so just setting color: rgba(0,0,0,1) in the css should get you white for example.
Well I tried couple of things, but e.g. something like:
<!-- Left side Drawer --> <q-drawer swipe-only ref="drawerLeft"> <div class="toolbar" style="background-color: #666c63"> <q-toolbar-title :padding="1">Brandname</q-toolbar-title> </div> <div class="list no-border platform-delimiter white inverted"> <hr> <q-drawer-link id="testcolor" icon="view_quilt" to="/showcase/layout/about" style="color: rgba(0,0,0,1)">About Layout</q-drawer-link> <div class="list-label">Layout Components</div> <q-drawer-link icon="edit" to="/account">Edit</q-drawer-link> <q-drawer-link icon="tab" to="/showcase/layout/tabs">Tabs</q-drawer-link> <q-drawer-link icon="compare_arrows" to="/showcase/layout/drawer">Layout Drawer</q-drawer-link> </div> </q-drawer>
Does not work (for the ‘About Layout’ icon). Also not when I add style:
<style lang='stylus'> #testcolor color white !important </style>
@MusicForMellons Have you tried playing with
Yeah, setting these and adding to class works. Via css setting color to
.item > i.item-primaryalso works. My problem was more of a ‘not working hot-reload thingy’ it seems. Thanks.
This post is deleted!