.icon {
    display: inline-block;
    width: 2em;
    height: 2em;
    background-color: currentColor;
    -webkit-mask: no-repeat center / 100%;
    mask: no-repeat center / 100%;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
}

.icon-inline {
    width: 1em;
    height: 1em;
}

.icon--maki--cross {
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="15" height="15" viewBox="0 0 15 15"%3E%3Cpath fill="currentColor" d="M3.64 2.27L7.5 6.13l3.84-3.84A.92.92 0 0 1 12 2a1 1 0 0 1 1 1a.9.9 0 0 1-.27.66L8.84 7.5l3.89 3.89A.9.9 0 0 1 13 12a1 1 0 0 1-1 1a.92.92 0 0 1-.69-.27L7.5 8.87l-3.85 3.85A.92.92 0 0 1 3 13a1 1 0 0 1-1-1a.9.9 0 0 1 .27-.66L6.16 7.5L2.27 3.61A.9.9 0 0 1 2 3a1 1 0 0 1 1-1c.24.003.47.1.64.27Z"%2F%3E%3C%2Fsvg%3E');
}

.icon--fontisto--list-1 {
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="28" height="24" viewBox="0 0 28 24"%3E%3Cpath fill="currentColor" d="M9.064 2.677h17.753l.037.001a1.332 1.332 0 1 0 0-2.664l-.039.001h.002H9.064a1.331 1.331 0 0 0-.002 2.662zm17.752 2.666H9.064a1.331 1.331 0 0 0-.002 2.662h17.754l.037.001a1.332 1.332 0 1 0 0-2.664l-.039.001zm0 5.326H9.064l-.037-.001a1.332 1.332 0 1 0 0 2.664l.039-.001h-.002h17.752l.037.001a1.332 1.332 0 1 0 0-2.664l-.039.001zm0 10.652H9.064a1.331 1.331 0 0 0-.002 2.662h17.754a1.331 1.331 0 0 0 .002-2.662zm0-5.327H9.064l-.037-.001a1.332 1.332 0 1 0 0 2.664l.039-.001h-.002h17.752l.037.001a1.332 1.332 0 1 0 0-2.664l-.039.001zM1.582 2.279v3.334a.648.648 0 0 0 .647.636l.041-.001h-.002l.032.001a.654.654 0 0 0 .654-.634V.627a.636.636 0 0 0-.636-.628h-.022h.001a.652.652 0 0 0-.537.286l-.001.002l-.006.009l-.579.82a.797.797 0 0 0-.209.504v.012c0 .347.273.63.616.646h.001zM.677 15.124h2.614a.67.67 0 0 0 .002-1.335H1.392v-.01c0-.2.457-.523.824-.781c.732-.515 1.639-1.157 1.639-2.27v-.016a1.837 1.837 0 0 0-1.906-1.836h.003A1.708 1.708 0 0 0 .13 10.535v.002a.661.661 0 0 0 .656.745h.009l.036.001a.666.666 0 0 0 .665-.642v-.001c0-.197.05-.418.443-.418l.038-.001c.281 0 .508.227.508.508v.017v-.001c0 .418-.549.818-1.079 1.2c-.655.473-1.399 1.008-1.399 1.836v.711a.664.664 0 0 0 .663.633h.008zm3.088 4.352a1.593 1.593 0 0 0-1.785-1.723l.008-.001a1.673 1.673 0 0 0-1.869 1.611v.002a.645.645 0 0 0 .64.722l.053-.002H.81a.641.641 0 0 0 .678-.64l-.001-.038v.002c0-.156.055-.335.487-.335c.314 0 .437.045.437.494s-.094.487-.465.487a.652.652 0 0 0 .003 1.302h.004c.49 0 .589.201.589.523v.138c0 .544-.209.647-.603.647c-.539 0-.582-.278-.582-.364v-.016a.634.634 0 0 0-.694-.631h.003a.627.627 0 0 0-.668.701v-.003a1.77 1.77 0 0 0 1.956 1.643l-.008.001A1.812 1.812 0 0 0 3.91 22.01l.001.008v-.138l.001-.067c0-.452-.179-.863-.469-1.165l.001.001c.204-.313.325-.697.325-1.109l-.001-.07v.003z"%2F%3E%3C%2Fsvg%3E');
}

