Change icon color

[ivanprea]

Hello,
i'm using this integration only to open Netflix and Jellyfin on my tv (By the way, thank you so much!). The only thing that i can't do is change color on the icons. The Icons are white and i would like to change color or maybe change them. I read the docs but i can't make it work. Is there some kind person that can explain to me what i'm doing wrong?

Thanks in advance.

[Nerwyn]

Several examples (like this one) include icon modifications such as color. The most direct way is to create custom actions for these icons, (they'll autofill with their default action information when you enter their names) and then include the icon CSS styles there in the appearance pane.

.icon {
  color: #E50914;
}

I did just realize that you can color specific icons in the global CSS styles without custom actions if you want to do less config changes.

[title="netflix"] {
  --icon-color: #E50914;
}

[ivanprea]

I have a created a single button yo open netflix but i don't understand where i have to insert the code about the color:

type: custom:android-tv-card
remote_id: remote.android_tv
media_player_id: media_player.android_tv
custom_actions:
  - type: button
    name: Netflix
    tap_action:
      action: adb_command
      command: am start -n com.netflix.ninja/.MainActivity
    icon: mdi:netflix
keyboard_id: remote.android_tv
grid_options:
  columns: 4
  rows: auto
autofill_entity_id: true
haptics: true
rows:
  - - netflix
custom_icons:
  - name: netflix
    path: https://www.svgrepo.com/svg/303196/netflix-2-logo

[Nerwyn]

You don't have to create a custom icon for netflix, the netflix icon is included in the default Home Assistant icon set as mdi:netflix. It looks like your Netflix custom action is already using the built in icon anyway.

Are you not using the configuration UI? There's a code boxes for CSS styles at both the overall card and custom action levels talked about here in the README. The example I linked above has styles keys and CSS for several custom actions, but you should be using the configuration UI as doing it all in YAML is a pain.

[ivanprea]

I have tried what u said but i can't change the color and when i copied and pasted your example with the icons colored the button does not work.

[ivanprea]

I tried to set a color there but it wont work. Can you be more clear please? Can you share a screenshot where you show where exactly can i change the icon color please?

[Nerwyn]

Your custom action is named uppercase Netflix, it should be lowercase netflix.

[ivanprea]

For netflix works now but for jellyfin it does not.

If i the name is lowercase the icon disappear and if it is Jellyfin the color does not change. Do i miss something?

[Nerwyn]

The icon field isn't filled in in your custom action. That doesn't autofill if cleared after initial default action autofill. Set it to jellyfin to use the Jellyfin icon that comes with this card.

[ivanprea]

Thank you now everything seems to work properly. I really appreciate your help .

[ivanprea]

I just noticed a thing if i change the action name from Netflix to netflix, yes the color is been applied but the button won't work anymore (Netflix does not open on the TV). Same thing happens to Jellyfin as soon as i change the icon's color the button stops to work.

[Nerwyn]

You need to reset their tap actions. Open the interactions pane and set the tap action to default. It should autofill with the default tap action.

[ivanprea]

oh okay. Yes i can confirm now everything works properly. Thank you so much.