TYPO3 Core

I noticed some backend module icons of third party extensions were not rendered correctly after upgrading a project from v9 to v10.

v9:

HTML:

<span class="icon-markup">
  <img src="/typo3conf/ext/news/Resources/Public/Icons/module_administration.svg" width="32" height="32">
</span>

v10:

HTML:

<span class="icon-markup">
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="1200" height="1200" 
         viewBox="0 0 1200 1200">
        <defs>
            <style>.cls-1 { fill: #919de1; } .cls-2 { fill: #fff; fill-rule: evenodd; }</style>
        </defs>
        <path class="cls-1" d="M-1-3h1203v1203H-1z"></path>
        <path
            d="M599.837 627.072h-164.21v-164.21h164.21v164.21zM380.89 736.545v54.736h273.684v-54.735H380.89zm0-328.42v273.683h273.684V408.125H380.89zm328.42 328.42v54.736h218.947v-54.735H709.31zm0-109.473v54.736h218.947v-54.736H709.31zm0-109.474v54.737h218.947v-54.737H709.31zm0-109.473v54.737h218.947v-54.737H709.31zM263.293 837.893c-5.418 5.418-11.833 8.125-19.243 8.125-7.417 0-13.83-2.707-19.243-8.125-5.42-5.413-8.125-11.827-8.125-19.244V408.124h54.736V818.65c0 7.416-2.712 13.83-8.125 19.243zm711.575 0c-5.42 5.418-11.833 8.125-19.243 8.125H321.45c3.135-8.834 4.705-17.96 4.705-27.37V353.39h656.838v465.26c0 7.418-2.713 13.832-8.125 19.245zm-703.45-539.24v54.736H161.945v465.26c0 22.81 7.978 42.194 23.948 58.157 15.962 15.97 35.346 23.947 58.157 23.947h711.575c22.804 0 42.188-7.978 58.157-23.947 15.963-15.963 23.948-35.346 23.948-58.158V298.65H271.418z" 
            class="cls-2"></path>
    </svg>
</span>

How to reproduce:
Add a custom module after another custom module with an icon which also declares the class .cls-1 with a different value.

Workaround for extension developers:
Do not declare CSS classes in SVG icons.