MaciejK wrote:Yes, I'm using Label, not the title as title is quite long and complex for SEO purposes.
Were you aware that there are
SEO options under the main page tab? This allows you to assign the SEO <title> tag separately from the page title, which would then only be used for the human-visible page titles.
MaciejK wrote:No, i don't want the icon to appear on page itself, just pure text.
Then would this not be a good reason to use TITLE instead of LABEL, and then instead use SEO options (as mentioned above)? As long as you are adding icon tags to labels, and then displaying labels as the page title, the icon tag will obviously be part of the page title (working or not).
MaciejK wrote:I was also thinking to use SVG icons as I can design them myself or take from limitless resources on internet, this is much better solution for me.
That would be technically possible, but it would require a lot of effort, and doesn't really solve any "problems". My point about SVG being "better" is mainly because they are more clear, but only at specific larger sizes (definitely larger than your menu font). SVG icons will be even more difficult to vertically align with the text (because the icon is not a font that inherits the font size/style) ... At least when using a font-icon, it will somewhat automatically align with text color/size/style.
It's not a huge performance issue for a separate website like yours to include an icon font CSS. My comment was mainly from the perspective of X3 as a library that needs to be kept optimal, and where we only use some icons for interface elements.
I would definitely stick with a font icon CSS in your case, as the icons are used alongside text. SVG would take a lot of effort with minimal benefit. With SVG icons, I personally add them "inline" for maximum control and it doesn't require any "loading". For example in the X3 popup interface, the "next" (chevron) button:
<svg viewBox="0 0 24 24">
<path class="svg-path-chevron_right" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path>
</svg>
FYI, after clicking an icon on
materialdesignicons.com, you can click the code-dropdown and "view SVG".