CSS Specificity is preventing me from overriding content property about icons HOT 2 OPEN

What can't you override?

The selector we use applies to all ~2,000 generated classnames for each icon.

.bi::before, 
[class*=" bi-"]::before, 
[class^=bi-]::before {
  /* ... */
}

from icons.

As you can see from your screenshoot too, I expect to see the bi-file-earmark-zip icon instead of bi-file-earmark.

bi-file-earmark (Bootstrap Icons):

bi-file-earmark-zip (Bootstrap Icons):

I'm using bi-file-earmark as a fallback for extensions that don't have an own icon. By the way, every bi-file-earmark-* placed after bi-file-earmark is unable to override the former's content property due to CSS specificity.

from icons.