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>
    

  • Admin

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



  • 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.



  • This post is deleted!

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.