Vue-material: How can we style the buttons / icons within the table?

[craigvantonder]

Based on the table example: Within cards with Pagination and Inline Edit

I am trying to change the colour of the magnifying glass / search icon within that table so what I can show an active state on the button when toggling the visibility of a search input.

<md-button class="md-icon-button" @click="toggleSearch()">
  <md-icon v-bind:class="{ 'md-accent': searchEnabled }">search</md-icon>
</md-button>

What I expect to happen is that the class md-accent will be applied to the icon when the boolean criteria is met.

The result however is that no class is applied when rendered. I asked a question on S.O about this but did not get any resolution so thought to create an issue.

Am I correct in thinking that this is a bug seeing as it works for buttons outside of the table component?

[marcosmoura]

I will take a look at this ASAP. Sorry about that. :(

[craigvantonder]

No problem, someone suggested that I try a different class with !important and I did but I noticed that the classes are not being applied to the icon when the component is rendered. It just disregards it completely.

By the way, thanks for the awesome set of components for Vue :-)

[marcosmoura]

Can you place your code on the Codepen of JSFiddle?

[craigvantonder]

Sure, here we go: http://codepen.io/craigvantonder/pen/xRXVKN

[marcosmoura]

I got it. It's a bug. There is a style on the md-card that is affecting the md-table-card. It's already fixed on the upcoming v0.4.0. The workaround, for now, is to add a custom class with the color of your theme. Like:

.highlight {
  color: #03a9f4 !important;
}

This is not good and shouldn't be deployed to production, but for now, you can move forward. After the release you can remove this class. Sorry about that.