为什么 MDL 抽屉（导航）图标是一个正方形？字体不见了？

Question

我开始研究一个新的 Rails 4 项目来学习一些 MDL。现在我正面临这个问题（见图）。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">RubyStore</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">RubyStore</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">

  </main>
</div>

正如您在左侧看到的那样，我看到的不是抽屉图标，而是这个奇怪的小方块（为简单起见，我们称它为方块...）。奇怪的是，正如您在开发人员工具中看到的那样，这个正方形实际上就在那里。

<i class="material-icons"></i>

这里。看？可能是什么原因？我正在使用最新的 MDL（已下载）和 MDL 自定义（已下载）。 Ruby 2.3.0，Rails 4.2.5 和 ERB 作为我的模板。

我将两个文件（.css 和 .js）都添加到了 /app/assets/ 和相应的文件夹中。风格和行为都有效。我可以点击正方形和抽屉，滑出非常好。

编辑：好的。我检查了实际的 MDL 示例，它也有 <i class="material-icons"></i> 代码。所以广场应该在那里。我在 <head> 中的链接如下所示：

<head>
  <title>Store</title>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>

Answer 1

是的，字体丢失了。我错误地认为它内置在 MDL 框架的 .css 文件中。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

如 MDL 网站上的入门指南所述，此行是必需的。

为什么 MDL 抽屉（导航）图标是一个正方形？字体不见了？

Why MDL drawer (navigation) icon is a square? Font missing?

html

css

ruby

ruby-on-rails

material-design-lite