how to use own material design icons with materializecss?

26.1k views Asked by At

I need to know how to add own mdi icons in custom classes. the provided mdi classes provided don't meet my expectations.

How can i add those and use them like the default one

<i class="mdi-image-facebook"></i>
<i class="mdi-image-linkedin"></i>

Thanks in advance

2

There are 2 answers

3
Hassam Abdelillah On BEST ANSWER

Well, the is an alternative solution provided by this website. It's include preety much a good number of icons such as social buttons.

http://materialdesignicons.com/getting-started

You just have to add this css link to get the icons and add them as classes

<link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" />

and

<i class="mdi mdi-facebook-box"></i>  <!-- facebook box -->
2
Karl Patrick Espiritu On

Just include this stylesheet:

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

you can now use materializecss' icon tags. sample below :)

<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>

for more info visit: http://materializecss.com/icons.html