AngularJS Material design - md-colors on button hover

Question

Angular Material is awesome for creating colour-themed sites. As well is the usual palettes, you can create dynamic themes without SCSS, using directives like...

Answer 1

In case anyone is desperate to use md-colors as a hover state, its not possible according to the docs. But I created a work-around by setting the background color with md-colors, and hiding it behind another element. The hover state then makes the top layer transparent, so it appears to be a dynamically set hover state!

You can see an example here:

https://codepen.io/anon/pen/oGqPeE

the html layout looks like this :

<ul ng-if="link" md-theme="myTheme">
<li ng-repeat="linkObj in link" md-colors="{background:'primary'}">
  <a ng-href="{{linkObj.link_url}}" target="_blank" md-colors="{background:'accent'}">          <span ng-bind="linkObj.link_title" md-colors="{color:'accent'}"></span>
  </a>
</li>
</ul>