html - 如何使图标在 MDL 标题上向左移动？

Question

我尝试设置边距，填充以将后退箭头图标移动到标题的左侧但失败了。我该如何纠正？

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
 <header class="mdl-layout__header">
  <div class="mdl-layout__header-row">
      <!--back arrow-->
      <button class="mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);">
       <i class="material-icons">arrow_back</i>
      </button>

     <!--Title-->
     <span class="mdl-layout-title">Settings</span>
  </div>

 <!-- Tabs -->
 <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
  <a href="{{pathFor route='home'}}" class="mdl-layout__tab">Profile</a>
  <a href="{{pathFor route='settings'}}" class="mdl-layout__tab">Account</a>
</div>

Answer 1

我在使用后退按钮时遇到了同样的问题。文档中没有可视化演示，但阅读文档后我找到了正确的方法:只需在按钮上放置一个类 mdl-layout-icon。

<header class="mdl-layout__header">
  <button class="mdl-layout-icon mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);">
    <i class="material-icons">arrow_back</i>
  </button>    
  <div class="mdl-layout__header-row">
    <span class="mdl-layout-title">Some title</span>
    <div class="mdl-layout-spacer"></div>
  </div>
</header>