title: Vuetify icon size
body: <p>recently I was working on an app using Vuetify and had trouble to change the Vuetify default colors. So I finally ended with this:</p>
  
  <p><a href="https://github.com/vuetifyjs/vuetify/issues/299" rel="noreferrer">https://github.com/vuetifyjs/vuetify/issues/299</a></p>
  
  <p>Which as its says, I added the following code:</p>
  
  <pre><code> &lt;style lang="stylus"&gt;
    @require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
    $theme := {
      primary: #009688
      accent: #FFC107
      secondary: #00796B
      info: #B2DFDB
      warning: $red.base
      error: $red.base
      success: $green.base
    }
    @require '../node_modules/vuetify/src/stylus/main.styl'
  &lt;/style&gt;
  </code></pre>
  
  <p>In <strong>App.vue</strong></p>
  
  <p>So when I tested changing colors in the app, it worked as expected, so far so good. Then I noticed that it changed the size of the icons, as pictured below:</p>
  
  <p><a href="https://i.stack.imgur.com/6JhZT.png" rel="noreferrer">Before</a></p>
  
  <p><a href="https://i.stack.imgur.com/Pra9z.png" rel="noreferrer">After</a></p>
  
  <p>So, my question is:</p>
  
  <p><strong>Is there a way to solve this problem by not using CSS? If so, how? Or if there's no way, then, how should I solve it using CSS?</strong></p>