Map of file extension / file name to icon?

[pawamoy]

Any quick way of getting a map of file names / file extension to icons?

I started writing one:

_icons = {
    "*.cpp": ":simple-cplusplus:",
    "*.hpp": ":simple-cplusplus:",
    "*.c": ":simple-c:",
    "*.h": ":simple-c:",
    "*.css": ":simple-css3:",
    "Dockerfile": ":simple-docker:",
    "*.fish": ":simple-fishshell:",
    "*.fs": ":simple-fsharp:",
    "*.fsi": ":simple-fsharp:",
    "*.fsx": ":simple-fsharp:",
    ".gitattributes": ":simple-git:",
    ".gitignore": ":simple-git:",
    "*.go": ":simple-go:",
    "*.gradle": ":simple-gradle:",
    "*.groovy": ":simple-apachegroovy:",
    "*.html": ":simple-html5:",
    "*.ico": ":simple-icon:",
    "*.jinja": ":simple-jinja:",
    "*.jpg": ":simple-jpeg:",
    "*.jpeg": ":simple-jpeg:",
    "*.json": ":simple-json:",
    "*.js": ":simple-javascript:",
    "*.jsx": ":simple-react:",
    "*.tsx": ":simple-react:",
    "*.kt": ":simple-kotlin:",
    "*.kts": ":simple-kotlin:",
    "*.lua": ":simple-lua:",
    "*.md": ":simple-markdown:",
    "*.odt": ":simple-libreofficewriter:",
    "*.php": ":simple-php:",
    "*.py": ":simple-python:",
    "*.pyc": ":simple-python:",
    "*.pyo": ":simple-python:",
    "*.pyd": ":simple-python:",
    "*.pyx": ":simple-python:",
    "*.rb": ":simple-ruby:",
    "*.rs": ":simple-rust:",
    "*.scala": ":simple-scala:",
    "*.scss": ":simple-sass:",
    "*.sh": ":simple-gnubash:",
    "*.svg": ":simple-svg:",
    "*.tex": ":simple-latex:",
    "*.toml": ":simple-toml:",
    "*.ts": ":simple-typescript:",
    "*.yml": ":simple-yaml:",
    "*.yaml": ":simple-yaml:",
    "*.zsh": ":simple-zsh:",
}

def _file_icon(name: str) -> str:
    if name in _icons:
        return _icons[name]
    if (ext := f"*.{name.rsplit('.')[-1]}") in _icons:
        return _icons[ext]
    return "📄"

...but it's a bit cumbersome to search by hand in https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/?h=emoji#icons-emojis 😄

[kamilkrzyskow]

Hello @pawamoy,
instead of searching by hand on the website, parse the index yourself 😆:

• https://squidfunk.github.io/mkdocs-material/assets/javascripts/iconsearch_index.json

PyMdown Extensions add the Pygments requirements, so perhaps there is a way to find extensions based on the language name:

• https://pygments.org/languages/

I don't know about any mapping already made that would meet the criteria.

[pawamoy]

Thanks @kamilkrzyskow! Whatever the direction (ext to icon, icon to ext), it needs kind of a manual scan. I continued doing what I started, I'll update the list here and anyone is welcome to contribute (just post and I'll update the main comment).

By the way, my use-case was to use custom icons in file trees, but I use code blocks for file trees, so icons like :simple-jinja: are not even rendered in there 😅 Can you think of a workaround to render icons in code blocks 🤔?

[squidfunk]

Simple Icons doesn't provide a mapping, as far as I know. However, this could be released as a custom package? Maybe your first JavaScript library? 🤟

[pawamoy]

Maybe 😄

For my second question, how to render icons in code blocks, I found this discussion: #4771 (funnily, with the exact same use-case) 👍

[pawamoy]

Got it working 😎

[CodyAdam]

Hey, I just created this npm package for this purpose, give it a try:

npm: https://www.npmjs.com/package/omni-file
github: https://github.com/CodyAdam/omni-file