Google material icons are one of the reliable source to use it free in your website or projects. it is available thorough CDN or one can download to use it easily on their official site , link is given below :
Add in your online project or website through CDN path :
<link
href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet"/>
How to Add HTML :
Add the icon directly in HTML page in below given format, Normal solid
view
use material-icons class ,
if you want add outlined view use material-icons-outlined class
Example are given below :
<i class = "material-icons myclassname"> place</i>
<i class = "material-icons-outlined myclassname"> place</i>
Must include your specific class , myclassname is the specific class given in above example , which can help to decorate the
icon through css
Decorate the icon through CSS :
i.myclassname {
font size: 20px;
color:#A500000;
margin-left:-21px;
padding-right:4px;
padding-top:-10px;
margin-top:0px;
position: absolute;
}
Add icon using content unicode in CSS :
.myclassname ::before {
font-family: 'Material Icons'; content: "\e876"; margin-left:-21px; padding-right:4px; padding-top:-10px; margin-top:0px; position:absolute;
}
.myclassname ::before {
font-family: 'Material Icons';
content: "\e876";
margin-left:-21px;
padding-right:4px;
padding-top:-10px;
margin-top:0px;
position:absolute;
}
Useful material icons for menu design:
expand_more
<span class="material-icons-outlined"> expand_more </span>
Font-family:'material-icons-outlined';
CSS unicode-
content: #e5cf;
___________________
expand_less
<span class="material-icons-outlined"> expand_less </span>
Font-family:'material-icons-outlined';
CSS unicode-
content: #e5ce;
____________________
chevron_right
<span class="material-icons-outlined"> chevron_right </span>
Font-family:'material-icons-outlined';
CSS unicode-
content: #e5cc;
______________________
chevron_left
<span class="material-icons-outlined"> chevron_left </span>
Font-family:'material-icons-outlined';
CSS unicode-
content: #e5cb;
__________________
Add
<span class="material-icons-outlined">add </span>
Font-family:'material-icons-outlined';
CSS unicode-
content: #e145;
___________________
Remove
<span class="material-icons-outlined">remove </span>
Font-family:'material-icons-outlined';
CSS unicode-
content: #e15b;
____________________
