Forum Documentation Showcase Pricing Learn more

Material icons are giant letters


#1

Hi, anyone else seeing giant letters for their material icons while the page is loading?

Just wondering if I should dump them in favour of svgs. If you’ve done this , how are you changing the svg colour - programmatically via CSS or are you just replacing with another svg?


#2

Wha? What is this even about? Not seeing that here.

But srsly… what’s a “material icon”?


#3

Well, that’s pretty much the size of them. :grinning:

See the material icons plugin if you want to find out about material icons.

Basically they are slower to load (Australia) and display big letters while loading.


#4

You lost me at “plugin”.


#5

keep your icons fixed size, should solve it


#6

No they are fixed size (native app). It seems like a slow loading issue I guess but would be better if they were blank not with these big letters showing.

I’m thinking of just getting the equivalent svgs and uploading them as files to the dB but it’s a hassle.


#7

Keith are you high right now?


#8

Nope. But plugins are the devil’s work. (Meaning they are oft-abandoned. There are a few that, by their nature, are reliable. Bubble built plugins are among them. I’m just not familiar with material icons…).


#9

Also, you’re the one who is seeing “giant letters” where there are supposed to be icons.

:thinking:

:stuck_out_tongue_winking_eye::man_shrugging:


#10

Made me laugh out loud on the train.


#11

@cowontherun - I know exactly what you’re talking about. Where a plugin is supposed to appear, it instead displays fallback text (ie. a cart icon shows the word “cart” in large serif letters).

(@keith, to fill in the gap, Bubble created a plugin that lets you pull from Google’s Material Icons instead of using the standard icon library).

While I don’t have a definitive answer, it seems to happen most on cruddy internet connections. (Ie. I’m using a mobile device on a commuter train). It usually fixes itself within a few seconds. But I’ve had a couple occasions where it stayed with the fallback text). If I’m able to reproduce, I’ll share.


#12

Just initially this seems to work - got svg from material.io, in Affinity Designer/illustrator changed to fill colour I wanted, then uploaded svg as a static image to the screen. No more big letters.


#13

Yes, yes, yes… I had the same thing yesterday… All my icons are fixed size. Sounds like it is a slightly annoying “feature”… :frowning:


#14

I think this is because it is really a font at heart, made to look like an icon via the XML. Stack Overflow mentions a few times that the default font is 24px. Makes sense.


#15

Have you filed a bug report with Bubble? It seems enough of us have encountered the issue that it isn’t an isolated thing. I’d be curious to hear what response they may have to mitigate.


#16

I had this issue with my custom created svg logo, it was rendering as times new Roman and different lines on mobile. It was because the mobile operating systems did not have the font I was using loaded. I didn’t realize that, like these icons , my svg file was based on text. I used adobe illustrator to convert it to a path svg though and that fixed the problem. My guess is that there is information on how to render the icons being delivered from the server and, if this doesn’t load properly, it defaults to text.


#17

Hmmmm, I don’t believe this is a bug, and also not a Bubble bug, just the way they work. If I am on the train with poor cell phone reception and go to https://material.io/tools/icons/?style=baseline some of their svg icons also show as fonts.


#18

This topic was automatically closed after 14 days. New replies are no longer allowed.