Custom Admonition icons break with 5.x

I checked that…

• … the documentation does not mention anything about my problem
• N/A … the problem doesn’t occur with the default MkDocs template
• … the problem is not in any of my customizations (CSS, JS, template)
• … there are no open or closed issues that are related to my problem

Description

Previously, guidance was provided on using custom css to override icons used in the admonition, as shown in #646. However, the use of CSS variables seems to prevent the old method from working.

Expected behavior

A replacement technique for overriding the icon assigned to a chosen admonition type should be provided.

Actual behavior

Previously accepted/recommended technique does not change the icon - only the defaults are displayed.

Steps to reproduce the bug

1. Use previous CSS methods in custom css file, e.g:

.md-typeset .admonition.bug > .admonition-title::before, .md-typeset .admonition.bug > summary::before, .md-typeset .admonition.important > .admonition-title::before, .md-typeset .admonition.important > summary::before, .md-typeset .admonition.bug > .admonition-title::before, .md-typeset .admonition.bug > summary::before, .md-typeset details.hint > .admonition-title::before, .md-typeset details.hint > summary::before, .md-typeset details.important > .admonition-title::before, .md-typeset details.important > summary::before, .md-typeset details.bug > .admonition-title::before, .md-typeset details.bug > summary::before {
    color: rgb(245, 0, 87);
    content: "play_circle_outline";
}

Package versions

• Python: python --version: Python 3.7.5
• MkDocs: mkdocs --version: mkdocs, version 1.1 from /usr/local/lib/python3.7/site-packages/mkdocs (Python 3.7)
• Material: pip show mkdocs-material | grep -E ^Version: Version: 5.1.4

Project configuration

...
theme:
  name: 'material'
  font:
    text: 'Calibri'
    code: 'Courier New'
  palette:
    primary: 'white'
    accent: 'indigo'
  icon:
    logo: material/view-dashboard
  favicon: 'img/favicon.ico'
  features:
  - instant
#   - tabs

markdown_extensions:
  - admonition
...

System information

• OS: MacOS 10.15.4
• Browser: Chrome 81.0.4044.129

[facelessuser]

It is definitely a CSS question as this is completely controlled via CSS. The example I posted is obviously more complicated than desired for easy understanding, unfortunately it is all I have time for at the moment until I’m moved. I don’t mind offering a simple example, but it has to be as soon as I have time. I know last time, I think I was offering the guidance as well.

[squidfunk]

Technically, #646 was a feature request, not a support request. I hope that GitHub discussions is out of beta soon, as I think this project would massively benefit from it.😊