hi, I use this to change the icons for reload and stop button:

#reload-button {
    list-style-image: url("../icons/reload.svg") !important;
}
#stop-button {
    list-style-image: url("../icons/stop.svg") !important;
}

but when the icon start the animation the icons are bigger and cause a unwanted zoom, it’s possible to change the icons used in the animation?

  • @MrOtherGuyM
    1•1 year ago

    What exactly do you want to do? Create your own animation frames? Or just disable the animation?

    You can find layout rules for the animations here and from that you can figure out that to display a custom image frame during the animation in both directions you could write something like this (in addition to the list-style-images for the static images):

    :is(#reload-button,#stop-button) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image{
  background: no-repeat center url("chrome://browser/skin/home.svg") !important;
  animation: none !important;
  width: 100% !important;
  transform: none !important;
}

    If you want to define your own animation frames then it would probably be easiest to create customized copies from chrome://browser/skin/stop-to-reload.svg and .../reload-to-stop.svg

    • @GodieOP
      1•1 year ago

      thanks, I don’t know if I could be able to edit a svg animated, maybe I just delete that animation. ❤️‍🔥