The icons from material.io is not showing the text written after the icon name properly

Hi Koders,

I was following an instruction of an old post regarding showing icons from material.io and fontawesome in a button or label along side text and I ran into this formatting issue.

My properties are :




The output is (in emulator)

The fontawesome button and label are showing correctly but there seems to be a problem with buttons and labels using material.io icon.

The text seems to be showing strangely as can be seen from the output and the viewer.

Am I missing something to display it correctly using the material.io Icons ? Button and Label HTML format is enabled

Thanks for the help

the icon name is incorrect

you can choose an icon instead of a name

Hi,

From the output picture, it can be seen that the icons are displaying as required, it is the text after the icons from material icons displaying strangely.

I know that there is option to upload the icon to a label / button, then use another label / button to display the text. But I wanted to point out that using material icons is behaving differently from fontawesome icons. Fontawesome is displaying correctly.

I read elsewhere that font awesome icons require a “;” after the code (Font Awesome icon is not showing in App) , so which is why I was wondering whether material icons also require something besides codename to get it right ?

And hence my question - Am I missing something to display the text after the icon correctly while using material icons ?

Thanks

Hi
I’m not sure if what you want to do can be achieved in a single label. The material icons font doesn’t display Latin characters correctly.
You could try having two labels side by side: one with the icon and another with its corresponding text

Thanks Vishwas,

I had this doubt only because the fontawesome icons were working with icon and text side by side. So thought maybe it was a bug with material icons and that it could be fixed.

Or I thought I was writing it wrong in the text box (like one of the user had with fontawesome icons, refer this post)

I knew it could be done this way. :slightly_smiling_face:

So currently icons beside a text with font typeface materials icons is not possible.

Thanks…

I think You have set the font ttf

This the property setting for 2 labels and 2 buttons.

Properties Image :

https://kodular-community.s3.dualstack.eu-west-1.amazonaws.com/original/3X/3/d/3d7b8a88274b4408f8b849e8d3496b92babd963c.png

https://kodular-community.s3.dualstack.eu-west-1.amazonaws.com/original/3X/4/1/41c855ee114f145340d65394bbb72c77a9d18073.png

https://kodular-community.s3.dualstack.eu-west-1.amazonaws.com/original/3X/a/e/ae06e3dccb50673eef7b10d9753e8e390bbdacb1.png

https://kodular-community.s3.dualstack.eu-west-1.amazonaws.com/original/3X/f/e/fe9c6739e9fb882e8d7fffbcde6a314f9a9bfa8e.png

Could you clarify ? There is no ttf option in font typeface. So don’t know what you referring to.

I am saying if u have set the import font typeface import ttf then it is impossible to show material icon

The Font Typeface import in Advanced properties is “None” for label and button.

The issue is not showing the icon from materials but showing icon (by using material icon name from materials website) and a text beside it while using material icon Font typeface. This is possible using font Awesome 5 but not material icons.

Could you send a screenshot of it working on a label and/or button ?

Thanks

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.