This way we don’t need to generate the font file.

CSS:

.tab-icon-home {
display: inline-block;
mask: url('../img/tab/icon_home.svg') no-repeat center;
-webkit-mask: url('../img/tab/icon_home.svg') no-repeat center;
mask-size: 32px;
-webkit-mask-size: 32px;
background-color: #929292;
}

.tab-active i {
background-color: #03A9F4;
}

a.tab-active {
color: #03A9F4;
}

HTML:

<a class="tab-item" href="https://www.blogger.com/null" ui-sref-active="tab-active" ui-sref="home">
<i class="icon tab-icon-home"></i>
Home
</a>