diff --git a/docs/index.html b/docs/index.html
index c33ef44c3..49bf2fef5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -18,6 +18,7 @@
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet">
     <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.min.js"></script> -->
     <script src="http://localhost:9000/mermaid.js"></script>
     <script>
@@ -49,6 +50,20 @@
       .markdown-section {
         max-width: 1200px;
       }
+       .urgent rect,.urgent path, .urgent text {
+        fill: rgba(255, 63, 0, 1) !important;
+        stroke: white
+        color: white;
+      }
+      .urgent i, .urgent text {
+        fill: white !important;
+        color: white !important;
+      }
+      .large {
+        font-size: 20px !important;
+        font-weight: 900 !important;
+      }
+
     </style>
   </head>
   <body>
diff --git a/docs/mindmap.md b/docs/mindmap.md
index a864bf15b..0b8a46ae9 100644
--- a/docs/mindmap.md
+++ b/docs/mindmap.md
@@ -72,9 +72,44 @@ mindmap
 
 ```mermaid-example
 mindmap
-    id((I am a rounded square))
+    id((I am a circle))
 ```
 
+### Default
+
+```mermaid-example
+mindmap
+    I am the default shape
+```
+
+More shapes will be added, beginning with the shapes available in flowcharts.
+
+# Icons and classes
+
+## icons
+As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. *This is not something a diagram author can do but has to be done with the site administrator or the integrator*. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parethesis like in the following example where icons for material design and fontwaresome 4. is displayed. The intention is that this approach should be used for all diagrams supporting icons. **Expermental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
+
+```mermaid-example
+mindmap
+    Root
+        A
+        ::icon(fa fa-book)
+        B(B)
+        ::icon(mdi mdi-skull-outline)
+```
+## Classes
+
+Again the synax for adding classes is similar to flowcharts and you can add classes using a tripple colon following a numver of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text whiet and large increasing the font size:
+```mermaid-example
+mindmap
+    Root
+        A[A]
+        :::urgent large
+        B(B)
+        C
+```
+*These classes needs top be supplied by the site administrator.*
+
 ## Unclear indentation
 The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can se how the calculations are performed. Let us start with placing C with a smaller indentation than `B`but larger then `A`.
 
