Customize Icon Display in nerd-icons-dired

##TL;DR

If you use Setup El, add the following configuration.

1
(setup nerd-icons-dired
2
  (:elpaca t)
3
  (:with-mode dired-mode
4
    (:hook nerd-icons-dired-mode))
5
  (:require nerd-icons)
6

7
  (add-to-list 'nerd-icons-extension-icon-alist
8
               '("mdx" nerd-icons-octicon "nf-oct-markdown" :face nerd-icons-lblue)))

##Motivation

On this blog, I mainly write articles in MDX and generate HTML with Next.js. I use Emacs when writing articles.

I use nerd-icons-dired to display file icons in Emacs, but the default configuration does not show icons for MDX files. It is not a big problem, but seeing only a white square icon when switching buffers or viewing dired feels dull, so I looked into how to customize it.

##Configuration

This is done by adding a value to nerd-icons-extension-icon-alist in nerd-icons, not nerd-icons-dired. Install nerd-icons and nerd-icons-dired using the method that matches your package manager.

If you want a package-manager-agnostic version, it looks like this.

1
(require 'nerd-icons)
2

3
(add-to-list 'nerd-icons-extension-icon-alist
4
    '("mdx" nerd-icons-octicon "nf-oct-markdown" :face nerd-icons-lblue))

You can find icon names by running M-x nerd-icon-insert, which shows a list of icons. If you want to match existing icons, refer to the nerd-icons code.

##References

• dired - How do I customize the icons used in nerd-icons package - Emacs Stack Exchange