Add Icon to an MDC Card

Question

I need to add an icon before the title of an MDC card as shown in the diagram (label 2). However, I do not know the correct HTML for this according to the MDC design. This is HTML code I have so far for the card:

<div class="mdc-card demo-card undefined">
    <div class="demo-card__primary">
        <h1 class="demo-card__title mdc-typography--headline6">Some Title</h1>
        <div class="mdc-card__actions">
            <div class="mdc-card__action-buttons">
                <button class="mdc-button mdc-card__action mdc-card__action--button mdc-button--raised mdc-ripple-upgraded">
                    Button 1
                </button>
                <button class="mdc-button mdc-card__action mdc-card__action--button mdc-button--raised mdc-ripple-upgraded">
                    Button 2
                </button>
            </div>
        </div>
    </div>
</div>

Can somebody point me to the correct HTML to add? The MDC documentation is not very clear.

benvc · Accepted Answer · 2020-04-20T14:45:22.163

According to the Material Design card component documentation, there are not really any "standard" layouts for card content. You can accomplish a layout like the one in your image in a variety of different ways. See a working example below that is similar to the design image in your question.

.mdc-card {
  height: 350px;
  width: 350px;
}

.card-header {
  margin: 1.25rem 0;
  padding: 16px;
  display: flex;
  align-items: center;
}

.card-header h2,
.card-header h3 {
  margin: 0;
}

.card-icon {
  padding-right: 8px;
}

.mdc-card__media {
  background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.3) 20px), url(https://via.placeholder.com/100)
}

.card-body {
  padding: 16px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Material Card Example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>

  <div class="mdc-card">
    <div class="mdc-card__primary-action" tabindex="0">
      <div class="card-header">
        <div class="card-icon material-icons">android</div>
        <div class="card-title">
          <h2 class="mdc-typography--headline6">Title</h2>
          <h3 class="mdc-typography--subtitle2">Secondary text</h3>
        </div>
      </div>
      <div class="mdc-card__media mdc-card__media--square">
        <div class="mdc-card__media-content">Placeholder Image</div>
      </div>
    </div>
    <div class="card-body mdc-typography--body2">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="mdc-card__actions">
      <div class="mdc-card__action-buttons">
        <button class="mdc-button mdc-card__action mdc-card__action--button">
          <span class="mdc-button__label">Action 1</span>
        </button>
        <button class="mdc-button mdc-card__action mdc-card__action--button">
          <span class="mdc-button__label">Action 2</span>
        </button>
      </div>
      <div class="mdc-card__action-icons">
        <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>
        <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="More options">more_vert</button>
      </div>
    </div>
  </div>

</body>

</html>

How does it pick up the Android icon? When I run this code standalone it works fine - the icon is picked up. But when I put this code in my web framework (Scala Play) it doesn't pick up the android icon. If you can let me know how this code picks up the icon I might be able to debug it. Thanks — , Aug 14 '18 at 13:07
The android icon is part of the [Material Icons](https://material.io/tools/icons/?style=baseline) set. You can include `` in the head of your html or you can host the fonts yourself. — benvc, Aug 14 '18 at 14:08
It didn't work. It's something to do with Play which I haven't figured out yet. In the end I took the SVG for the image I wanted and put that directly in my HTML. — , Aug 14 '18 at 14:18
I don't know much about the Play framework but if you are hosting the icon font yourself, then you may need to ensure that static routes to your font assets are defined correctly. — benvc, Aug 14 '18 at 15:00

Add Icon to an MDC Card

1 Answers1