I'm new to Drupal development and recently migrated a Drupal 7 theme to Drupal 10. In Drupal 7, the file fields displays file-type icons (e.g., icons/application-pdf.png) next to file links, but after migrating to Drupal 10, those icons are no longer displayed, and I’m unsure how file-type icons are handled in the newer versions of Drupal. While searching the codebase, I found the following icon files:

$ find . -type f -iname "application-pdf.png" ./core/themes/claro/images/classy/icons/application-pdf.png ./core/themes/starterkit_theme/images/icons/application-pdf.png ./core/profiles/demo_umami/themes/umami/images/classy/icons/application-pdf.png 

I can confirm that file metadata (such as file size) is still available and rendered correctly via my custom Twig template my_custom_theme/templates/field/file-link.html.twig (this file is a copy of core/modules/file/templates/file-link.html.twig without any change. I can remove it when suggested) as shown below:

<!-- BEGIN OUTPUT from 'core/modules/system/templates/field.html.twig' --> <div> <div>Paper</div> <div> <!-- THEME DEBUG --> <!-- THEME HOOK: 'file_link' --> <!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'themes/custom/my_custom_theme/templates/field/file-link.html.twig' --> <span class="file file--mime-application-pdf file--application-pdf"><a href="/sites/default/files/manual/computer.pdf" type="application/pdf">computer.pdf</a></span> <span>(2.26 MB)</span> <!-- END CUSTOM TEMPLATE OUTPUT from 'themes/custom/my_custom_theme/templates/field/file-link.html.twig' --> </div> </div> <!-- END OUTPUT from 'core/modules/system/templates/field.html.twig' --> 

However, there is no CSS style named file in Chrome developer tools. See the screenshot below:

Screenshot of the Chrome developer tools

What I’d like to achieve is to display a file-type icon (say icons/application-pdf.png or svg whatever Drupal 10 default is) before the file link, similar to Drupal 7.

A workaround would be to copy the icons from core/themes/claro/images/classy/ into my custom theme and adjust the CSS in my_custom_theme accordingly, but this doesn’t feel like a clean or recommended solution.

What is the proper way to display standard file-type icons next to file links in Drupal 10?