I attempted to replace Able Player's default icon for fullscreen-expand & fullscreen-collapse in order to harmonize those with the visual language of our overall website. This led me to uncover layers of code, some of which does not have its obvious intended effect. The layers of fallback, and their limitations, ought to be documented.

Attempt 1: PNG files

/button-icons/white/*.png and /button-icons/black/*.png

• replacing the images in these folders has no effect on Able Player.
• This is be to be expected, since this folder is only utilized if Able Player is set with the data-icon-type="image" attribute.

Attempt 2: SVG definitions

/button-icons/able-icons.svg

• After finding the entry for <symbol id="svg-fullscreen-expand" viewBox="0 0 20 20"> and <symbol id="svg-fullscreen-collapse" viewBox="0 0 20 20">, I replaced their <path> tag's d= attribute to the proper SVG path of my preferred icons.
• modifying this file has absolutely no effect on Able Player, even if Able Player is set with the data-icon-type="svg" attribute (explicitly or by its default).

Attempt 3: SVG font

/button-icons/fonts/able.svg

• Then I discovered that the build's ableplayer.min.css file is referring to a font family with multiple formats (in the order of .EOT, .TTF, .WOFF, and .SVG).
• Thus I modified the file /button-icons/fonts/able.svg for its entries of <glyph unicode="&#xf065;" glyph-name="fullscreen-expand" and <glyph unicode="&#xf065;" glyph-name="fullscreen-collapse". I replaced their d= attribute to the proper SVG path of my preferred icons.
• modifying this file has absolutely no effect on Able Player, even if Able Player is set with the data-icon-type="font" attribute.

Attempt 4: CSS order

/build/ableplayer.min.css (un-minimized: /styles/ableplayer.css)

• Presuming that (perhaps) the .EOT/.TTF font files have their own glyphs for these icons, I realized I would need to force the priority of the able.svg file for, at least, the two icons I wish to change. Thus, I meticulously made changes to the /build/ableplayer.min.css file by adding these modifications. (Shown here in their un-minimized form, for readability):

@font-face {
  font-family: 'able-svg';
    src: url('../button-icons/fonts/able.svg?dqripi#able') format('svg');
  font-weight: normal;
  font-style: normal;
}
[...]
.icon-fullscreen-expand:before {
    font-family: 'able-svg' !important;
    content: "\f065";
}
.icon-fullscreen-collapse:before {
    font-family: 'able-svg' !important;
    content: "\f066";
}

• This would force those two icon classes to rely only on the font file /button-icons/fonts/able.svg, which was modified in Attempt 3.
• If Able Player is set with the data-icon-type="font" attribute, this will result in an 'unknown' glyph appearing (a square box).

Attempt 5: modify the source code?

• Truly unsure why none of the above have worked, I did a search of the source code for the d path of Able Players' default fullscreen icon, which happens to be: M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z
• It turns out, this SVG path is hard-coded in multiple files of the source code, including:
  • build/ableplayer.dist.js
  • build/ableplayer.js
  • build/ableplayer.min.js
  • build/ableplayer.min.js.txt
  • scripts/initialize.js

What is the purpose of /button-icons/able-icons.svg, if the core javascript does not utilize it as the source of SVG paths?