@font-face {
    font-family: "MyIcons";
    src: url("https://cdn.jsdelivr.net/gh/Youssef3102/my-icons/fonts/MyIcons.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/gh/Youssef3102/my-icons/fonts/MyIcons.woff") format("woff"),
         url("https://cdn.jsdelivr.net/gh/Youssef3102/my-icons/fonts/MyIcons.ttf") format("truetype");
}

/* Base icon style: stroke version */
.mi::before {
  font-family: "MyIcons";
  font-size: 32px;
  color: transparent;           /* fill transparent for stroke */
  -webkit-text-stroke: 2px black; /* stroke color and width */
  display: inline-block;        /* ensures pseudo-element renders */
  font-style: normal !important;
}

/* Filled version */
.mi.mi-filled::before {
  /* -webkit-text-stroke: 0; remove stroke */
  color: black;            /* solid fill color */
}

/* Individual icons */
.mi-quran::before { content: "\E001"; }
.mi-gear::before  { content: "\E002"; }
.mi-home::before  { content: "\E003"; }
.mi-history::before  { content: "\E004"; }
.mi-logout::before  { content: "\E005"; }