Custom icons

[profxeni]

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

[Roldy]

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.

[profxeni]

Let’s hope for magic

[Lucas_Pires]

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>

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

[Lucas_Pires]

Sorry, forgot to say this requirement

[ehdubya]

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!

[Lucas_Pires]

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

[ThinhDinh]

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

Beautiful Design App

Releasing this beast thanks to @Lucas_Pires’ code for having custom tab icons. The tab icon here has 4 states: Not chosen (not the notifications tab), no unread notifications: Grey bell Chosen (viewing notifications tab), no unread notifications: Violet bell Not chosen, at least 1 unread: Grey bell with red dot Chosen, at least 1 unread: Violet bell with red dot Pros: Look cool, can use this idea as a base to notify people of something that needs their attention. Cons: Have to p…

[profxeni]

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

[profxeni]

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

[Shiv]

@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

[Jeff_Hager]

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.

[ehdubya]

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

[Amal]

Hi Lucas,

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

[Lucas_Pires]

I guess .jpg or .png could help

[Amal]

What am i doing wrong

  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);
  }

[Lucas_Pires]

@Amal

https://drive.google.com/file/d/1LLr0x6IR7cG4VFVr34THbe6dY3

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

[Amal]

thank you, that worked

[Amal]

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?

[ThinhDinh]

You have to put it on every details screen.