Custom icons

Greetings to the community.
A question for experienced users or framework developers: is there a possibility to insert a custom icon instead of the ones in the tabs?
Thanks in advance to those who will answer me.

Riccardo

3 Likes

There is no such possibility currently. I doubt it’s impossible even with CSS as we don’t have “dockable” components to the tab icon, as opposed to what can happen in a detail screen with the rich text component.
I don’t know if @Lucas_Pires has any magic of his own to do this.

1 Like

Let’s hope for magic :wink:

2 Likes

Hey @profxeni, as @Roldy said, the tab needs to be in a Detail style screen. Try this

<pre><span><style>
  button[aria-label="Tab's name"] svg {
    display: none;
  }
  button[aria-label="Tab's name"] div div[size] {
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(URL);
  }
</style>

:bulb: Replace aria-label with the Tab’s name, and URL to the image.

8 Likes

Sorry, forgot to say this requirement :point_up:t3:

This is awesome Lucas! Does the URL need to be inside double-quotes INSIDE the brackets?

Like this:

<pre><span><style>
  button[aria-label="Tab's name"] svg {
    display: none;
  }
  button[aria-label="Tab's name"] div div[size] {
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("wvw.yourimageurlgoeshere.com");
  }
</style>

Thanks!

1 Like

I just tested, and actually, there’s no difference :grinning_face_with_smiling_eyes:

1 Like

Here’s one of my recent apps applying @Lucas_Pires’ technique.

2 Likes

Thank you all for the responses. Great group with really knowledgeable people! I will let you know how it went :blush:

3 Likes

Thanks to everyone for the advice, but especially Lucas Pires. The adjustment succeeded perfectly!

2 Likes

@Lucas_Pires Is there a way to dynamically parse the URL ( profile picture ) of the user to the CSS so that the URL is not hardcoded in the richtext ?

-Thanks

Shiv

You can place the CSS in a template column with replacement values that are dynamically filled. Then use that template column as the source of the rich text component.

3 Likes

Literally just blew my mind :exploding_head:…so simple…welp…gonna go clean up some gray matter…and my apps! :nerd_face: Thanks Jeff!

1 Like

Hi Lucas,

Does the image have to be a certain format? my image does not show up

I guess .jpg or .png could help

What am i doing wrong :frowning:


  button[aria-label="Origami"] svg {
    display: none;
  }
  button[aria-label="Origami"] div div[size] {
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(https://drive.google.com/file/d/1LLr0x6IR7cG4VFVr34THbe6dY35Mg79A/view?usp=sharing);
  }

image

This url doesnt have any .jpg or .png because it’s a GDrive file…
Try uploading the image directly in glide and copy and paste the link

1 Like

thank you, that worked

1 Like

chrome-capture (1)

Works great now. Since its only once per detailed screen, is there another way to duplicate it to other? or i have to copy to screen?

You have to put it on every details screen.

2 Likes