I have downloaded some .svg files from ionicon but i am not able to use them using class name.
<my-icon>heart</my-icon>
<my-icon class="heart"></my-icon>
There are two ways to implement icons.
Import the css first & use correct class names for the icons, you can set colors later as you wish.
Import the css and write custom css for your custom class name
.heart::before {
content: "\f388";
display: inline-block;
font-family: "Ionicons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
color: green;
}
.heart-icon {
color: red;
}<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<span class="heart-icon ion-android-favorite"></span>
<br><br>
<span class="heart"></span>PS. Stack overflow snippet won't work, click on codepen link below to see changes
Codepen here
Ionicons reference for class names: https://ionic.io/ionicons/v2
Or if you still want to use custom downloaded icons you can try setting it in a psuedo element and can change its color using filter property.
.custom_icon::before {
content: url('https://svgsilh.com/svg/614515.svg');
max-height: 17px;
max-width: 13px;
transform: scale(0.009);
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
position: absolute;
transform-origin: left top;
}<span class="custom_icon"></span>First, you want to put not regular tags in html, like: < my-tag > This can be runned, but in some computers will not work. I'll show:
my-icon::before {
content: "\f004";
}
my-icon {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet"/>
<my-icon></my-icon>But because of that, you can use classes to detect the icons.
Then you can use some options, like:
.framework-icon {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.framework-icon::before {
content: "\f004";
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet"/>
<div>
svg tag: <br><svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="black" />
</svg>
</div>
<div>
frameworks like font-awesome: <div class="framework-icon"></div>
</div>1.you may need to convert the .svg to .ttf or .woff format to use like a class name. I found this website can accept svg files and gives .ttf or .woff files as output.
note: You can adjust styles of svg by this way easly.
Example: ```<div class='fa fa-icon'></div>```
2.you can create a class which will have that svg as a background to html <tag>
<style>
.svg{
background:url("image/path" )
}
</style>
<body>
<div class="svg"></div>
</body>
You can write your own properties for background class