title: How to use picture element in angular Material cards
body: <p>How can I combine the picture element with the Angular Material card?</p>
  
  <p>In Angular Material cards <a href="https://material.angular.io/components/card/examples" rel="nofollow noreferrer">https://material.angular.io/components/card/examples</a> you can use <code>&lt;img mat-card-image src="../assets/img/shiba2.jpg" alt="Photo"&gt;</code></p>
  
  <p>(The <code>mat-card-image</code> directive makes the image take full width of the card.)</p>
  
  <p>But when I introduce the <code>picture</code> element with the <code>mat-card-image</code> directive on the picture and/or source elements it breaks the CSS and it seems the element is not supported in Angular-Material.</p>
  
  <p>This works but always shows the <code>img</code> element:</p>
  
  <pre><code>&lt;picture&gt;
      &lt;source srcset="../assets/img/shiba2.webp" type="image/webp"&gt;
      &lt;source srcset="../assets/img/shiba2.jpg" type="image/jpg"&gt;
      &lt;img mat-card-image src="../assets/img/shiba2.jpg" alt="Photo"&gt;
  &lt;/picture&gt;
  </code></pre>
  
  <p>I want to use the picture element in order to use webp images and fall back to jpg/png in unsupported browsers like Safari.</p>