Use svg files using class names

Issue

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>

Solution

There are two ways to implement icons.

1. Import the css first & use correct class names for the icons, you can set colors later as you wish.

2. 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>

Answered By - Viira