.icon{
  width:22px; height:22px; display:inline-block;
  background: currentColor;                   /* rengi buradan alır */
  vertical-align:middle; flex-shrink:0;
  -webkit-mask: no-repeat center / contain;
          mask: no-repeat center / contain;
}

/* Home */
.i-home{
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M12 3.172 3 10v11h6v-7h6v7h6V10z'/>\
</svg>");
          mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M12 3.172 3 10v11h6v-7h6v7h6V10z'/>\
</svg>");
}

/* Search */
.i-search{
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='11' cy='11' r='7'/>\
<path d='M20 20l-4-4'/>\
</svg>");
          mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='11' cy='11' r='7'/>\
<path d='M20 20l-4-4'/>\
</svg>");
}

/* User */
.i-user{
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5.333 0-8 2.667-8 6v2h16v-2c0-3.333-2.667-6-8-6z'/>\
</svg>");
          mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5.333 0-8 2.667-8 6v2h16v-2c0-3.333-2.667-6-8-6z'/>\
</svg>");
}