title: How do you put an image inside of an Angular2 Material fab button?
body: <p>I want to put an image inside of a fab button in Angular2 Material. 
  The look is the look if you are logged in on Google, or in Gmail.</p>
  
  <p>Angular2 Material docs don't have anything yet on this.</p>
  
  <p>For example, see this image: <a href="http://www.mattpaulson.com/wp-content/uploads/2014/03/gmail-zero.png" rel="noreferrer">http://www.mattpaulson.com/wp-content/uploads/2014/03/gmail-zero.png</a></p>
  
  <p>Code I've been playing with (that doesn't work) is: </p>
  
  <pre><code>    &lt;button md-fab 
          type="button"&gt;
          &lt;img md-fab-image [src]="userInfo.photoUrl"&gt;
          &lt;div class="md-ripple-container"&gt;&lt;/div&gt;
      &lt;/button&gt;
  
      &lt;button md-fab 
          type="button"&gt;
          &lt;img md-fab-image [src]="userInfo.photoUrl"&gt;
      &lt;/button&gt;
  
      &lt;button md-fab md-fab-image
          type="button"&gt;
          &lt;img md-fab-image [src]="userInfo.photoUrl"&gt;
      &lt;/button&gt;
  
      &lt;button md-icon-button
          type="button"&gt;
          &lt;img [src]="userInfo.photoUrl"&gt;
      &lt;/button&gt;
  
      &lt;button md-icon-button
          md-fab-image
          type="button"&gt;
          &lt;img  [src]="userInfo.photoUrl"&gt;
      &lt;/button&gt;
  
      &lt;button md-icon-button md-fab-image
          type="button"&gt;
          &lt;img md-fab-image [src]="userInfo.photoUrl"&gt;
      &lt;/button&gt;
  
      &lt;button md-icon-button md-fab-image
          type="button"&gt;
          &lt;img md-fab-image [src]="userInfo.photoUrl"&gt;
      &lt;/button&gt;
  </code></pre>
  
  <h2>Non-ideal hack</h2>
  
  <pre><code>    &lt;button md-fab md-button
          style="overflow:hidden;top:1rem;"
          type="button"&gt;
          &lt;img [src]="userInfo.photoUrl" style="max-width:100%"&gt;
      &lt;/button&gt;
  </code></pre>