Using nvim-web-devicons and lspkind as kind_icon

[marovira]

This is my setup for combining nvim-web-devicons with lspkind to replace the built-in kind_icon functionality. Here are some comparisons:

• Regular complete
  • Before:
  • After:
• File completion
  • Before:
  • After:

Here's the configuration:

draw = {
    components = {
        kind_icon = {
            ellipsis = false,
            text = function(ctx)
                local lspkind = require("lspkind")
                local icon = ctx.kind_icon
                if vim.tbl_contains({ "Path" }, ctx.source_name) then
                    local dev_icon, _ = require("nvim-web-devicons").get_icon(ctx.label)
                    if dev_icon then
                        icon = dev_icon
                    end
                else
                    icon = require("lspkind").symbolic(ctx.kind, {
                        mode = "symbol",
                    })
                end

                return icon .. ctx.icon_gap
            end,
        },
    },
},

If you want to use the highlight groups from nvim-web-devicons, then add this:

highlight = function(ctx)
    local hl = "BlinkCmpKind" .. ctx.kind
        or require("blink.cmp.completion.windows.render.tailwind").get_hl(ctx)
    if vim.tbl_contains({ "Path" }, ctx.source_name) then
        local dev_icon, dev_hl = require("nvim-web-devicons").get_icon(ctx.label)
        if dev_icon then
            hl = dev_hl
        end
    end
    return hl
end,

Note

You can also add the same function for kind.highlight if you want to keep the highlight groups in sync with the icons.

[saghen]

Added as a recipe, thanks! https://main.cmp.saghen.dev/recipes.html#nvim-web-devicons-lspkind

[marovira]

Glad it helped!

[daUnknownCoder]

hey there @marovira, how to make this work for mini.icons? i have too many configurations to switch to nvim-web-devicons now...
this is my mini.icons table for lsp:

