title: How to change default styling of V-Data-Table footer?
body: <p>I'm running into a problem where I can't style the default footer in <code>v-data-table</code>. For some reason, the pagination buttons are appearing white when enabled, and light gray when they are disabled (pagination is disabled). I've already double checked to make sure its not a theme issue.</p>
  
  <p>My question is: how can I change the color of the default pagination icons in v-data-table? And more broadly, what is a way to find the class names of the vuetify elements so that I can avoid asking these types of questions in the future.</p>
  
  <p>Thanks. </p>
  
  <p>Here's a couple screen shots in case my description was clear enough.</p>
  
  <p><a href="https://i.stack.imgur.com/hIKFq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hIKFq.png" alt="When a button is enabled, it turns white."></a></p>
  
  <p><a href="https://i.stack.imgur.com/gbvrh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gbvrh.png" alt="enter image description here"></a></p>
  
  <p>Per Varun's request, here is one of my declarations for a <code>v-data-table</code>.</p>
  
  <pre><code>&lt;v-data-table
   :headers="headers"
   :items="tickets"
   item-key="ticketId"
   class="red--text"
  &gt;&lt;/v-data-table&gt;
  </code></pre>
  
  <p>Result:</p>
  
  <p><a href="https://i.stack.imgur.com/UTFUw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UTFUw.png" alt="Result of adding class=&quot;red--text&quot; as a line in the v-data-table declaration."></a></p>
  
  <p>The recommendation of using the text-coloring class didn't work as it just turn all of the text in the table to red, but didn't change the icons. Is there any way to edit the CSS of the icons directly?</p>