How to override a FontAwesome icon's SVG?

[matheusds365]

Question

I tried:

#mdbook-theme-toggle > .fa-svg > svg {
    display: none;
}

#mdbook-theme-toggle > .fa-svg::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("../icons/theme-toggle.png");
    background-size: contain;
    background-repeat: no-repeat;
}

(I used a PNG just for testing out.)

Nothing.

Version

0.5.2

[matheusds365]

Figured it out with AI. Insert this at chrome.css:

/* FontAwesome (fa) SVG overrides */

    /* sidebar toggle */

        #mdbook-sidebar-toggle {
            position: relative;
        }

        #mdbook-sidebar-toggle svg {
            display: none;
        }

        #mdbook-sidebar-toggle::before {
            content: "";
            display: inline-block;
            width: 100%;
            height: 100%;
            background: var(--sidebar-toggle-button);
        }

    /* theme toggle */

        #mdbook-theme-toggle {
            position: relative;
        }

        #mdbook-theme-toggle svg {
            display: none;
        }

        #mdbook-theme-toggle::before {
            content: "";
            display: inline-block;
            width: 100%;
            height: 100%;
            background: var(--theme-toggle-button);
        }

    /* search toggle */

        #mdbook-search-toggle {
            position: relative;
        }

        #mdbook-search-toggle svg {
            display: none;
        }

        #mdbook-search-toggle::before {
            content: "";
            display: inline-block;
            width: 100%;
            height: 100%;
            background: var(--search-toggle-button);
        }

    /* print button */

        #print-button {
            position: relative;
            width: 50px;
            height: 50px;
            opacity: 0.77;
            box-sizing: border-box;
            display: inline-block;
        }

        #print-button:hover {
            opacity: 1.0;
        }

        #print-button svg {
            display: none;
        }

        #print-button::before {
            content: "";
            display: inline-block;
            width: 100%;
            height: 100%;
            background: var(--print-button);
        }

    /* previous/next buttons */

        .previous, .next {
            position: relative;
            width: 50px;
            height: 50px;
            opacity: 0.77;
            box-sizing: border-box;
            display: inline-block;
            border-radius: 0;
        }

        .previous:hover, .next:hover {
            opacity: 1;
        }

        .previous svg, .next svg {
            display: none;
        }

        .previous::before {
            content: "";
            display: inline-block;
            width: 100%;
            height: 100%;
            background: var(--previous-button);
        }

        .next::before {
            content: "";
            display: inline-block;
            width: 100%;
            height: 100%;
            background: var(--next-button);
        }

Adjust the background variables as something like

--next-button: url("data:...") no-repeat center / contain;