Material icons
Icons variants
Icon sizes
face
Default
face
Size 18px
face
Size 24px (same as default)
face
Size 36px
face
Size 48px
<i class="material-icons">face</i>
<i class="material-icons fs-18">face</i>
<i class="material-icons fs-24">face</i>
<i class="material-icons fs-36">face</i>
<i class="material-icons fs-48">face</i>
Icon colors
face
Default
face
Dark (same as default)
face
Secondary
face
Disabled
face
Light
face
Primary
face
Accent
<i class="material-icons">face</i>
<i class="material-icons text-dark">face</i>
<i class="material-icons text-seondary">face</i>
<i class="material-icons text-disabled">face</i>
<i class="material-icons text-light">face</i>
<i class="material-icons text-primary">face</i>
<i class="material-icons text-accent">face</i>
Icons in text
Icon in paragraph
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt face ut labore et dolore magna aliqua.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />
tempor incididunt <i class="material-icons">face</i> ut labore et dolore magna aliqua.</p>
Icon in list
- Lorem ipsum
- face Dolor sit amet
- Consectetur
- Adipisicing elit
<ul>
<li>Lorem ipsum</li>
<li><i class="material-icons">face</i> Dolor sit amet</li>
<li>Consectetur</li>
<li>Adipisicing elit</li>
</ul>
Icon in text link
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<p>Lorem ipsum <a href="#" class="icon-left" data-icon="face">dolor</a> sit amet, consectetur adipisicing elit, sed do eiusmod<br />
tempor incididunt ut <a href="#" class="icon-right" data-icon="face">labore</a> et dolore magna aliqua.</p>
Paragraph icon
Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<p class="icon-left" data-icon="face">Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod<br />
tempor incididunt ut labore et dolore magna aliqua.</p>
Icons in buttons
Icon on the left
Icon on the right
Icon on the left (alternative way)
Icon on the right (alternative way)
Floating action button (alternative way)
<a class="btn btn-raised btn-colored icon-left" data-icon="face" href="#">Button</a>
<a class="btn btn-raised btn-colored icon-right" data-icon="face" href="#">Button</a>
<a class="fab fab-colored icon-right" data-icon="face" href="#"></a>
<!-- alternative way -->
<a class="btn btn-raised btn-colored" href="#"><i class="material-icons mr-8">face</i>Button</a>
<a class="btn btn-raised btn-colored" href="#">Button<i class="material-icons ml-8">face</i></a>
<a class="fab fab-colored" href="#"><i class="material-icons">face</i></a>
Icons in menus
Sidebar and Drawer menus
No preview.
<ul class="menu">
<li><a class="icon-left" data-icon="face" href="#">Item 1</a></li>
<li><a class="icon-left" data-icon="face" href="#">Item 2</a></li>
<li><a class="icon-left" data-icon="face" href="#">Item 3</a></li>
</ul>
Dropdown menu
<div class="menu-dropdown-toggle" data-target="dd-menu-1">
<a class="btn" href="#">Dropdown</a>
</div>
<ul class="menu menu-dropdown" id="dd-menu-1">
<li><a class="icon-left" data-icon="face" href="#">Item 1</a></li>
<li><a class="icon-left" data-icon="face" href="#">Item 2</a></li>
<li><a class="icon-left" data-icon="face" href="#">Item 3</a></li>
</ul>
Icons in regions
Navbar
No preview.
<div class="navbar-item">
<a href="#"><i class="material-icons navbar-icon">info</i></a>
</div>
Footer
No preview.
<div class="footer-item">
<div class="footer-icons">
<a href="#" class="material-icons">face</a>
<a href="#" class="material-icons">face</a>
<a href="#" class="material-icons">face</a>
</div>
</div>
Services icons
Icons variants
Icon colors
Default
Dark (same as default)
Secondary
Disabled
Light
Primary
Accent
<i class="services-icons" data-icon="dribbble"></i>
<i class="services-icons icon-dark" data-icon="dribbble"></i>
<i class="services-icons icon-secondary" data-icon="dribbble"></i>
<i class="services-icons icon-disabled" data-icon="dribbble"></i>
<i class="services-icons icon-light" data-icon="dribbble"></i>
<i class="services-icons icon-primary" data-icon="dribbble"></i>
<i class="services-icons icon-accent" data-icon="dribbble"></i>
Icons in text
Icon in paragraph
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />
tempor incididunt <i class="services-icons" data-icon="dribbble"></i> ut labore et dolore magna aliqua.</p>
Icon in list
- Lorem ipsum
- Dolor sit amet
- Consectetur
- Adipisicing elit
<ul>
<li>Lorem ipsum</li>
<li><i class="services-icons" data-icon="dribbble"></i> Dolor sit amet</li>
<li>Consectetur</li>
<li>Adipisicing elit</li>
</ul>
Icon in text link
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<p>Lorem ipsum <a href="#" class="services-icon-left" data-icon="dribbble">dolor</a> sit amet, consectetur adipisicing elit, sed do eiusmod<br />
tempor incididunt ut <a href="#" class="services-icon-right" data-icon="dribbble">labore</a> et dolore magna aliqua.</p>
Paragraph icon
<p class="services-icon-left" data-icon="dribbble">Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod<br />
tempor incididunt ut labore et dolore magna aliqua.</p>
Icons in buttons
Icon on the left
Icon on the right
Icon on the left (alternative way)
Icon on the right (alternative way)
<a class="btn btn-raised btn-colored services-icon-left" data-icon="dribbble" href="#">Button</a>
<a class="btn btn-raised btn-colored services-icon-right" data-icon="dribbble" href="#">Button</a>
<a class="fab fab-colored services-icon-right" data-icon="dribbble" href="#"></a>
<!-- alternative way -->
<a class="btn btn-raised btn-colored" href="#"><i class="services-icons mr-8" data-icon="dribbble"></i>Button</a>
<a class="btn btn-raised btn-colored" href="#">Button<i class="services-icons ml-8" data-icon="dribbble"></i></a>
<a class="fab fab-colored" href="#"><i class="services-icons" data-icon="dribbble"></i></a>
Icons in menus
Sidebar and Drawer menus
No preview.
<ul class="menu">
<li><a class="services-icon-left" data-icon="dribbble" href="#">Item 1</a></li>
<li><a class="services-icon-left" data-icon="dribbble" href="#">Item 2</a></li>
<li><a class="services-icon-left" data-icon="dribbble" href="#">Item 3</a></li>
</ul>
Dropdown menu
<div class="menu-dropdown-toggle" data-target="dd-menu-2">
<a class="btn" href="#">Dropdown</a>
</div>
<ul class="menu menu-dropdown" id="dd-menu-2">
<li><a class="services-icon-left" data-icon="dribbble" href="#">Item 1</a></li>
<li><a class="services-icon-left" data-icon="dribbble" href="#">Item 2</a></li>
<li><a class="services-icon-left" data-icon="dribbble" href="#">Item 3</a></li>
</ul>
Icons in blocks
Navbar
No preview.
<div class="navbar-item">
<a href="#"><i class="services-icons icon-light navbar-icon" data-icon="dribbble"></i></a>
</div>
Footer
No preview.
<div class="footer-item">
<div class="footer-icons">
<a href="#" class="services-icons" data-icon="dribbble"></a>
<a href="#" class="services-icons" data-icon="dribbble"></a>
<a href="#" class="services-icons" data-icon="dribbble"></a>
</div>
</div>
Filetypes icons
Icons variants
Icon colors
Default
Colored
Dark (same as default)
Secondary
Disabled
Light
Primary
Accent
<i class="filetypes-icons" data-icon="archive"></i>
<i class="filetypes-icons icon-colored" data-icon="archive"></i>
<i class="filetypes-icons icon-dark" data-icon="archive"></i>
<i class="filetypes-icons icon-secondary" data-icon="archive"></i>
<i class="filetypes-icons icon-disabled" data-icon="archive"></i>
<i class="filetypes-icons icon-light" data-icon="archive"></i>
<i class="filetypes-icons icon-primary" data-icon="archive"></i>
<i class="filetypes-icons icon-accent" data-icon="archive"></i>
Icons in text
Icon in paragraph
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />
tempor incididunt <i class="filetypes-icons" data-icon="archive"></i> ut labore et dolore magna aliqua.</p>
Icon in list
- Lorem ipsum
- Dolor sit amet
- Consectetur
- Adipisicing elit
<ul>
<li>Lorem ipsum</li>
<li><i class="filetypes-icons" data-icon="archive"></i> Dolor sit amet</li>
<li>Consectetur</li>
<li>Adipisicing elit</li>
</ul>
Icon in text link
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<p>Lorem ipsum <a href="#" class="filetypes-icon-left" data-icon="archive">dolor</a> sit amet, consectetur adipisicing elit, sed do eiusmod<br />
tempor incididunt ut <a href="#" class="filetypes-icon-right" data-icon="archive">labore</a> et dolore magna aliqua.</p>
Paragraph icon
<p class="filetypes-icon-left" data-icon="archive">Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod<br />
tempor incididunt ut labore et dolore magna aliqua.</p>
Icons in buttons
Icon on the left
Icon on the right
Icon on the left (alternative way)
Icon on the right (alternative way)
<a class="btn btn-raised btn-colored filetypes-icon-left" data-icon="archive" href="#">Button</a>
<a class="btn btn-raised btn-colored filetypes-icon-right" data-icon="archive" href="#">Button</a>
<a class="fab fab-colored filetypes-icon-right" data-icon="archive" href="#"></a>
<!-- alternative way -->
<a class="btn btn-raised btn-colored" href="#"><i class="filetypes-icons mr-8" data-icon="archive"></i>Button</a>
<a class="btn btn-raised btn-colored" href="#">Button<i class="filetypes-icons ml-8" data-icon="archive"></i></a>
<a class="fab fab-colored" href="#"><i class="filetypes-icons" data-icon="archive"></i></a>
Icons in menus
Sidebar and Drawer menus
No preview.
<ul class="menu">
<li><a class="filetypes-icon-left" data-icon="archive" href="#">Item 1</a></li>
<li><a class="filetypes-icon-left" data-icon="archive" href="#">Item 2</a></li>
<li><a class="filetypes-icon-left" data-icon="archive" href="#">Item 3</a></li>
</ul>
Dropdown menu
<div class="menu-dropdown-toggle" data-target="dd-menu-3">
<a class="btn" href="#">Dropdown</a>
</div>
<ul class="menu menu-dropdown" id="dd-menu-3">
<li><a class="filetypes-icon-left" data-icon="archive" href="#">Item 1</a></li>
<li><a class="filetypes-icon-left" data-icon="archive" href="#">Item 2</a></li>
<li><a class="filetypes-icon-left" data-icon="archive" href="#">Item 3</a></li>
</ul>
Icons in blocks
Navbar
No preview.
<div class="navbar-item">
<a href="#"><i class="filetypes-icons icon-light navbar-icon" data-icon="archive"></i></a>
</div>
Footer
No preview.
<div class="footer-item">
<div class="footer-icons">
<a href="#" class="filetypes-icons" data-icon="archive"></a>
<a href="#" class="filetypes-icons" data-icon="archive"></a>
<a href="#" class="filetypes-icons" data-icon="archive"></a>
</div>
</div>