Material Design Lite tabs with icons

Question

I'm using Material Design Lite tabs (as with the template shown at https://getmdl.io/templates/text-only/index.html). I would like the links to have an icon as with the Github and download link on the MDL site itself: https://getmdl.io

However, on the MDL site they are actually using a navigation bar, so I'm at the moment unsuccessful to repeat this look with the tabs.

nvcleemp nvcleemp · Accepted Answer · 2016-10-27T20:12:40

The answer is actually quite simple, although the alignment of the icon and the following text seems to be off a bit (icons is a bit too high). You just add a span with the correct classes:

<a href="#download" class="mdl-layout__tab">
    <span class="icon material-icons">get_app</span>
    <span>Download</span>
</a>

Material Design Lite tabs with icons

1 Answers