Add option to specify icons set

README.md

@@ -128,6 +128,9 @@ easyMDE.value('New input for **EasyMDE**');
 - **element**: The DOM element for the TextArea to use. Defaults to the first TextArea on the page.
 - **forceSync**: If set to `true`, force text changes made in EasyMDE to be immediately stored in original text area. Defaults to `false`.
 - **hideIcons**: An array of icon names to hide. Can be used to hide specific icons shown by default without completely customizing the toolbar.
+- **iconsSet**: the icons set to use. Currently supported icons set are:
+  - `fa`: [Font-Awesome icons](https://fontawesome.com/icons) (default);
+  - `material`: [Material Design icons](https://material.io/tools/icons).
 - **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
 - **initialValue**: If set, will customize the initial value of the editor.
 - **insertTexts**: Customize how certain buttons that insert text behave. Takes an array with two elements. The first element will be the text inserted before the cursor or highlight, and the second element will be inserted after. For example, this is the default link value: `["[", "](http://)"]`.

src/css/easymde.css

@@ -151,29 +151,38 @@
 
 .editor-toolbar button:after {
     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-    font-size: 65%;
     vertical-align: text-bottom;
     position: relative;
+}
+
+.editor-toolbar button.fa:after {
+    font-size: 75%;
     top: 2px;
 }
 
-.editor-toolbar button.heading-1:after {
+.editor-toolbar button.material-icons:after {
+    font-size: 50%;
+    top: -2px;
+    margin-left: -8px;
+}
+
+.editor-toolbar button.header-1:after {
     content: "1";
 }
 
-.editor-toolbar button.heading-2:after {
+.editor-toolbar button.header-2:after {
     content: "2";
 }
 
-.editor-toolbar button.heading-3:after {
+.editor-toolbar button.header-3:after {
     content: "3";
 }
 
-.editor-toolbar button.heading-bigger:after {
+.editor-toolbar button.header-bigger:after {
     content: "▲";
 }
 
-.editor-toolbar button.heading-smaller:after {
+.editor-toolbar button.header-smaller:after {
     content: "▼";
 }