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;
}
303
test
.myclassname ::before {
font-family: 'Material Icons';
content: "\e876";
margin-left:-21px;
padding-right:4px;
padding-top:-10px;
margin-top:0px;
position:absolute;
}
