change color of material icons

[MusicForMellons]

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?

[keithjeb]

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.

[MusicForMellons]

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>

[rstoenescu]

@MusicForMellons Have you tried playing with $item-primary-secondary-color, $item-content-label-color or $item-label-color theme variables?

[MusicForMellons]

Yeah, setting these and adding to class works. Via css setting color to .item > i.item-primary also works. My problem was more of a ‘not working hot-reload thingy’ it seems. Thanks.

[dlevin]

This post is deleted!