Help on customizing custom card's JS file

[sciant]

A little background: I used to use TV Remote Card (GitHub - marrobHD/tv-card: 📺 TV Remote Card) from hacs and I loved it. But since latest hass update it stopped showing buttons and the developer has not responded yet. So I switched to Roku Card from hacs too (GitHub - iantrich/roku-card: 📺 Roku Remote Card) and just customized it to function the same.

But I really don’t like some of the icon choices, so I dived into it’s inner working (I have some codding experience) and managed to come up with the way I think it works: There are “renderButton” functions that have 3 arguments, one of wich is the icon: this._renderButton('power', 'mdi:power', 'Power')
the first one appears on line 73 of this code roku-card/roku-card.ts at e6d229e02472572017e7a3c1fb8734b2f47b7df3 · iantrich/roku-card · GitHub
One would assume that changing mdi:something for mdi:somethingElse, saving the file and reloading frontend would work, but it changes nothing.

I have no experience codding on JavaScript, so I don’t know if editing www/community/roku-card/roku-card.js and saving it should work, or if I’m making some kind of mistake on the code, or just haven’t found the way to make hass reload the file to see the changes.
I would love if someone with more experience on JS or custom components points me in the right direction

[VDRainer]

Not sure, but i think the file will be overwritten by HACS from the *.js.gz archive in the same folder.
Try to delete (save it anywhere) the *.js.gz file, or save your copy of the *.js file outside of the community folder and edit the path in resources (UI Configuration > Lovelace Dashboards > Resources).
Also it helps to add a version to the resource url after the edit of the js.
For example

...-card.js?v=3

[sciant]

Not sure, but i think the file will be overwritten by HACS from the *.js.gz archive in the same folder.
Try to delete (save it anywhere) the *.js.gz file, or save your copy of the *.js file outside of the community folder and edit the path in resources (UI Configuration > Lovelace Dashboards > Resources).
Also it helps to add a version to the resource url after the edit of the js.
For example

...-card.js?v=3

THIS I finally managed to customize it and learn some web codding too. Thanks to your suggestion I found Lovelace Plugins · thomasloven/hass-config Wiki · GitHub wich helped me understand why it wasn’t loading the changes. After grasping the versioning thing I’ve been able to make and see changes.

It isn’t final yet, but I’m so happy!

[jumanji69]

Very cool my guy. Can you post instructions on how to make those changes? I am running into the exact same issue! This is the first time in my life where I have encountered a situation that is reminiscent of xkcd: Wisdom of the Ancients. You are my DenverCoder9. Only you can solve my problem, and end the cycle.

[sciant]

Lemme get back form work and I’ll try to help you!

[sirpreis]

Are you back from work yet?