How should I use icon fonts in the TwinCAT HMI? - html

Question

To replace the tedious effort of editing and saving copies of .svg files with customized colors and variants, I decided that it would be nice to try and work with modern icon libraries.
To that end, I have tried to implement Google's Material Icons library as a font, inside a TwinCAT HMI project. The result looks something like this:
Fonts/MaterialIcons-Regular.woff2 (locally hosted font file)
Fonts/Fonts.css contains:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2');
}
Themes/Base/BaseStyle.css contains the style definitions for the various classes
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
}
/* Rules for using icons using custom colors */
.material-icons.orange600 { color: #FB8C00; }
This allows me to define a TcHmiHtmlHost, create an element, and voila!
<div id="material_icon_622" data-tchmi-type="TcHmi.Controls.System.TcHmiHtmlHost" data-tchmi-grid-row-index="2" data-tchmi-width="30" data-tchmi-height="30">
<span class="material-icons md-dark ">face</span>
</div>
However, I need to define and customize an HTML host for each time I would use a symbol this way...
What other ways have people tried to efficiently work with adding icons to their TwinCAT HMI? Is there an icon framework for TwinCAT that I am missing? Is customizing SVG files the way to go? Should I just use a modern web framework?
Thanks in advance.

Answer 1

We use SVG files as icons. This is flexible, and there are loads of icons available already.
The only thing that is irritating is that Beckhoff puts the SVG file in an tag as 'src'. That has the consequence that for every icon you should have it in a specific color if needed. This is the Beckhoff way (see the included images in Twincat HMI by Beckhoff). I want to use the fill property for SVG files, however that doesn't work. So I've implemented a 'hack' according to: How to transform black into any given color using only CSS filters