nesting md-grid-tile into md-button not working (Angular Material)

Question

I have made a md-grid-list with md-grid-tiles, and I want to make each one a link. I tried wrapping each tile in a md-button but this makes the element disappear.

It doesn't have to be an md-button, it could be a simple anchor tag, but I can't seem to resolve this either way.

Any help would be appreciated.

My code:

   <md-grid-list>

      <md-button>
         <md-grid-tile>
            <img class="crest" src="img/afc-bournemouth.png">
            <md-grid-tile-footer layout-align="center center">Bournemouth</md-grid-tile-footer>
        </md-grid-tile>
     </md-button>

   </md-grid-list>

Answer 1

Why not doing this:

   <md-grid-list>
    <a class="md-grid-tile" href="http://google.com" target="_blank">
        <img class="crest" src="img/afc-bournemouth.png" />
        <md-grid-tile-footer layout-align="enter center">Bournemouth</md-grid-tile-footer>
    </a>
</md-grid-list>