A simple way to include the Icon search?

[shaneholloman]

Hi there, big fan, btw : )

I find my self often switching to your reference site to find an icon short-code.
If I may ask how to add the icon search bar to my local Nas hosted docs?

So far I see

1. mkdocs-material/material/overrides/assets/javascripts/iconsearch_index.json
2. mkdocs-material/material/.icons/

and

## Search

<div class="mdx-iconsearch" data-mdx-component="iconsearch">
  <input
    class="md-input md-input--stretch mdx-iconsearch__input"
    placeholder="Search the icon and emoji database"
    data-mdx-component="iconsearch-query"
  />
  <div class="mdx-iconsearch-result" data-mdx-component="iconsearch-result">
    <div class="mdx-iconsearch-result__meta"></div>
    <ol class="mdx-iconsearch-result__list"></ol>
  </div>
</div>

I have made an attempt myself, but can't piece it together ...

[squidfunk]

Thanks! Icon search is a custom component, which is not distributed with the theme. You can fork the theme or copy the sources from here. I'm afraid I can't assist you in getting this running with my limited time. Probably best to start with a fork and work your way inside.

[CSL-Dev]

Have you found any way to implement this?

[carried-away]

I've been trying to get this implemented locally for over 9 months now. Failure is an upgrade.

[hantang]

I found there are complied javascript and css file already in the repo, see material/overrides/assets. Just copy it to your local site, update mkdocs.yml and create the search markdown file, it will works.

Here is my example: hantang.github.io/search.

Or see my post. Hope it helps.

[carried-away]

@hantang, thank you so much for your post. I was able to get it to work with your help.

Just curious, what do you think would be the best way to keep these icons up to date? For instance, if 200 icons get added next year, are you just going to keep checking back to see if the index was recompiled?

[hantang]

@carried-away The main problem is where the icons/emojis file resource store and who maintains.
In current schema, icons/emojis store in GitHub repos(mkdocs material repo and twemoji repo), and they both are much larger than doc files.

If you need newest, then update it. Just take it as new version release with mkdocs material theme or other dependencies.

I add this search in my blog, just for convenience.😀