Add support for Material Design Icons

[Dobli]

I am currently adapting the style of silverbullet to my tastes, which is quite easy with the powerful features it provides regarding styling. As I tried to create an adaptive mobile view, I noticed the selection of icons in the feather icon pack lacks a few essentials regarding text formatting e.g. strike-through, numbered list or indent icons. I therefore added support for Material Design Icons using the md module from react_icons. As the usage is essentially the same as with feather icons the code changes are minimal. The Material Design icon components start with Md and as such never conflict with the already present feather icons. They can be referenced the same way using kebab style in settings just with the md- prefix e.g. md-home.

Here is an example in desktop view:

And here one in mobile view placing the actions in a scrollable list at the bottom (using custom css):

[daydaya]

This looks very useful, can’t wait 😄

[zefhemel]

I like this, but here's my concern:

On the main branch, the built client.js file is 2.1MB (already large)

On this branch the client.js becomes 3.9M (check dist_client_bundle/.client/client.js after deno task build)

This is quite a lot for just a few icons. Do you see other ways of achieving a similar result, or to reduce this size?

[Dobli]

You are right, double the size for a few more icons seems unreasonable. I will check if I can find a leaner way. I guess maybe using a smaller icon set that contains editor related icons could work. Or maybe a reduced list of icons to import instead of importing all is enough. I will try that later.

[Dobli]

Okay I just updated it. Instead of importing all icons I created a filtered export at web/filtered_material_icons.ts with a first selection of icons (mainly the ones from the screenshots). As the bundler only packages these, the file size is now about the same as before and users can still define which to use from settings. As this approach is very generic we could also use it to mix and match further icons sets, e.g. it could be applied to the feather icons to reduce the bundle size a little.

[zefhemel]

Excellent!