Добавить свои иконки в каталог

Очень хочется при создании меню добавить свои иконки, но не через class, а через каталог, где вкладки regular, solid. Создаю в папке icon свой файл, но в меню не появляется новая вкладка. в solid добавляю новую иконку, не определяет . 

Думаю этот вопрос актуален будет для всех, напишите подробно где какой путь добавить что бы могли определятся любые иконки и цветные и чб. 

Итак.

Открываем папку templates/дочерний_или_modern/images/icons/ В нем уже лежат другие файлы иконок. Копируем файл, например, в my.svg и очищаем, оставив только

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
 
</svg>

Файл иконок готов. Теперь в него надо добавить символы, чтобы их можно было выводить на сайте.

Добавьте в пустое место следующий код

<symbol id="top-phone" viewBox="0 0 13 14">
        <path d="M0 4.63884V1.02773C0 0.628886 0.323353 0.305511 0.722222 0.305511H4.33333C4.7322 0.305511 5.05556 0.628886 5.05556 1.02773V3.91662C5.05556 4.31547 4.7322 4.63884 4.33333 4.63884H2.88889C2.88889 7.82977 5.47569 10.4166 8.66667 10.4166V8.97218C8.66667 8.57337 8.99001 8.24996 9.38889 8.24996H12.2778C12.6767 8.24996 13 8.57337 13 8.97218V12.5833C13 12.9821 12.6767 13.3055 12.2778 13.3055H8.66667C3.8802 13.3055 0 9.4253 0 4.63884Z" fill="#495057"/>
</symbol>

Сохраните файл. Все. Теперь этот файл появится в выборе с одной иконкой {my%top-phone}

По похожему принципу вы можете добавить другие символы, меняя в них id, viewBox и содержимое символа на свои.

Чтобы иконки не была черной, в коде символа удалите атрибут заливки fill. Есть еще нюансы, но это другая история developer.mozilla.org/ru/docs/Web/SVG

Итак.

Открываем папку templates/дочерний_или_modern/images/icons/ В нем уже лежат другие файлы иконок. Копируем файл, например, в my.svg и очищаем, оставив только

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
 
</svg>

Файл иконок готов. Теперь в него надо добавить символы, чтобы их можно было выводить на сайте.

Добавьте в пустое место следующий код

<symbol id="top-phone" viewBox="0 0 13 14">
        <path d="M0 4.63884V1.02773C0 0.628886 0.323353 0.305511 0.722222 0.305511H4.33333C4.7322 0.305511 5.05556 0.628886 5.05556 1.02773V3.91662C5.05556 4.31547 4.7322 4.63884 4.33333 4.63884H2.88889C2.88889 7.82977 5.47569 10.4166 8.66667 10.4166V8.97218C8.66667 8.57337 8.99001 8.24996 9.38889 8.24996H12.2778C12.6767 8.24996 13 8.57337 13 8.97218V12.5833C13 12.9821 12.6767 13.3055 12.2778 13.3055H8.66667C3.8802 13.3055 0 9.4253 0 4.63884Z" fill="#495057"/>
</symbol>

Сохраните файл. Все. Теперь этот файл появится в выборе с одной иконкой {my%top-phone}

По похожему принципу вы можете добавить другие символы, меняя в них id, viewBox и содержимое символа на свои.

Чтобы иконки не была черной, в коде символа удалите атрибут заливки fill. Есть еще нюансы, но это другая история developer.mozilla.org/ru/docs/Web/SVG

Огромная благодарность! 🤝

Чтобы я не делал — не работает. А что я уже только не пробовал. Кастомный файл и иконка добавляются, но изображения иконки нет. С ViewBox экспериментировал. И кеши чистил. Результат всегда такой:

Подскажите, пожалуйста!!!

PS В файл скопирован код из сообщения выше. Без изменений.

Чтобы я не делал — не работает. А что я уже только не пробовал. Кастомный файл и иконка добавляются, но изображения иконки нет. С ViewBox экспериментировал. И кеши чистил.

вот тоже самое, хотя делал по инструкции и какие только svg не пробовал

Чёт не правильно делаете значит. У меня без проблем добавляется . 

Пример иконки что вы добавили где? Может вы тег закрыли где его не надо закрывать… /> </path>. Зайдите в эту иконку через браузер /templates/blabla/images/icons/my.svg#dildo. есть ли там ошибки?

Эти иконки обновляютса иногда после чистки кеша, надо закрыть окно браузера и зайти на сайт опять.