I am trying to make a template in MediaWiki to show an icon next to some text where the icon is visualisation of the text. I would want the size of the icon to scale with the text size, like larger when in a header etc.
Normally, the image reference would be created like this (example for size 20px):
[[File:Icon.png|frameless|20px]]
I have tried to use 1em for size, but it seems like MediaWiki only supports size in px.
Is there any way I can get the image to scale with text in MediaWiki without creating custom css for this?
The reason the MediaWiki Image syntax doesn't natively support relative sizes such as em is that it's not generating CSS to set the image size, it's actually resizing the image on the server. There is therefore no (trivial) way for it to resize dynamically based on a client-side text size (the user could zoom in, over-ride font-size CSS, etc).
Although there are various built-in layout options which do include some CSS, none seem to do what you need, so you'll need to set it to render full size, then force it to be resized on the client using some custom CSS.
You could add a site-wide CSS rule for a particular class and make a template to apply it, so once set up it would be just as easy at point of use as the native markup.