将图标添加到 MDC 卡答案

【问题标题】：Add Icon to an MDC Card将图标添加到 MDC 卡
【发布时间】：2019-01-20 02:58:14
【问题描述】：

我需要在 MDC 卡的标题前添加一个图标，如图所示（标签 2）。但是，根据 MDC 设计，我不知道正确的 HTML。这是我目前为卡片准备的 HTML 代码：

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

有人可以指出要添加的正确 HTML 吗？ MDC 文档不是很清楚。

【问题讨论】：

标签： html material-design material-components material-components-web mdc-components

【解决方案1】：

根据Material Design card component documentation，卡片内容实际上没有任何“标准”布局。您可以通过各种不同的方式完成与图像中的布局类似的布局。请参阅下面的工作示例，该示例类似于您问题中的设计图片。

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

【讨论】：

它是如何拾取Android图标的？当我独立运行此代码时，它工作正常 - 图标被拾取。但是，当我将此代码放入我的 Web 框架（Scala Play）中时，它不会选择 android 图标。如果您可以让我知道此代码如何获取图标，我也许可以对其进行调试。谢谢
android 图标是Material Icons 集合的一部分。您可以在 html 的头部包含 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">，也可以自己托管字体。
它没有用。这与Play有关，我还没有弄清楚。最后，我将 SVG 用于我想要的图像并将其直接放入我的 HTML 中。
我对 Play 框架了解不多，但如果您自己托管图标字体，那么您可能需要确保正确定义字体资源的静态路由。