code code code

	lsp = {
		array = { glyph = "󰅪" },
		color = { glyph = "" },
		constant = { glyph = "󰏿" },
		constructor = { glyph = "" },
		enum = { glyph = "" },
		event = { glyph = "󱐋" },
		file = { glyph = "" },
		folder = { glyph = "󰉋" },
		["function"] = { glyph = "󰡱" },
		interface = { glyph = "" },
		key = { glyph = "󰌋" },
		method = { glyph = "󰆧" },
		module = { glyph = "" },
		namespace = { glyph = "󰅩" },
		object = { glyph = "󰅩" },
		snippet = { glyph = "󰩫" },
		string = { glyph = "󰉾" },
		text = { glyph = "" },
		typeparameter = { glyph = "󰆩" },
		value = { glyph = "󰎠" },
		variable = { glyph = "" },

		-- Custom
		breakstatement = { glyph = "󰙦", hl = "MiniIconsGreen" },
		["break"] = { glyph = "󰙦", hl = "MiniIconsAzure" },
		call = { glyph = "󰃷", hl = "MiniIconsGrey" },
		calc = { glyph = "󰃬", hl = "MiniIconsOrange" },
		casestatement = { glyph = "󱃙", hl = "MiniIconsPurple" },
		codeium = { glyph = "", hl = "MiniIconsGreen" },
		continuestatement = { glyph = "→", hl = "MiniIconsAzure" },
		copilot = { glyph = "", hl = "MiniIconsGreen" },
		declaration = { glyph = "󰙠", hl = "MiniIconsYellow" },
		delete = { glyph = "", hl = "MiniIconsRed" },
		dostatement = { glyph = "󰑖", hl = "MiniIconsPurple" },
		forstatement = { glyph = "󰑖", hl = "MiniIconsPurple" },
		h1marker = { glyph = "󰉫", hl = "MiniIconsBlue" }, -- Used by markdown treesitter parser
		h2marker = { glyph = "󰉬", hl = "MiniIconsBlue" },
		h3marker = { glyph = "󰉭", hl = "MiniIconsBlue" },
		h4marker = { glyph = "󰉮", hl = "MiniIconsBlue" },
		h5marker = { glyph = "󰉯", hl = "MiniIconsBlue" },
		h6marker = { glyph = "󰉰", hl = "MiniIconsBlue" },
		identifier = { glyph = "󰀫", hl = "MiniIconsCyan" },
		ifstatement = { glyph = "󰇉", hl = "MiniIconsPurple" },
		list = { glyph = "󰅪", hl = "MiniIconsAzure" },
		log = { glyph = "", hl = "MiniIconsGrey" },
		lsp = { glyph = "", hl = "MiniIconsYellow" },
		macro = { glyph = "󰁌", hl = "MiniIconsRed" },
		markdownh1 = { glyph = "󰉫", hl = "MiniIconsBlue" }, -- Used by builtin markdown source
		markdownh2 = { glyph = "󰉬", hl = "MiniIconsBlue" },
		markdownh3 = { glyph = "󰉭", hl = "MiniIconsBlue" },
		markdownh4 = { glyph = "󰉮", hl = "MiniIconsBlue" },
		markdownh5 = { glyph = "󰉯", hl = "MiniIconsBlue" },
		markdownh6 = { glyph = "󰉰", hl = "MiniIconsBlue" },
		regex = { glyph = "", hl = "MiniIconsCyan" },
		["repeat"] = { glyph = "󰑖", hl = "MiniIconsOrange" },
		scope = { glyph = "󰅩", hl = "MiniIconsGreen" },
		specifier = { glyph = "󰦪", hl = "MiniIconsOrange" },
		statement = { glyph = "󰅩", hl = "MiniIconsYellow" },
		switchstatement = { glyph = "󰺟", hl = "MiniIconsPurple" },
		treesitter = { glyph = "", hl = "MiniIconsGreen" },
		type = { glyph = "", hl = "MiniIconsOrange" },
		whilestatement = { glyph = "󰑖", hl = "MiniIconsPurple" },

		question = { glyph = "", hl = "MiniIconsPurple" },
		hint = { glyph = "", hl = "MiniIconsGreen" },
		info = { glyph = "", hl = "MiniIconsCyan" },
		warning = { glyph = "", hl = "MiniIconsYellow" },
		error = { glyph = "", hl = "MiniIconsRed" },
		bug = { glyph = "", hl = "MiniIconsRed" },
	},

now i wonder if i can add this for directory/filename matching for path