.icon--line-md--edit-twotone {
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" fill-opacity="0" d="M20 7L17 4L15 6L18 9L20 7Z"%3E%3Canimate fill="freeze" attributeName="fill-opacity" begin="1.2s" dur="0.15s" values="0%3B0.3"%2F%3E%3C%2Fpath%3E%3Cg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Cpath stroke-dasharray="20" stroke-dashoffset="20" d="M3 21H21"%3E%3Canimate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="20%3B0"%2F%3E%3C%2Fpath%3E%3Cpath stroke-dasharray="44" stroke-dashoffset="44" d="M7 17V13L17 3L21 7L11 17H7"%3E%3Canimate fill="freeze" attributeName="stroke-dashoffset" begin="0.4s" dur="0.6s" values="44%3B0"%2F%3E%3C%2Fpath%3E%3Cpath stroke-dasharray="8" stroke-dashoffset="8" d="M14 6L18 10"%3E%3Canimate fill="freeze" attributeName="stroke-dashoffset" begin="1s" dur="0.2s" values="8%3B0"%2F%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

.icon--ph--copy-duotone {
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="256" height="256" viewBox="0 0 256 256"%3E%3Cg fill="currentColor"%3E%3Cpath d="M216 40v128h-48V88H88V40Z" opacity=".2"%2F%3E%3Cpath d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

.icon--mdi--import {
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="m14 12l-4-4v3H2v2h8v3m10 2V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v3h2V6h12v12H6v-3H4v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2Z"%2F%3E%3C%2Fsvg%3E');
}

.icon--mdi--user-plus {
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M15 14c-2.67 0-8 1.33-8 4v2h16v-2c0-2.67-5.33-4-8-4m-9-4V7H4v3H1v2h3v3h2v-3h3v-2m6 2a4 4 0 0 0 4-4a4 4 0 0 0-4-4a4 4 0 0 0-4 4a4 4 0 0 0 4 4Z"%2F%3E%3C%2Fsvg%3E')
}

.icon--mdi--show {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5'/%3E%3C/svg%3E");
  }

.icon--mdi--pencil {
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83l3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25Z"%2F%3E%3C%2Fsvg%3E')
}

.icon--mdi--pencil-box {
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-2.3 6.35c.22-.21.22-.56 0-.77L15.42 7.3a.532.532 0 0 0-.77 0l-1 1l2.05 2.05l1-1M7 14.94V17h2.06l6.06-6.06l-2.06-2.06L7 14.94Z"%2F%3E%3C%2Fsvg%3E')
}

.icon--clarity--users-solid {
    --svg: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="36" height="36" viewBox="0 0 36 36"%3E%3Cpath fill="currentColor" d="M12 16.14h-.87a8.67 8.67 0 0 0-6.43 2.52l-.24.28v8.28h4.08v-4.7l.55-.62l.25-.29a11 11 0 0 1 4.71-2.86A6.59 6.59 0 0 1 12 16.14Z" class="clr-i-solid clr-i-solid-path-1"%2F%3E%3Cpath fill="currentColor" d="M31.34 18.63a8.67 8.67 0 0 0-6.43-2.52a10.47 10.47 0 0 0-1.09.06a6.59 6.59 0 0 1-2 2.45a10.91 10.91 0 0 1 5 3l.25.28l.54.62v4.71h3.94v-8.32Z" class="clr-i-solid clr-i-solid-path-2"%2F%3E%3Cpath fill="currentColor" d="M11.1 14.19h.31a6.45 6.45 0 0 1 3.11-6.29a4.09 4.09 0 1 0-3.42 6.33Z" class="clr-i-solid clr-i-solid-path-3"%2F%3E%3Cpath fill="currentColor" d="M24.43 13.44a6.54 6.54 0 0 1 0 .69a4.09 4.09 0 0 0 .58.05h.19A4.09 4.09 0 1 0 21.47 8a6.53 6.53 0 0 1 2.96 5.44Z" class="clr-i-solid clr-i-solid-path-4"%2F%3E%3Ccircle cx="17.87" cy="13.45" r="4.47" fill="currentColor" class="clr-i-solid clr-i-solid-path-5"%2F%3E%3Cpath fill="currentColor" d="M18.11 20.3A9.69 9.69 0 0 0 11 23l-.25.28v6.33a1.57 1.57 0 0 0 1.6 1.54h11.49a1.57 1.57 0 0 0 1.6-1.54V23.3l-.24-.3a9.58 9.58 0 0 0-7.09-2.7Z" class="clr-i-solid clr-i-solid-path-6"%2F%3E%3Cpath fill="none" d="M0 0h36v36H0z"%2F%3E%3C%2Fsvg%3E')
}