Search code examples
htmlmaterial-designmaterial-componentsmaterial-components-webmdc-components

Add Icon to an MDC Card

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>

MDC CARD

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

Solution

  • 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>