you probanly dont wanna click this

	directory = {
		home = { glyph = "" },
		nvim = { glyph = "", hl = "MiniIconsAzure" },
		snippets = { glyph = "󰩫", hl = "MiniIconsYellow" },

		-- Custom
		fish = { glyph = "", hl = "MiniIconsOrange" },
		hypr = { glyph = "", hl = "MiniIconsAzure" },
		zsh = { glyph = "", hl = "MiniIconsAzure" },
		nushell = { glyph = "", hl = "MiniIconsGreen" },
		powershell = { glyph = "󰨊", hl = "MiniIconsAzure" },
		sway = { glyph = "", hl = "MiniIconsAzure" },
		kitty = { glyph = "󰄛", hl = "MiniIconsOrange" },
		wezterm = { glyph = "", hl = "MiniIconsPurple" },
		["warp-terminal"] = { glyph = "", hl = "MiniIconsCyan" },
		mpv = { glyph = "󰃽", hl = "MiniIconsPurple" },
		vim = { glyph = "", hl = "MiniIconsGreen" },
		readonly = { glyph = "󰉐", hl = "MiniIconsYellow" },
		videos = { glyph = "󰃽", hl = "MiniIconsOrange" },
	},
	file = {
		[".bashrc"] = { glyph = "󱆃" },
		[".zshrc"] = { glyph = "" },

		-- Custom
		["lazy.lua"] = { glyph = "󰒲", hl = "MiniIconsAzure" },
		["lazy-lock.json"] = { glyph = "󰒲", hl = "MiniIconsOrange" },
		["bootstrap.lua"] = { glyph = "󰊠", hl = "MiniIconsRed" },
		["packer.lua"] = { glyph = "󰮯", hl = "MiniIconsOrange" },
		["pckr.lua"] = { glyph = "󰮯", hl = "MiniIconsYellow" },
		["autocmd.lua"] = { glyph = "󰁨", hl = "MiniIconsYellow" },
		["health.lua"] = { glyph = "󰥬", hl = "MiniIconsGreen" },
		["treesitter.lua"] = { glyph = "", hl = "MiniIconsGreen" },
		["config"] = { glyph = "", "MiniIconsGrey" },
		[".gitignore"] = { glyph = "󰊢", hl = "MiniIconsOrange" },
		[".vimrc"] = { glyph = "", hl = "MiniIconsGreen" },
		["config.fish"] = { glyph = "", hl = "MiniIconsOrange" },
		["hyprland.conf"] = { glyph = "", hl = "MiniIconsAzure" },
		[".env"] = { glyph = "", hl = "MiniIconsGrey" },
		[".SRCINFO"] = { glyph = "󰣇", hl = "MiniIconsCyan" },
		[".editorconfig"] = { glyph = "", hl = "MiniIconsGrey" },
		[".eslintignore"] = { glyph = "", hl = "MiniIconsPurple" },
		[".eslintrc"] = { glyph = "", hl = "MiniIconsPurple" },
		[".gitconfig"] = { glyph = "", hl = "MiniIconsOrange" },
		[".luacheckrc"] = { glyph = "", hl = "MiniIconsAzure" },
		[".luaurc"] = { glyph = "", hl = "MiniIconsGrey" },
		[".prettierignore"] = { glyph = "", hl = "MiniIconsOrange" },
		[".prettierrc"] = { glyph = "", hl = "MiniIconsOrange" },
		[".prettierrc.cjs"] = { glyph = "", hl = "MiniIconsOrange" },
		[".prettierrc.js"] = { glyph = "", hl = "MiniIconsOrange" },
		[".prettierrc.json"] = { glyph = "", hl = "MiniIconsOrange" },
		[".prettierrc.json5"] = { glyph = "", hl = "MiniIconsOrange" },
		[".prettierrc.mjs"] = { glyph = "", hl = "MiniIconsOrange" },
		[".prettierrc.toml"] = { glyph = "", hl = "MiniIconsOrange" },
		[".prettierrc.yaml"] = { glyph = "", hl = "MiniIconsOrange" },
		[".prettierrc.yml"] = { glyph = "", hl = "MiniIconsOrange" },
		[".pylintrc"] = { glyph = "", hl = "MiniIconsOrange" },
		["CHANGELOG.md"] = { glyph = "󱂅", hl = "MiniIconsAzure" },
		["AUTHORS"] = { glyph = "", hl = "MiniIconsPurple" },
		["AUTHORS.txt"] = { glyph = "", hl = "MiniIconsPurple" },
		["LICENCE"] = { glyph = "󰿃", hl = "MiniIconsCyan" },
		["QtProject.conf"] = { glyph = "", hl = "MiniIconsGrey" },
		["bspwmrc"] = { glyph = "", hl = "MiniIconsOrange" },
		["build"] = { glyph = "", hl = "MiniIconsAzure" },
		["build.gradle"] = { glyph = "", hl = "MiniIconsBlue" },
		["checkhealth"] = { glyph = "󰓙", hl = "MiniIconsPurple" },
		["commit_editmsg"] = { glyph = "", hl = "MiniIconsOrange" },
		["kdeglobals"] = { glyph = "", hl = "MiniIconsYellow" },
		["kdenlive-layoutsrc"] = { glyph = "", hl = "MiniIconsPurple" },
		["kdenliverc"] = { glyph = "", hl = "MiniIconsPurple" },
	},
	filetype = {
		-- Custom
		kde = { glyph = "", "MiniIconsPurple" },
		backup = { glyph = "󰁯", "MiniIconsGrey" },
		hyprlang = { glyph = "", hl = "MiniIconsAzure" },
	},

[krovuxdev]

@daUnknownCoder You can use lsp to get icons based on LSP, and also MiniIcons.get to match directories or filenames with custom icons.