How to fix JD's Material Icons taking up whole line when used with tags

, ,
#1

I imported Material Icons from JD’s Material Theme.

These icon work well inside Tiddler’s “View Toolbar”. But when used in tag, the take up whole line.

I have created a TiddlyHosted TW to demonstrate the issue.

https://random-2022-12-05-1670247405.tiddlyhost.com/

Example of bug

image

Expected output

See how the icon and tag title appears in the same line.

image

If you see the code of these icons and compare them with the shadow tiddler, there is no such change that could have caused this issue.

Any idea, how do I fix it?

#3

I fixed it.

image

There is an new line after the closing </svg> tag which makes the text appear on the next line. Deleting it fixed the issue.

#5

It would be great to have some icon packs for Tiddlywiki like theme :wink:

#6

jd_material_icons_fixed.json (9.2 KB)

Here is the JSON to fixed icons from JD’s material theme, in case someone else uses these icons.

3 Likes