Bootstrap MDC Icon alignment

gistfile1.txt

<mdc-toolbar
  [flexible]="isFlexible"
  [fixed]="isFixed"
  [waterfall]="isWaterfall"
  [fixedLastrow]="isFixedLastRow"
  (change)="handleToolbarChange($event);">
  <mdc-toolbar-row>
    <mdc-toolbar-section [alignStart]="true">
      <a href="#" mdc-toolbar-icon-menu material-icon>menu</a>
      <mdc-toolbar-title>App Title</mdc-toolbar-title>
    </mdc-toolbar-section>

    <mdc-toolbar-section [alignEnd]="true">
      <a href="#/toolbar-demo" mdc-toolbar-icon material-icon>file_download</a>
      <a href="#/toolbar-demo" mdc-toolbar-icon material-icon>print</a>
      <a href="#/toolbar-demo" mdc-toolbar-icon material-icon>bookmark</a>
    </mdc-toolbar-section>
  </mdc-toolbar-row>
</mdc-toolbar>



<mdc-permanent-drawer>
  <mdc-permanent-drawer-content>
      <mdc-list-group>
        <mdc-list>
          <a mdc-list-item mdc-permanent-drawer-selected href="#/drawer-demo">
              <i material-icon mdc-list-item-start>home</i>Home
            </a>
          <a mdc-list-item href="#/drawer-demo">
              <i material-icon mdc-list-item-start>star</i>Star
            </a>
          <a mdc-list-item href="#/drawer-demo">
              <i material-icon mdc-list-item-start>send</i>Sent Mail
            </a>
          <a mdc-list-item href="#/drawer-demo">
              <i material-icon mdc-list-item-start>drafts</i>Drafts
            </a>
        </mdc-list>
        <mdc-list-divider></mdc-list-divider>
        <mdc-list>
          <a mdc-list-item href="#/drawer-demo">
            <i material-icon mdc-list-item-start href="#/drawer-demo">email</i>All Mail
          </a>
          <a mdc-list-item href="#/drawer-demo">
            <i material-icon mdc-list-item-start href="#/drawer-demo">delete</i>Trash
          </a>
          <a mdc-list-item href="#/drawer-demo">
            <i material-icon mdc-list-item-start>report</i>Spam
          </a>
        </mdc-list>
      </mdc-list-group>
  </mdc-permanent-drawer-content>
</mdc-permanent-drawer>