kuppayam 0.1.39 → 0.2.0.pre.materialize

data/app/controllers/kuppayam/base_controller.rb

@@ -4,12 +4,14 @@ module Kuppayam
     protect_from_forgery with: :null_session
     rescue_from ActionController::InvalidAuthenticityToken, :with => :handle_invalid_authenticity_token
     
-    layout 'kuppayam/admin'
-
+    # Choose the theme and set one of the following in your inherited controllers 
+    # layout 'kuppayam/xenon/admin'
+    # layout 'kuppayam/materialize/admin'
+    
     before_action :get_nested_resource_objects
-    before_action :set_locale, :stylesheet_filename, :javascript_filename,
-                          :set_default_title, :set_navs, :parse_pagination_params,
-                          :configure_filters, :configure_notification, :configure_breadcrumbs
+    before_action :stylesheet_filename, :javascript_filename
+    before_action :set_locale, :set_default_title, :set_navs, :parse_pagination_params,
+                  :configure_filters, :configure_notification, :configure_breadcrumbs
 
 
     include ParamsParserHelper
@@ -56,15 +58,17 @@ module Kuppayam
     end
 
     def stylesheet_filename
-      @stylesheet_filename = "kuppayam"
+      # @stylesheet_filename = "kuppayam-xenon"
+      @stylesheet_filename = "kuppayam-materialize"
     end
 
     def javascript_filename
-      @javascript_filename = "kuppayam"
+      # @javascript_filename = "kuppayam-xenon"
+      @javascript_filename = "kuppayam-materialize"
     end
 
     def set_default_title
-      set_title("Kuppayam - Dress up in no time!")
+      set_title("Kuppayam - Xenon Theme - Dress up in no time!")
     end
 
     def set_navs

data/app/controllers/kuppayam/images_controller.rb

@@ -36,7 +36,7 @@ module Kuppayam
       # @image.image_type = @image_class.name
       @image.save if @image.valid?
       set_flash_message("Image has been created successfully", :success)
-      render layout: "kuppayam/image_upload"
+      render layout: "kuppayam/xenon/image_upload"
     end
 
     def update
@@ -45,7 +45,7 @@ module Kuppayam
       @image.image = params[:image]
       @image.save
       set_flash_message("Image has been updated successfully", :success)
-      render layout: "kuppayam/image_upload"
+      render layout: "kuppayam/xenon/image_upload"
     end
 
     def crop
@@ -54,7 +54,7 @@ module Kuppayam
       @image.image = params[:image]
       @image.save
       set_flash_message("Image has been cropped successfully", :success)
-      render layout: "kuppayam/image_upload"
+      render layout: "kuppayam/xenon/image_upload"
     end
 
     def destroy
@@ -122,8 +122,8 @@ module Kuppayam
         icon: "fa-photo",
         description: "Listing all Images",
         links: [
-                  {name: "Home", link: root_path, icon: 'fa-home'}, 
-                  {name: "Manage Images", link: images_path, icon: 'fa-photo', active: true}
+                  #{name: "Home", link: root_path, icon: 'fa-home'}, 
+                  #{name: "Manage Images", link: images_path, icon: 'fa-photo', active: true}
                 ]
       }
     end

data/app/controllers/kuppayam/materialize_controller.rb

@@ -0,0 +1,7 @@
+module Kuppayam
+  class MaterializeController < Kuppayam::BaseController
+
+  	layout "kuppayam/materialize/admin"
+    
+  end
+end

data/app/helpers/render_helper.rb

@@ -77,4 +77,14 @@ module RenderHelper
       }
     end
   end
+
+  def render_index
+    respond_to do |format|
+      format.html {}
+      format.js  { 
+        js_view_path = @resource_options && @resource_options[:js_view_path] ? "#{@resource_options[:js_view_path]}/index" : :row 
+        render js_view_path
+      }
+    end
+  end
 end

data/app/helpers/resource_helper.rb

@@ -186,6 +186,9 @@ module ResourceHelper
       page_title: "Page Title | Kuppayam",
       current_nav: "kuppayam/current_page",
 
+      # Feature
+      feature_name: "Feature Name",
+
       # Resource Names
       class: default_class,
       collection_name: default_collection_name,
@@ -200,6 +203,10 @@ module ResourceHelper
       form_model_size: :generic,
       show_model_size: :large,
 
+      # Rendering Paths
+      view_path: "/path/to/partials",
+      js_view_path: "/kuppayam/workflows/default",
+
       # Layout can be table or feed
       # table uses html tables and feed uses div based boxes
       layout: :table,
@@ -225,10 +232,6 @@ module ResourceHelper
       # Peacock opens show and form partials in large popup where as Parrot opens it in small
       # Both Peacock and Parrot expect table based layout and will reload a single row after create / update
 
-      # Rendering Paths
-      view_path: "/path/to/partials",
-      js_view_path: "/kuppayam/workflows/default",
-
       # Additional Configurations
       load_rich_text_editor: false,
       tagsinput: false
@@ -244,6 +247,28 @@ module ResourceHelper
     set_nav(@resource_options[:current_nav])
   end
 
+  def close_form_modal
+    # Closing the modal if it is opened
+    if @resource_options[:form_model_size] == :generic
+      "closeGenericModal();"
+    elsif @resource_options[:form_model_size] == :large
+      "closeLargeModal();"
+    else
+      "closeGenericModal();"
+    end
+  end
+
+  def close_show_modal
+    # Closing the modal if it is opened
+    if @resource_options[:show_model_size] == :generic
+      "closeGenericModal();"
+    elsif @resource_options[:show_model_size] == :large
+      "closeLargeModal();"
+    else
+      "closeGenericModal();"
+    end
+  end
+
   def prepare_query
     @relation = @resource_options[:class].where("")
     if params[:query]
@@ -271,10 +296,12 @@ module ResourceHelper
   end
 
   def save_resource
+    before_resource_validation
     if @r_object.valid?
       @r_object.save
       get_collections if @resource_options[:get_collections_after_save_resource]
       set_flash_message(I18n.translate("forms.save", item: default_item_name.titleize), :success) 
+      after_resource_is_saved
     end
     set_resource_notification(@r_object)
     action_name = params[:action].to_s == "create" ? "new" : "edit"
@@ -282,4 +309,10 @@ module ResourceHelper
     render_or_redirect(@r_object.errors.any?, url, action_name)
   end
 
+  def before_resource_validation
+  end
+
+  def after_resource_is_saved
+  end
+
 end

data/app/views/kuppayam/images/_row.html.erb

@@ -56,9 +56,9 @@
 
   <td class="action-links" style="width:10%">
 
-    <%= link_to raw("<i class=\"linecons-pencil\"></i> Edit Event"), edit_link, :remote=>true, class: "edit" %>
+    <%= link_to raw("<i class=\"fa-pencil\"></i> Edit Event"), edit_link, :remote=>true, class: "edit" %>
 
-    <%= link_to raw("<i class=\"linecons-trash\"></i> Delete"), delete_link, method: :delete, role: "menuitem", tabindex: "-1", data: { confirm: 'Are you sure?' }, :remote=>true, class: "delete" %>
+    <%= link_to raw("<i class=\"fa-trash\"></i> Delete"), delete_link, method: :delete, role: "menuitem", tabindex: "-1", data: { confirm: 'Are you sure?' }, :remote=>true, class: "delete" %>
 
   </td>
 

data/app/views/kuppayam/materialize/icons.html.erb

@@ -0,0 +1,751 @@
+<section>
+  <ul style="font-size:24px;list-style: none;">
+
+    <li class="m-20"> <i class="md md-account-circle mr-10"></i> - md-account-circle </li>
+    <li class="m-20"> <i class="md md-3d-rotation mr-10"></i> - md-3d-rotation </li>
+    <li class="m-20"> <i class="md md-accessibility mr-10"></i> - md-accessibility </li>
+    <li class="m-20"> <i class="md md-account-balance mr-10"></i> - md-account-balance </li>
+    <li class="m-20"> <i class="md md-account-balance-wallet mr-10"></i> - md-account-balance-wallet </li>
+    <li class="m-20"> <i class="md md-account-box mr-10"></i> - md-account-box </li>
+    <li class="m-20"> <i class="md md-account-child mr-10"></i> - md-account-child </li>
+    <li class="m-20"> <i class="md md-account-circle mr-10"></i> - md-account-circle </li>
+    <li class="m-20"> <i class="md md-add-shopping-cart mr-10"></i> - md-add-shopping-cart </li>
+    <li class="m-20"> <i class="md md-alarm mr-10"></i> - md-alarm </li>
+    <li class="m-20"> <i class="md md-alarm-add mr-10"></i> - md-alarm-add </li>
+    <li class="m-20"> <i class="md md-alarm-off mr-10"></i> - md-alarm-off </li>
+    <li class="m-20"> <i class="md md-alarm-on mr-10"></i> - md-alarm-on </li>
+    <li class="m-20"> <i class="md md-android mr-10"></i> - md-android </li>
+    <li class="m-20"> <i class="md md-announcement mr-10"></i> - md-announcement </li>
+    <li class="m-20"> <i class="md md-aspect-ratio mr-10"></i> - md-aspect-ratio </li>
+    <li class="m-20"> <i class="md md-assessment mr-10"></i> - md-assessment </li>
+    <li class="m-20"> <i class="md md-assignment mr-10"></i> - md-assignment </li>
+    <li class="m-20"> <i class="md md-assignment-ind mr-10"></i> - md-assignment-ind </li>
+    <li class="m-20"> <i class="md md-assignment-late mr-10"></i> - md-assignment-late </li>
+    <li class="m-20"> <i class="md md-assignment-return mr-10"></i> - md-assignment-return </li>
+    <li class="m-20"> <i class="md md-assignment-returned mr-10"></i> - md-assignment-returned </li>
+    <li class="m-20"> <i class="md md-assignment-turned-in mr-10"></i> - md-assignment-turned-in </li>
+    <li class="m-20"> <i class="md md-autorenew mr-10"></i> - md-autorenew </li>
+    <li class="m-20"> <i class="md md-backup mr-10"></i> - md-backup </li>
+    <li class="m-20"> <i class="md md-book mr-10"></i> - md-book </li>
+    <li class="m-20"> <i class="md md-bookmark mr-10"></i> - md-bookmark </li>
+    <li class="m-20"> <i class="md md-bookmark-outline mr-10"></i> - md-bookmark-outline </li>
+    <li class="m-20"> <i class="md md-bug-report mr-10"></i> - md-bug-report </li>
+    <li class="m-20"> <i class="md md-cached mr-10"></i> - md-cached </li>
+    <li class="m-20"> <i class="md md-class mr-10"></i> - md-class </li>
+    <li class="m-20"> <i class="md md-credit-card mr-10"></i> - md-credit-card </li>
+    <li class="m-20"> <i class="md md-dashboard mr-10"></i> - md-dashboard </li>
+    <li class="m-20"> <i class="md md-delete mr-10"></i> - md-delete </li>
+    <li class="m-20"> <i class="md md-description mr-10"></i> - md-description </li>
+    <li class="m-20"> <i class="md md-dns mr-10"></i> - md-dns </li>
+    <li class="m-20"> <i class="md md-done mr-10"></i> - md-done </li>
+    <li class="m-20"> <i class="md md-done-all mr-10"></i> - md-done-all </li>
+    <li class="m-20"> <i class="md md-event mr-10"></i> - md-event </li>
+    <li class="m-20"> <i class="md md-exit-to-app mr-10"></i> - md-exit-to-app </li>
+    <li class="m-20"> <i class="md md-explore mr-10"></i> - md-explore </li>
+    <li class="m-20"> <i class="md md-extension mr-10"></i> - md-extension </li>
+    <li class="m-20"> <i class="md md-face-unlock mr-10"></i> - md-face-unlock </li>
+    <li class="m-20"> <i class="md md-favorite mr-10"></i> - md-favorite </li>
+    <li class="m-20"> <i class="md md-favorite-outline mr-10"></i> - md-favorite-outline </li>
+    <li class="m-20"> <i class="md md-find-in-page mr-10"></i> - md-find-in-page </li>
+    <li class="m-20"> <i class="md md-find-replace mr-10"></i> - md-find-replace </li>
+    <li class="m-20"> <i class="md md-flip-to-back mr-10"></i> - md-flip-to-back </li>
+    <li class="m-20"> <i class="md md-flip-to-front mr-10"></i> - md-flip-to-front </li>
+    <li class="m-20"> <i class="md md-get-app mr-10"></i> - md-get-app </li>
+    <li class="m-20"> <i class="md md-grade mr-10"></i> - md-grade </li>
+    <li class="m-20"> <i class="md md-group-work mr-10"></i> - md-group-work </li>
+    <li class="m-20"> <i class="md md-help mr-10"></i> - md-help </li>
+    <li class="m-20"> <i class="md md-highlight-remove mr-10"></i> - md-highlight-remove </li>
+    <li class="m-20"> <i class="md md-history mr-10"></i> - md-history </li>
+    <li class="m-20"> <i class="md md-home mr-10"></i> - md-home </li>
+    <li class="m-20"> <i class="md md-https mr-10"></i> - md-https </li>
+    <li class="m-20"> <i class="md md-info mr-10"></i> - md-info </li>
+    <li class="m-20"> <i class="md md-info-outline mr-10"></i> - md-info-outline </li>
+    <li class="m-20"> <i class="md md-input mr-10"></i> - md-input </li>
+    <li class="m-20"> <i class="md md-invert-colors mr-10"></i> - md-invert-colors </li>
+    <li class="m-20"> <i class="md md-label mr-10"></i> - md-label </li>
+    <li class="m-20"> <i class="md md-label-outline mr-10"></i> - md-label-outline </li>
+    <li class="m-20"> <i class="md md-language mr-10"></i> - md-language </li>
+    <li class="m-20"> <i class="md md-launch mr-10"></i> - md-launch </li>
+    <li class="m-20"> <i class="md md-list mr-10"></i> - md-list </li>
+    <li class="m-20"> <i class="md md-lock mr-10"></i> - md-lock </li>
+    <li class="m-20"> <i class="md md-lock-open mr-10"></i> - md-lock-open </li>
+    <li class="m-20"> <i class="md md-lock-outline mr-10"></i> - md-lock-outline </li>
+    <li class="m-20"> <i class="md md-loyalty mr-10"></i> - md-loyalty </li>
+    <li class="m-20"> <i class="md md-markunread-mailbox mr-10"></i> - md-markunread-mailbox </li>
+    <li class="m-20"> <i class="md md-note-add mr-10"></i> - md-note-add </li>
+    <li class="m-20"> <i class="md md-open-in-browser mr-10"></i> - md-open-in-browser </li>
+    <li class="m-20"> <i class="md md-open-in-new mr-10"></i> - md-open-in-new </li>
+    <li class="m-20"> <i class="md md-open-with mr-10"></i> - md-open-with </li>
+    <li class="m-20"> <i class="md md-pageview mr-10"></i> - md-pageview </li>
+    <li class="m-20"> <i class="md md-payment mr-10"></i> - md-payment </li>
+    <li class="m-20"> <i class="md md-perm-camera-mic mr-10"></i> - md-perm-camera-mic </li>
+    <li class="m-20"> <i class="md md-perm-contact-cal mr-10"></i> - md-perm-contact-cal </li>
+    <li class="m-20"> <i class="md md-perm-data-setting mr-10"></i> - md-perm-data-setting </li>
+    <li class="m-20"> <i class="md md-perm-device-info mr-10"></i> - md-perm-device-info </li>
+    <li class="m-20"> <i class="md md-perm-identity mr-10"></i> - md-perm-identity </li>
+    <li class="m-20"> <i class="md md-perm-media mr-10"></i> - md-perm-media </li>
+    <li class="m-20"> <i class="md md-perm-phone-msg mr-10"></i> - md-perm-phone-msg </li>
+    <li class="m-20"> <i class="md md-perm-scan-wifi mr-10"></i> - md-perm-scan-wifi </li>
+    <li class="m-20"> <i class="md md-picture-in-picture mr-10"></i> - md-picture-in-picture </li>
+    <li class="m-20"> <i class="md md-polymer mr-10"></i> - md-polymer </li>
+    <li class="m-20"> <i class="md md-print mr-10"></i> - md-print </li>
+    <li class="m-20"> <i class="md md-query-builder mr-10"></i> - md-query-builder </li>
+    <li class="m-20"> <i class="md md-question-answer mr-10"></i> - md-question-answer </li>
+    <li class="m-20"> <i class="md md-receipt mr-10"></i> - md-receipt </li>
+    <li class="m-20"> <i class="md md-redeem mr-10"></i> - md-redeem </li>
+    <li class="m-20"> <i class="md md-report-problem mr-10"></i> - md-report-problem </li>
+    <li class="m-20"> <i class="md md-restore mr-10"></i> - md-restore </li>
+    <li class="m-20"> <i class="md md-room mr-10"></i> - md-room </li>
+    <li class="m-20"> <i class="md md-schedule mr-10"></i> - md-schedule </li>
+    <li class="m-20"> <i class="md md-search mr-10"></i> - md-search </li>
+    <li class="m-20"> <i class="md md-settings mr-10"></i> - md-settings </li>
+    <li class="m-20"> <i class="md md-settings-applications mr-10"></i> - md-settings-applications </li>
+    <li class="m-20"> <i class="md md-settings-backup-restore mr-10"></i> - md-settings-backup-restore </li>
+    <li class="m-20"> <i class="md md-settings-bluetooth mr-10"></i> - md-settings-bluetooth </li>
+    <li class="m-20"> <i class="md md-settings-cell mr-10"></i> - md-settings-cell </li>
+    <li class="m-20"> <i class="md md-settings-display mr-10"></i> - md-settings-display </li>
+    <li class="m-20"> <i class="md md-settings-ethernet mr-10"></i> - md-settings-ethernet </li>
+    <li class="m-20"> <i class="md md-settings-input-antenna mr-10"></i> - md-settings-input-antenna </li>
+    <li class="m-20"> <i class="md md-settings-input-component mr-10"></i> - md-settings-input-component </li>
+    <li class="m-20"> <i class="md md-settings-input-composite mr-10"></i> - md-settings-input-composite </li>
+    <li class="m-20"> <i class="md md-settings-input-hdmi mr-10"></i> - md-settings-input-hdmi </li>
+    <li class="m-20"> <i class="md md-settings-input-svideo mr-10"></i> - md-settings-input-svideo </li>
+    <li class="m-20"> <i class="md md-settings-overscan mr-10"></i> - md-settings-overscan </li>
+    <li class="m-20"> <i class="md md-settings-phone mr-10"></i> - md-settings-phone </li>
+    <li class="m-20"> <i class="md md-settings-power mr-10"></i> - md-settings-power </li>
+    <li class="m-20"> <i class="md md-settings-remote mr-10"></i> - md-settings-remote </li>
+    <li class="m-20"> <i class="md md-settings-voice mr-10"></i> - md-settings-voice </li>
+    <li class="m-20"> <i class="md md-shop mr-10"></i> - md-shop </li>
+    <li class="m-20"> <i class="md md-shopping-basket mr-10"></i> - md-shopping-basket </li>
+    <li class="m-20"> <i class="md md-shopping-cart mr-10"></i> - md-shopping-cart </li>
+    <li class="m-20"> <i class="md md-shop-two mr-10"></i> - md-shop-two </li>
+    <li class="m-20"> <i class="md md-speaker-notes mr-10"></i> - md-speaker-notes </li>
+    <li class="m-20"> <i class="md md-spellcheck mr-10"></i> - md-spellcheck </li>
+    <li class="m-20"> <i class="md md-star-rate mr-10"></i> - md-star-rate </li>
+    <li class="m-20"> <i class="md md-stars mr-10"></i> - md-stars </li>
+    <li class="m-20"> <i class="md md-store mr-10"></i> - md-store </li>
+    <li class="m-20"> <i class="md md-subject mr-10"></i> - md-subject </li>
+    <li class="m-20"> <i class="md md-swap-horiz mr-10"></i> - md-swap-horiz </li>
+    <li class="m-20"> <i class="md md-swap-vert mr-10"></i> - md-swap-vert </li>
+    <li class="m-20"> <i class="md md-swap-vert-circle mr-10"></i> - md-swap-vert-circle </li>
+    <li class="m-20"> <i class="md md-system-update-tv mr-10"></i> - md-system-update-tv </li>
+    <li class="m-20"> <i class="md md-tab mr-10"></i> - md-tab </li>
+    <li class="m-20"> <i class="md md-tab-unselected mr-10"></i> - md-tab-unselected </li>
+    <li class="m-20"> <i class="md md-theaters mr-10"></i> - md-theaters </li>
+    <li class="m-20"> <i class="md md-thumb-down mr-10"></i> - md-thumb-down </li>
+    <li class="m-20"> <i class="md md-thumbs-up-down mr-10"></i> - md-thumbs-up-down </li>
+    <li class="m-20"> <i class="md md-thumb-up mr-10"></i> - md-thumb-up </li>
+    <li class="m-20"> <i class="md md-toc mr-10"></i> - md-toc </li>
+    <li class="m-20"> <i class="md md-today mr-10"></i> - md-today </li>
+    <li class="m-20"> <i class="md md-track-changes mr-10"></i> - md-track-changes </li>
+    <li class="m-20"> <i class="md md-translate mr-10"></i> - md-translate </li>
+    <li class="m-20"> <i class="md md-trending-down mr-10"></i> - md-trending-down </li>
+    <li class="m-20"> <i class="md md-trending-neutral mr-10"></i> - md-trending-neutral </li>
+    <li class="m-20"> <i class="md md-trending-up mr-10"></i> - md-trending-up </li>
+    <li class="m-20"> <i class="md md-turned-in mr-10"></i> - md-turned-in </li>
+    <li class="m-20"> <i class="md md-turned-in-not mr-10"></i> - md-turned-in-not </li>
+    <li class="m-20"> <i class="md md-verified-user mr-10"></i> - md-verified-user </li>
+    <li class="m-20"> <i class="md md-view-agenda mr-10"></i> - md-view-agenda </li>
+    <li class="m-20"> <i class="md md-view-array mr-10"></i> - md-view-array </li>
+    <li class="m-20"> <i class="md md-view-carousel mr-10"></i> - md-view-carousel </li>
+    <li class="m-20"> <i class="md md-view-column mr-10"></i> - md-view-column </li>
+    <li class="m-20"> <i class="md md-view-day mr-10"></i> - md-view-day </li>
+    <li class="m-20"> <i class="md md-view-headline mr-10"></i> - md-view-headline </li>
+    <li class="m-20"> <i class="md md-view-list mr-10"></i> - md-view-list </li>
+    <li class="m-20"> <i class="md md-view-module mr-10"></i> - md-view-module </li>
+    <li class="m-20"> <i class="md md-view-quilt mr-10"></i> - md-view-quilt </li>
+    <li class="m-20"> <i class="md md-view-stream mr-10"></i> - md-view-stream </li>
+    <li class="m-20"> <i class="md md-view-week mr-10"></i> - md-view-week </li>
+    <li class="m-20"> <i class="md md-visibility mr-10"></i> - md-visibility </li>
+    <li class="m-20"> <i class="md md-visibility-off mr-10"></i> - md-visibility-off </li>
+    <li class="m-20"> <i class="md md-wallet-giftcard mr-10"></i> - md-wallet-giftcard </li>
+    <li class="m-20"> <i class="md md-wallet-membership mr-10"></i> - md-wallet-membership </li>
+    <li class="m-20"> <i class="md md-wallet-travel mr-10"></i> - md-wallet-travel </li>
+    <li class="m-20"> <i class="md md-work mr-10"></i> - md-work </li>
+    <li class="m-20"> <i class="md md-error mr-10"></i> - md-error </li>
+    <li class="m-20"> <i class="md md-warning mr-10"></i> - md-warning </li>
+    <li class="m-20"> <i class="md md-album mr-10"></i> - md-album </li>
+    <li class="m-20"> <i class="md md-av-timer mr-10"></i> - md-av-timer </li>
+    <li class="m-20"> <i class="md md-closed-caption mr-10"></i> - md-closed-caption </li>
+    <li class="m-20"> <i class="md md-equalizer mr-10"></i> - md-equalizer </li>
+    <li class="m-20"> <i class="md md-explicit mr-10"></i> - md-explicit </li>
+    <li class="m-20"> <i class="md md-fast-forward mr-10"></i> - md-fast-forward </li>
+    <li class="m-20"> <i class="md md-fast-rewind mr-10"></i> - md-fast-rewind </li>
+    <li class="m-20"> <i class="md md-games mr-10"></i> - md-games </li>
+    <li class="m-20"> <i class="md md-hearing mr-10"></i> - md-hearing </li>
+    <li class="m-20"> <i class="md md-high-quality mr-10"></i> - md-high-quality </li>
+    <li class="m-20"> <i class="md md-loop mr-10"></i> - md-loop </li>
+    <li class="m-20"> <i class="md md-mic mr-10"></i> - md-mic </li>
+    <li class="m-20"> <i class="md md-mic-none mr-10"></i> - md-mic-none </li>
+    <li class="m-20"> <i class="md md-mic-off mr-10"></i> - md-mic-off </li>
+    <li class="m-20"> <i class="md md-movie mr-10"></i> - md-movie </li>
+    <li class="m-20"> <i class="md md-my-library-add mr-10"></i> - md-my-library-add </li>
+    <li class="m-20"> <i class="md md-my-library-books mr-10"></i> - md-my-library-books </li>
+    <li class="m-20"> <i class="md md-my-library-music mr-10"></i> - md-my-library-music </li>
+    <li class="m-20"> <i class="md md-new-releases mr-10"></i> - md-new-releases </li>
+    <li class="m-20"> <i class="md md-not-interested mr-10"></i> - md-not-interested </li>
+    <li class="m-20"> <i class="md md-pause mr-10"></i> - md-pause </li>
+    <li class="m-20"> <i class="md md-pause-circle-fill mr-10"></i> - md-pause-circle-fill </li>
+    <li class="m-20"> <i class="md md-pause-circle-outline mr-10"></i> - md-pause-circle-outline </li>
+    <li class="m-20"> <i class="md md-play-arrow mr-10"></i> - md-play-arrow </li>
+    <li class="m-20"> <i class="md md-play-circle-fill mr-10"></i> - md-play-circle-fill </li>
+    <li class="m-20"> <i class="md md-play-circle-outline mr-10"></i> - md-play-circle-outline </li>
+    <li class="m-20"> <i class="md md-playlist-add mr-10"></i> - md-playlist-add </li>
+    <li class="m-20"> <i class="md md-play-shopping-bag mr-10"></i> - md-play-shopping-bag </li>
+    <li class="m-20"> <i class="md md-queue mr-10"></i> - md-queue </li>
+    <li class="m-20"> <i class="md md-queue-music mr-10"></i> - md-queue-music </li>
+    <li class="m-20"> <i class="md md-radio mr-10"></i> - md-radio </li>
+    <li class="m-20"> <i class="md md-recent-actors mr-10"></i> - md-recent-actors </li>
+    <li class="m-20"> <i class="md md-repeat mr-10"></i> - md-repeat </li>
+    <li class="m-20"> <i class="md md-repeat-one mr-10"></i> - md-repeat-one </li>
+    <li class="m-20"> <i class="md md-replay mr-10"></i> - md-replay </li>
+    <li class="m-20"> <i class="md md-shuffle mr-10"></i> - md-shuffle </li>
+    <li class="m-20"> <i class="md md-skip-next mr-10"></i> - md-skip-next </li>
+    <li class="m-20"> <i class="md md-skip-previous mr-10"></i> - md-skip-previous </li>
+    <li class="m-20"> <i class="md md-snooze mr-10"></i> - md-snooze </li>
+    <li class="m-20"> <i class="md md-stop mr-10"></i> - md-stop </li>
+    <li class="m-20"> <i class="md md-subtitles mr-10"></i> - md-subtitles </li>
+    <li class="m-20"> <i class="md md-surround-sound mr-10"></i> - md-surround-sound </li>
+    <li class="m-20"> <i class="md md-videocam mr-10"></i> - md-videocam </li>
+    <li class="m-20"> <i class="md md-videocam-off mr-10"></i> - md-videocam-off </li>
+    <li class="m-20"> <i class="md md-video-collection mr-10"></i> - md-video-collection </li>
+    <li class="m-20"> <i class="md md-volume-down mr-10"></i> - md-volume-down </li>
+    <li class="m-20"> <i class="md md-volume-mute mr-10"></i> - md-volume-mute </li>
+    <li class="m-20"> <i class="md md-volume-off mr-10"></i> - md-volume-off </li>
+    <li class="m-20"> <i class="md md-volume-up mr-10"></i> - md-volume-up </li>
+    <li class="m-20"> <i class="md md-web mr-10"></i> - md-web </li>
+    <li class="m-20"> <i class="md md-business mr-10"></i> - md-business </li>
+    <li class="m-20"> <i class="md md-call mr-10"></i> - md-call </li>
+    <li class="m-20"> <i class="md md-call-end mr-10"></i> - md-call-end </li>
+    <li class="m-20"> <i class="md md-call-made mr-10"></i> - md-call-made </li>
+    <li class="m-20"> <i class="md md-call-merge mr-10"></i> - md-call-merge </li>
+    <li class="m-20"> <i class="md md-call-missed mr-10"></i> - md-call-missed </li>
+    <li class="m-20"> <i class="md md-call-received mr-10"></i> - md-call-received </li>
+    <li class="m-20"> <i class="md md-call-split mr-10"></i> - md-call-split </li>
+    <li class="m-20"> <i class="md md-chat mr-10"></i> - md-chat </li>
+    <li class="m-20"> <i class="md md-clear-all mr-10"></i> - md-clear-all </li>
+    <li class="m-20"> <i class="md md-comment mr-10"></i> - md-comment </li>
+    <li class="m-20"> <i class="md md-contacts mr-10"></i> - md-contacts </li>
+    <li class="m-20"> <i class="md md-dialer-sip mr-10"></i> - md-dialer-sip </li>
+    <li class="m-20"> <i class="md md-dialpad mr-10"></i> - md-dialpad </li>
+    <li class="m-20"> <i class="md md-dnd-on mr-10"></i> - md-dnd-on </li>
+    <li class="m-20"> <i class="md md-email mr-10"></i> - md-email </li>
+    <li class="m-20"> <i class="md md-forum mr-10"></i> - md-forum </li>
+    <li class="m-20"> <i class="md md-import-export mr-10"></i> - md-import-export </li>
+    <li class="m-20"> <i class="md md-invert-colors-off mr-10"></i> - md-invert-colors-off </li>
+    <li class="m-20"> <i class="md md-invert-colors-on mr-10"></i> - md-invert-colors-on </li>
+    <li class="m-20"> <i class="md md-live-help mr-10"></i> - md-live-help </li>
+    <li class="m-20"> <i class="md md-location-off mr-10"></i> - md-location-off </li>
+    <li class="m-20"> <i class="md md-location-on mr-10"></i> - md-location-on </li>
+    <li class="m-20"> <i class="md md-message mr-10"></i> - md-message </li>
+    <li class="m-20"> <i class="md md-messenger mr-10"></i> - md-messenger </li>
+    <li class="m-20"> <i class="md md-no-sim mr-10"></i> - md-no-sim </li>
+    <li class="m-20"> <i class="md md-phone mr-10"></i> - md-phone </li>
+    <li class="m-20"> <i class="md md-portable-wifi-off mr-10"></i> - md-portable-wifi-off </li>
+    <li class="m-20"> <i class="md md-quick-contacts-dialer mr-10"></i> - md-quick-contacts-dialer </li>
+    <li class="m-20"> <i class="md md-quick-contacts-mail mr-10"></i> - md-quick-contacts-mail </li>
+    <li class="m-20"> <i class="md md-ring-volume mr-10"></i> - md-ring-volume </li>
+    <li class="m-20"> <i class="md md-stay-current-landscape mr-10"></i> - md-stay-current-landscape </li>
+    <li class="m-20"> <i class="md md-stay-current-portrait mr-10"></i> - md-stay-current-portrait </li>
+    <li class="m-20"> <i class="md md-stay-primary-landscape mr-10"></i> - md-stay-primary-landscape </li>
+    <li class="m-20"> <i class="md md-stay-primary-portrait mr-10"></i> - md-stay-primary-portrait </li>
+    <li class="m-20"> <i class="md md-swap-calls mr-10"></i> - md-swap-calls </li>
+    <li class="m-20"> <i class="md md-textsms mr-10"></i> - md-textsms </li>
+    <li class="m-20"> <i class="md md-voicemail mr-10"></i> - md-voicemail </li>
+    <li class="m-20"> <i class="md md-vpn-key mr-10"></i> - md-vpn-key </li>
+    <li class="m-20"> <i class="md md-add mr-10"></i> - md-add </li>
+    <li class="m-20"> <i class="md md-add-box mr-10"></i> - md-add-box </li>
+    <li class="m-20"> <i class="md md-add-circle mr-10"></i> - md-add-circle </li>
+    <li class="m-20"> <i class="md md-add-circle-outline mr-10"></i> - md-add-circle-outline </li>
+    <li class="m-20"> <i class="md md-archive mr-10"></i> - md-archive </li>
+    <li class="m-20"> <i class="md md-backspace mr-10"></i> - md-backspace </li>
+    <li class="m-20"> <i class="md md-block mr-10"></i> - md-block </li>
+    <li class="m-20"> <i class="md md-clear mr-10"></i> - md-clear </li>
+    <li class="m-20"> <i class="md md-content-copy mr-10"></i> - md-content-copy </li>
+    <li class="m-20"> <i class="md md-content-cut mr-10"></i> - md-content-cut </li>
+    <li class="m-20"> <i class="md md-content-paste mr-10"></i> - md-content-paste </li>
+    <li class="m-20"> <i class="md md-create mr-10"></i> - md-create </li>
+    <li class="m-20"> <i class="md md-drafts mr-10"></i> - md-drafts </li>
+    <li class="m-20"> <i class="md md-filter-list mr-10"></i> - md-filter-list </li>
+    <li class="m-20"> <i class="md md-flag mr-10"></i> - md-flag </li>
+    <li class="m-20"> <i class="md md-forward mr-10"></i> - md-forward </li>
+    <li class="m-20"> <i class="md md-gesture mr-10"></i> - md-gesture </li>
+    <li class="m-20"> <i class="md md-inbox mr-10"></i> - md-inbox </li>
+    <li class="m-20"> <i class="md md-link mr-10"></i> - md-link </li>
+    <li class="m-20"> <i class="md md-mail mr-10"></i> - md-mail </li>
+    <li class="m-20"> <i class="md md-markunread mr-10"></i> - md-markunread </li>
+    <li class="m-20"> <i class="md md-redo mr-10"></i> - md-redo </li>
+    <li class="m-20"> <i class="md md-remove mr-10"></i> - md-remove </li>
+    <li class="m-20"> <i class="md md-remove-circle mr-10"></i> - md-remove-circle </li>
+    <li class="m-20"> <i class="md md-remove-circle-outline mr-10"></i> - md-remove-circle-outline </li>
+    <li class="m-20"> <i class="md md-reply mr-10"></i> - md-reply </li>
+    <li class="m-20"> <i class="md md-reply-all mr-10"></i> - md-reply-all </li>
+    <li class="m-20"> <i class="md md-report mr-10"></i> - md-report </li>
+    <li class="m-20"> <i class="md md-save mr-10"></i> - md-save </li>
+    <li class="m-20"> <i class="md md-select-all mr-10"></i> - md-select-all </li>
+    <li class="m-20"> <i class="md md-send mr-10"></i> - md-send </li>
+    <li class="m-20"> <i class="md md-sort mr-10"></i> - md-sort </li>
+    <li class="m-20"> <i class="md md-text-format mr-10"></i> - md-text-format </li>
+    <li class="m-20"> <i class="md md-undo mr-10"></i> - md-undo </li>
+    <li class="m-20"> <i class="md md-access-alarm mr-10"></i> - md-access-alarm </li>
+    <li class="m-20"> <i class="md md-access-alarms mr-10"></i> - md-access-alarms </li>
+    <li class="m-20"> <i class="md md-access-time mr-10"></i> - md-access-time </li>
+    <li class="m-20"> <i class="md md-add-alarm mr-10"></i> - md-add-alarm </li>
+    <li class="m-20"> <i class="md md-airplanemode-off mr-10"></i> - md-airplanemode-off </li>
+    <li class="m-20"> <i class="md md-airplanemode-on mr-10"></i> - md-airplanemode-on </li>
+    <li class="m-20"> <i class="md md-battery-20 mr-10"></i> - md-battery-20 </li>
+    <li class="m-20"> <i class="md md-battery-30 mr-10"></i> - md-battery-30 </li>
+    <li class="m-20"> <i class="md md-battery-50 mr-10"></i> - md-battery-50 </li>
+    <li class="m-20"> <i class="md md-battery-60 mr-10"></i> - md-battery-60 </li>
+    <li class="m-20"> <i class="md md-battery-80 mr-10"></i> - md-battery-80 </li>
+    <li class="m-20"> <i class="md md-battery-90 mr-10"></i> - md-battery-90 </li>
+    <li class="m-20"> <i class="md md-battery-alert mr-10"></i> - md-battery-alert </li>
+    <li class="m-20"> <i class="md md-battery-charging-20 mr-10"></i> - md-battery-charging-20 </li>
+    <li class="m-20"> <i class="md md-battery-charging-30 mr-10"></i> - md-battery-charging-30 </li>
+    <li class="m-20"> <i class="md md-battery-charging-50 mr-10"></i> - md-battery-charging-50 </li>
+    <li class="m-20"> <i class="md md-battery-charging-60 mr-10"></i> - md-battery-charging-60 </li>
+    <li class="m-20"> <i class="md md-battery-charging-80 mr-10"></i> - md-battery-charging-80 </li>
+    <li class="m-20"> <i class="md md-battery-charging-90 mr-10"></i> - md-battery-charging-90 </li>
+    <li class="m-20"> <i class="md md-battery-charging-full mr-10"></i> - md-battery-charging-full </li>
+    <li class="m-20"> <i class="md md-battery-full mr-10"></i> - md-battery-full </li>
+    <li class="m-20"> <i class="md md-battery-std mr-10"></i> - md-battery-std </li>
+    <li class="m-20"> <i class="md md-battery-unknown mr-10"></i> - md-battery-unknown </li>
+    <li class="m-20"> <i class="md md-bluetooth mr-10"></i> - md-bluetooth </li>
+    <li class="m-20"> <i class="md md-bluetooth-connected mr-10"></i> - md-bluetooth-connected </li>
+    <li class="m-20"> <i class="md md-bluetooth-disabled mr-10"></i> - md-bluetooth-disabled </li>
+    <li class="m-20"> <i class="md md-bluetooth-searching mr-10"></i> - md-bluetooth-searching </li>
+    <li class="m-20"> <i class="md md-brightness-auto mr-10"></i> - md-brightness-auto </li>
+    <li class="m-20"> <i class="md md-brightness-high mr-10"></i> - md-brightness-high </li>
+    <li class="m-20"> <i class="md md-brightness-low mr-10"></i> - md-brightness-low </li>
+    <li class="m-20"> <i class="md md-brightness-medium mr-10"></i> - md-brightness-medium </li>
+    <li class="m-20"> <i class="md md-data-usage mr-10"></i> - md-data-usage </li>
+    <li class="m-20"> <i class="md md-developer-mode mr-10"></i> - md-developer-mode </li>
+    <li class="m-20"> <i class="md md-devices mr-10"></i> - md-devices </li>
+    <li class="m-20"> <i class="md md-dvr mr-10"></i> - md-dvr </li>
+    <li class="m-20"> <i class="md md-gps-fixed mr-10"></i> - md-gps-fixed </li>
+    <li class="m-20"> <i class="md md-gps-not-fixed mr-10"></i> - md-gps-not-fixed </li>
+    <li class="m-20"> <i class="md md-gps-off mr-10"></i> - md-gps-off </li>
+    <li class="m-20"> <i class="md md-location-disabled mr-10"></i> - md-location-disabled </li>
+    <li class="m-20"> <i class="md md-location-searching mr-10"></i> - md-location-searching </li>
+    <li class="m-20"> <i class="md md-multitrack-audio mr-10"></i> - md-multitrack-audio </li>
+    <li class="m-20"> <i class="md md-network-cell mr-10"></i> - md-network-cell </li>
+    <li class="m-20"> <i class="md md-network-wifi mr-10"></i> - md-network-wifi </li>
+    <li class="m-20"> <i class="md md-nfc mr-10"></i> - md-nfc </li>
+    <li class="m-20"> <i class="md md-now-wallpaper mr-10"></i> - md-now-wallpaper </li>
+    <li class="m-20"> <i class="md md-now-widgets mr-10"></i> - md-now-widgets </li>
+    <li class="m-20"> <i class="md md-screen-lock-landscape mr-10"></i> - md-screen-lock-landscape </li>
+    <li class="m-20"> <i class="md md-screen-lock-portrait mr-10"></i> - md-screen-lock-portrait </li>
+    <li class="m-20"> <i class="md md-screen-lock-rotation mr-10"></i> - md-screen-lock-rotation </li>
+    <li class="m-20"> <i class="md md-screen-rotation mr-10"></i> - md-screen-rotation </li>
+    <li class="m-20"> <i class="md md-sd-storage mr-10"></i> - md-sd-storage </li>
+    <li class="m-20"> <i class="md md-settings-system-daydream mr-10"></i> - md-settings-system-daydream </li>
+    <li class="m-20"> <i class="md md-signal-cellular-0-bar mr-10"></i> - md-signal-cellular-0-bar </li>
+    <li class="m-20"> <i class="md md-signal-cellular-1-bar mr-10"></i> - md-signal-cellular-1-bar </li>
+    <li class="m-20"> <i class="md md-signal-cellular-2-bar mr-10"></i> - md-signal-cellular-2-bar </li>
+    <li class="m-20"> <i class="md md-signal-cellular-3-bar mr-10"></i> - md-signal-cellular-3-bar </li>
+    <li class="m-20"> <i class="md md-signal-cellular-4-bar mr-10"></i> - md-signal-cellular-4-bar </li>
+    <li class="m-20"> <i class="md md-signal-cellular-connected-no-internet-0-bar mr-10"></i> - md-signal-cellular-connected-no-internet-0-bar </li>
+    <li class="m-20"> <i class="md md-signal-cellular-connected-no-internet-1-bar mr-10"></i> - md-signal-cellular-connected-no-internet-1-bar </li>
+    <li class="m-20"> <i class="md md-signal-cellular-connected-no-internet-2-bar mr-10"></i> - md-signal-cellular-connected-no-internet-2-bar </li>
+    <li class="m-20"> <i class="md md-signal-cellular-connected-no-internet-3-bar mr-10"></i> - md-signal-cellular-connected-no-internet-3-bar </li>
+    <li class="m-20"> <i class="md md-signal-cellular-connected-no-internet-4-bar mr-10"></i> - md-signal-cellular-connected-no-internet-4-bar </li>
+    <li class="m-20"> <i class="md md-signal-cellular-no-sim mr-10"></i> - md-signal-cellular-no-sim </li>
+    <li class="m-20"> <i class="md md-signal-cellular-null mr-10"></i> - md-signal-cellular-null </li>
+    <li class="m-20"> <i class="md md-signal-cellular-off mr-10"></i> - md-signal-cellular-off </li>
+    <li class="m-20"> <i class="md md-signal-wifi-0-bar mr-10"></i> - md-signal-wifi-0-bar </li>
+    <li class="m-20"> <i class="md md-signal-wifi-1-bar mr-10"></i> - md-signal-wifi-1-bar </li>
+    <li class="m-20"> <i class="md md-signal-wifi-2-bar mr-10"></i> - md-signal-wifi-2-bar </li>
+    <li class="m-20"> <i class="md md-signal-wifi-3-bar mr-10"></i> - md-signal-wifi-3-bar </li>
+    <li class="m-20"> <i class="md md-signal-wifi-4-bar mr-10"></i> - md-signal-wifi-4-bar </li>
+    <li class="m-20"> <i class="md md-signal-wifi-off mr-10"></i> - md-signal-wifi-off </li>
+    <li class="m-20"> <i class="md md-storage mr-10"></i> - md-storage </li>
+    <li class="m-20"> <i class="md md-usb mr-10"></i> - md-usb </li>
+    <li class="m-20"> <i class="md md-wifi-lock mr-10"></i> - md-wifi-lock </li>
+    <li class="m-20"> <i class="md md-wifi-tethering mr-10"></i> - md-wifi-tethering </li>
+    <li class="m-20"> <i class="md md-attach-file mr-10"></i> - md-attach-file </li>
+    <li class="m-20"> <i class="md md-attach-money mr-10"></i> - md-attach-money </li>
+    <li class="m-20"> <i class="md md-border-all mr-10"></i> - md-border-all </li>
+    <li class="m-20"> <i class="md md-border-bottom mr-10"></i> - md-border-bottom </li>
+    <li class="m-20"> <i class="md md-border-clear mr-10"></i> - md-border-clear </li>
+    <li class="m-20"> <i class="md md-border-color mr-10"></i> - md-border-color </li>
+    <li class="m-20"> <i class="md md-border-horizontal mr-10"></i> - md-border-horizontal </li>
+    <li class="m-20"> <i class="md md-border-inner mr-10"></i> - md-border-inner </li>
+    <li class="m-20"> <i class="md md-border-left mr-10"></i> - md-border-left </li>
+    <li class="m-20"> <i class="md md-border-outer mr-10"></i> - md-border-outer </li>
+    <li class="m-20"> <i class="md md-border-right mr-10"></i> - md-border-right </li>
+    <li class="m-20"> <i class="md md-border-style mr-10"></i> - md-border-style </li>
+    <li class="m-20"> <i class="md md-border-top mr-10"></i> - md-border-top </li>
+    <li class="m-20"> <i class="md md-border-vertical mr-10"></i> - md-border-vertical </li>
+    <li class="m-20"> <i class="md md-format-align-center mr-10"></i> - md-format-align-center </li>
+    <li class="m-20"> <i class="md md-format-align-justify mr-10"></i> - md-format-align-justify </li>
+    <li class="m-20"> <i class="md md-format-align-left mr-10"></i> - md-format-align-left </li>
+    <li class="m-20"> <i class="md md-format-align-right mr-10"></i> - md-format-align-right </li>
+    <li class="m-20"> <i class="md md-format-bold mr-10"></i> - md-format-bold </li>
+    <li class="m-20"> <i class="md md-format-clear mr-10"></i> - md-format-clear </li>
+    <li class="m-20"> <i class="md md-format-color-fill mr-10"></i> - md-format-color-fill </li>
+    <li class="m-20"> <i class="md md-format-color-reset mr-10"></i> - md-format-color-reset </li>
+    <li class="m-20"> <i class="md md-format-color-text mr-10"></i> - md-format-color-text </li>
+    <li class="m-20"> <i class="md md-format-indent-decrease mr-10"></i> - md-format-indent-decrease </li>
+    <li class="m-20"> <i class="md md-format-indent-increase mr-10"></i> - md-format-indent-increase </li>
+    <li class="m-20"> <i class="md md-format-italic mr-10"></i> - md-format-italic </li>
+    <li class="m-20"> <i class="md md-format-line-spacing mr-10"></i> - md-format-line-spacing </li>
+    <li class="m-20"> <i class="md md-format-list-bulleted mr-10"></i> - md-format-list-bulleted </li>
+    <li class="m-20"> <i class="md md-format-list-numbered mr-10"></i> - md-format-list-numbered </li>
+    <li class="m-20"> <i class="md md-format-paint mr-10"></i> - md-format-paint </li>
+    <li class="m-20"> <i class="md md-format-quote mr-10"></i> - md-format-quote </li>
+    <li class="m-20"> <i class="md md-format-size mr-10"></i> - md-format-size </li>
+    <li class="m-20"> <i class="md md-format-strikethrough mr-10"></i> - md-format-strikethrough </li>
+    <li class="m-20"> <i class="md md-format-textdirection-l-to-r mr-10"></i> - md-format-textdirection-l-to-r </li>
+    <li class="m-20"> <i class="md md-format-textdirection-r-to-l mr-10"></i> - md-format-textdirection-r-to-l </li>
+    <li class="m-20"> <i class="md md-format-underline mr-10"></i> - md-format-underline </li>
+    <li class="m-20"> <i class="md md-functions mr-10"></i> - md-functions </li>
+    <li class="m-20"> <i class="md md-insert-chart mr-10"></i> - md-insert-chart </li>
+    <li class="m-20"> <i class="md md-insert-comment mr-10"></i> - md-insert-comment </li>
+    <li class="m-20"> <i class="md md-insert-drive-file mr-10"></i> - md-insert-drive-file </li>
+    <li class="m-20"> <i class="md md-insert-emoticon mr-10"></i> - md-insert-emoticon </li>
+    <li class="m-20"> <i class="md md-insert-invitation mr-10"></i> - md-insert-invitation </li>
+    <li class="m-20"> <i class="md md-insert-link mr-10"></i> - md-insert-link </li>
+    <li class="m-20"> <i class="md md-insert-photo mr-10"></i> - md-insert-photo </li>
+    <li class="m-20"> <i class="md md-merge-type mr-10"></i> - md-merge-type </li>
+    <li class="m-20"> <i class="md md-mode-comment mr-10"></i> - md-mode-comment </li>
+    <li class="m-20"> <i class="md md-mode-edit mr-10"></i> - md-mode-edit </li>
+    <li class="m-20"> <i class="md md-publish mr-10"></i> - md-publish </li>
+    <li class="m-20"> <i class="md md-vertical-align-bottom mr-10"></i> - md-vertical-align-bottom </li>
+    <li class="m-20"> <i class="md md-vertical-align-center mr-10"></i> - md-vertical-align-center </li>
+    <li class="m-20"> <i class="md md-vertical-align-top mr-10"></i> - md-vertical-align-top </li>
+    <li class="m-20"> <i class="md md-wrap-text mr-10"></i> - md-wrap-text </li>
+    <li class="m-20"> <i class="md md-attachment mr-10"></i> - md-attachment </li>
+    <li class="m-20"> <i class="md md-cloud mr-10"></i> - md-cloud </li>
+    <li class="m-20"> <i class="md md-cloud-circle mr-10"></i> - md-cloud-circle </li>
+    <li class="m-20"> <i class="md md-cloud-done mr-10"></i> - md-cloud-done </li>
+    <li class="m-20"> <i class="md md-cloud-download mr-10"></i> - md-cloud-download </li>
+    <li class="m-20"> <i class="md md-cloud-off mr-10"></i> - md-cloud-off </li>
+    <li class="m-20"> <i class="md md-cloud-queue mr-10"></i> - md-cloud-queue </li>
+    <li class="m-20"> <i class="md md-cloud-upload mr-10"></i> - md-cloud-upload </li>
+    <li class="m-20"> <i class="md md-file-download mr-10"></i> - md-file-download </li>
+    <li class="m-20"> <i class="md md-file-upload mr-10"></i> - md-file-upload </li>
+    <li class="m-20"> <i class="md md-folder mr-10"></i> - md-folder </li>
+    <li class="m-20"> <i class="md md-folder-open mr-10"></i> - md-folder-open </li>
+    <li class="m-20"> <i class="md md-folder-shared mr-10"></i> - md-folder-shared </li>
+    <li class="m-20"> <i class="md md-cast mr-10"></i> - md-cast </li>
+    <li class="m-20"> <i class="md md-cast-connected mr-10"></i> - md-cast-connected </li>
+    <li class="m-20"> <i class="md md-computer mr-10"></i> - md-computer </li>
+    <li class="m-20"> <i class="md md-desktop-mac mr-10"></i> - md-desktop-mac </li>
+    <li class="m-20"> <i class="md md-desktop-windows mr-10"></i> - md-desktop-windows </li>
+    <li class="m-20"> <i class="md md-dock mr-10"></i> - md-dock </li>
+    <li class="m-20"> <i class="md md-gamepad mr-10"></i> - md-gamepad </li>
+    <li class="m-20"> <i class="md md-headset mr-10"></i> - md-headset </li>
+    <li class="m-20"> <i class="md md-headset-mic mr-10"></i> - md-headset-mic </li>
+    <li class="m-20"> <i class="md md-keyboard mr-10"></i> - md-keyboard </li>
+    <li class="m-20"> <i class="md md-keyboard-alt mr-10"></i> - md-keyboard-alt </li>
+    <li class="m-20"> <i class="md md-keyboard-arrow-down mr-10"></i> - md-keyboard-arrow-down </li>
+    <li class="m-20"> <i class="md md-keyboard-arrow-left mr-10"></i> - md-keyboard-arrow-left </li>
+    <li class="m-20"> <i class="md md-keyboard-arrow-right mr-10"></i> - md-keyboard-arrow-right </li>
+    <li class="m-20"> <i class="md md-keyboard-arrow-up mr-10"></i> - md-keyboard-arrow-up </li>
+    <li class="m-20"> <i class="md md-keyboard-backspace mr-10"></i> - md-keyboard-backspace </li>
+    <li class="m-20"> <i class="md md-keyboard-capslock mr-10"></i> - md-keyboard-capslock </li>
+    <li class="m-20"> <i class="md md-keyboard-control mr-10"></i> - md-keyboard-control </li>
+    <li class="m-20"> <i class="md md-keyboard-hide mr-10"></i> - md-keyboard-hide </li>
+    <li class="m-20"> <i class="md md-keyboard-return mr-10"></i> - md-keyboard-return </li>
+    <li class="m-20"> <i class="md md-keyboard-tab mr-10"></i> - md-keyboard-tab </li>
+    <li class="m-20"> <i class="md md-keyboard-voice mr-10"></i> - md-keyboard-voice </li>
+    <li class="m-20"> <i class="md md-laptop mr-10"></i> - md-laptop </li>
+    <li class="m-20"> <i class="md md-laptop-chromebook mr-10"></i> - md-laptop-chromebook </li>
+    <li class="m-20"> <i class="md md-laptop-mac mr-10"></i> - md-laptop-mac </li>
+    <li class="m-20"> <i class="md md-laptop-windows mr-10"></i> - md-laptop-windows </li>
+    <li class="m-20"> <i class="md md-memory mr-10"></i> - md-memory </li>
+    <li class="m-20"> <i class="md md-mouse mr-10"></i> - md-mouse </li>
+    <li class="m-20"> <i class="md md-phone-android mr-10"></i> - md-phone-android </li>
+    <li class="m-20"> <i class="md md-phone-iphone mr-10"></i> - md-phone-iphone </li>
+    <li class="m-20"> <i class="md md-phonelink mr-10"></i> - md-phonelink </li>
+    <li class="m-20"> <i class="md md-phonelink-off mr-10"></i> - md-phonelink-off </li>
+    <li class="m-20"> <i class="md md-security mr-10"></i> - md-security </li>
+    <li class="m-20"> <i class="md md-sim-card mr-10"></i> - md-sim-card </li>
+    <li class="m-20"> <i class="md md-smartphone mr-10"></i> - md-smartphone </li>
+    <li class="m-20"> <i class="md md-speaker mr-10"></i> - md-speaker </li>
+    <li class="m-20"> <i class="md md-tablet mr-10"></i> - md-tablet </li>
+    <li class="m-20"> <i class="md md-tablet-android mr-10"></i> - md-tablet-android </li>
+    <li class="m-20"> <i class="md md-tablet-mac mr-10"></i> - md-tablet-mac </li>
+    <li class="m-20"> <i class="md md-tv mr-10"></i> - md-tv </li>
+    <li class="m-20"> <i class="md md-watch mr-10"></i> - md-watch </li>
+    <li class="m-20"> <i class="md md-add-to-photos mr-10"></i> - md-add-to-photos </li>
+    <li class="m-20"> <i class="md md-adjust mr-10"></i> - md-adjust </li>
+    <li class="m-20"> <i class="md md-assistant-photo mr-10"></i> - md-assistant-photo </li>
+    <li class="m-20"> <i class="md md-audiotrack mr-10"></i> - md-audiotrack </li>
+    <li class="m-20"> <i class="md md-blur-circular mr-10"></i> - md-blur-circular </li>
+    <li class="m-20"> <i class="md md-blur-linear mr-10"></i> - md-blur-linear </li>
+    <li class="m-20"> <i class="md md-blur-off mr-10"></i> - md-blur-off </li>
+    <li class="m-20"> <i class="md md-blur-on mr-10"></i> - md-blur-on </li>
+    <li class="m-20"> <i class="md md-brightness-1 mr-10"></i> - md-brightness-1 </li>
+    <li class="m-20"> <i class="md md-brightness-2 mr-10"></i> - md-brightness-2 </li>
+    <li class="m-20"> <i class="md md-brightness-3 mr-10"></i> - md-brightness-3 </li>
+    <li class="m-20"> <i class="md md-brightness-4 mr-10"></i> - md-brightness-4 </li>
+    <li class="m-20"> <i class="md md-brightness-5 mr-10"></i> - md-brightness-5 </li>
+    <li class="m-20"> <i class="md md-brightness-6 mr-10"></i> - md-brightness-6 </li>
+    <li class="m-20"> <i class="md md-brightness-7 mr-10"></i> - md-brightness-7 </li>
+    <li class="m-20"> <i class="md md-brush mr-10"></i> - md-brush </li>
+    <li class="m-20"> <i class="md md-camera mr-10"></i> - md-camera </li>
+    <li class="m-20"> <i class="md md-camera-alt mr-10"></i> - md-camera-alt </li>
+    <li class="m-20"> <i class="md md-camera-front mr-10"></i> - md-camera-front </li>
+    <li class="m-20"> <i class="md md-camera-rear mr-10"></i> - md-camera-rear </li>
+    <li class="m-20"> <i class="md md-camera-roll mr-10"></i> - md-camera-roll </li>
+    <li class="m-20"> <i class="md md-center-focus-strong mr-10"></i> - md-center-focus-strong </li>
+    <li class="m-20"> <i class="md md-center-focus-weak mr-10"></i> - md-center-focus-weak </li>
+    <li class="m-20"> <i class="md md-collections mr-10"></i> - md-collections </li>
+    <li class="m-20"> <i class="md md-colorize mr-10"></i> - md-colorize </li>
+    <li class="m-20"> <i class="md md-color-lens mr-10"></i> - md-color-lens </li>
+    <li class="m-20"> <i class="md md-compare mr-10"></i> - md-compare </li>
+    <li class="m-20"> <i class="md md-control-point mr-10"></i> - md-control-point </li>
+    <li class="m-20"> <i class="md md-control-point-duplicate mr-10"></i> - md-control-point-duplicate </li>
+    <li class="m-20"> <i class="md md-crop mr-10"></i> - md-crop </li>
+    <li class="m-20"> <i class="md md-crop-3-2 mr-10"></i> - md-crop-3-2 </li>
+    <li class="m-20"> <i class="md md-crop-5-4 mr-10"></i> - md-crop-5-4 </li>
+    <li class="m-20"> <i class="md md-crop-7-5 mr-10"></i> - md-crop-7-5 </li>
+    <li class="m-20"> <i class="md md-crop-16-9 mr-10"></i> - md-crop-16-9 </li>
+    <li class="m-20"> <i class="md md-crop-din mr-10"></i> - md-crop-din </li>
+    <li class="m-20"> <i class="md md-crop-free mr-10"></i> - md-crop-free </li>
+    <li class="m-20"> <i class="md md-crop-landscape mr-10"></i> - md-crop-landscape </li>
+    <li class="m-20"> <i class="md md-crop-original mr-10"></i> - md-crop-original </li>
+    <li class="m-20"> <i class="md md-crop-portrait mr-10"></i> - md-crop-portrait </li>
+    <li class="m-20"> <i class="md md-crop-square mr-10"></i> - md-crop-square </li>
+    <li class="m-20"> <i class="md md-dehaze mr-10"></i> - md-dehaze </li>
+    <li class="m-20"> <i class="md md-details mr-10"></i> - md-details </li>
+    <li class="m-20"> <i class="md md-edit mr-10"></i> - md-edit </li>
+    <li class="m-20"> <i class="md md-exposure mr-10"></i> - md-exposure </li>
+    <li class="m-20"> <i class="md md-exposure-minus-1 mr-10"></i> - md-exposure-minus-1 </li>
+    <li class="m-20"> <i class="md md-exposure-minus-2 mr-10"></i> - md-exposure-minus-2 </li>
+    <li class="m-20"> <i class="md md-exposure-zero mr-10"></i> - md-exposure-zero </li>
+    <li class="m-20"> <i class="md md-exposure-plus-1 mr-10"></i> - md-exposure-plus-1 </li>
+    <li class="m-20"> <i class="md md-exposure-plus-2 mr-10"></i> - md-exposure-plus-2 </li>
+    <li class="m-20"> <i class="md md-filter mr-10"></i> - md-filter </li>
+    <li class="m-20"> <i class="md md-filter-1 mr-10"></i> - md-filter-1 </li>
+    <li class="m-20"> <i class="md md-filter-2 mr-10"></i> - md-filter-2 </li>
+    <li class="m-20"> <i class="md md-filter-3 mr-10"></i> - md-filter-3 </li>
+    <li class="m-20"> <i class="md md-filter-4 mr-10"></i> - md-filter-4 </li>
+    <li class="m-20"> <i class="md md-filter-5 mr-10"></i> - md-filter-5 </li>
+    <li class="m-20"> <i class="md md-filter-6 mr-10"></i> - md-filter-6 </li>
+    <li class="m-20"> <i class="md md-filter-7 mr-10"></i> - md-filter-7 </li>
+    <li class="m-20"> <i class="md md-filter-8 mr-10"></i> - md-filter-8 </li>
+    <li class="m-20"> <i class="md md-filter-9 mr-10"></i> - md-filter-9 </li>
+    <li class="m-20"> <i class="md md-filter-9-plus mr-10"></i> - md-filter-9-plus </li>
+    <li class="m-20"> <i class="md md-filter-b-and-w mr-10"></i> - md-filter-b-and-w </li>
+    <li class="m-20"> <i class="md md-filter-center-focus mr-10"></i> - md-filter-center-focus </li>
+    <li class="m-20"> <i class="md md-filter-drama mr-10"></i> - md-filter-drama </li>
+    <li class="m-20"> <i class="md md-filter-frames mr-10"></i> - md-filter-frames </li>
+    <li class="m-20"> <i class="md md-filter-hdr mr-10"></i> - md-filter-hdr </li>
+    <li class="m-20"> <i class="md md-filter-none mr-10"></i> - md-filter-none </li>
+    <li class="m-20"> <i class="md md-filter-tilt-shift mr-10"></i> - md-filter-tilt-shift </li>
+    <li class="m-20"> <i class="md md-filter-vintage mr-10"></i> - md-filter-vintage </li>
+    <li class="m-20"> <i class="md md-flare mr-10"></i> - md-flare </li>
+    <li class="m-20"> <i class="md md-flash-auto mr-10"></i> - md-flash-auto </li>
+    <li class="m-20"> <i class="md md-flash-off mr-10"></i> - md-flash-off </li>
+    <li class="m-20"> <i class="md md-flash-on mr-10"></i> - md-flash-on </li>
+    <li class="m-20"> <i class="md md-flip mr-10"></i> - md-flip </li>
+    <li class="m-20"> <i class="md md-gradient mr-10"></i> - md-gradient </li>
+    <li class="m-20"> <i class="md md-grain mr-10"></i> - md-grain </li>
+    <li class="m-20"> <i class="md md-grid-off mr-10"></i> - md-grid-off </li>
+    <li class="m-20"> <i class="md md-grid-on mr-10"></i> - md-grid-on </li>
+    <li class="m-20"> <i class="md md-hdr-off mr-10"></i> - md-hdr-off </li>
+    <li class="m-20"> <i class="md md-hdr-on mr-10"></i> - md-hdr-on </li>
+    <li class="m-20"> <i class="md md-hdr-strong mr-10"></i> - md-hdr-strong </li>
+    <li class="m-20"> <i class="md md-hdr-weak mr-10"></i> - md-hdr-weak </li>
+    <li class="m-20"> <i class="md md-healing mr-10"></i> - md-healing </li>
+    <li class="m-20"> <i class="md md-image mr-10"></i> - md-image </li>
+    <li class="m-20"> <i class="md md-image-aspect-ratio mr-10"></i> - md-image-aspect-ratio </li>
+    <li class="m-20"> <i class="md md-iso mr-10"></i> - md-iso </li>
+    <li class="m-20"> <i class="md md-landscape mr-10"></i> - md-landscape </li>
+    <li class="m-20"> <i class="md md-leak-add mr-10"></i> - md-leak-add </li>
+    <li class="m-20"> <i class="md md-leak-remove mr-10"></i> - md-leak-remove </li>
+    <li class="m-20"> <i class="md md-lens mr-10"></i> - md-lens </li>
+    <li class="m-20"> <i class="md md-looks mr-10"></i> - md-looks </li>
+    <li class="m-20"> <i class="md md-looks-1 mr-10"></i> - md-looks-1 </li>
+    <li class="m-20"> <i class="md md-looks-2 mr-10"></i> - md-looks-2 </li>
+    <li class="m-20"> <i class="md md-looks-3 mr-10"></i> - md-looks-3 </li>
+    <li class="m-20"> <i class="md md-looks-4 mr-10"></i> - md-looks-4 </li>
+    <li class="m-20"> <i class="md md-looks-5 mr-10"></i> - md-looks-5 </li>
+    <li class="m-20"> <i class="md md-looks-6 mr-10"></i> - md-looks-6 </li>
+    <li class="m-20"> <i class="md md-loupe mr-10"></i> - md-loupe </li>
+    <li class="m-20"> <i class="md md-movie-creation mr-10"></i> - md-movie-creation </li>
+    <li class="m-20"> <i class="md md-nature mr-10"></i> - md-nature </li>
+    <li class="m-20"> <i class="md md-nature-people mr-10"></i> - md-nature-people </li>
+    <li class="m-20"> <i class="md md-navigate-before mr-10"></i> - md-navigate-before </li>
+    <li class="m-20"> <i class="md md-navigate-next mr-10"></i> - md-navigate-next </li>
+    <li class="m-20"> <i class="md md-palette mr-10"></i> - md-palette </li>
+    <li class="m-20"> <i class="md md-panorama mr-10"></i> - md-panorama </li>
+    <li class="m-20"> <i class="md md-panorama-fisheye mr-10"></i> - md-panorama-fisheye </li>
+    <li class="m-20"> <i class="md md-panorama-horizontal mr-10"></i> - md-panorama-horizontal </li>
+    <li class="m-20"> <i class="md md-panorama-vertical mr-10"></i> - md-panorama-vertical </li>
+    <li class="m-20"> <i class="md md-panorama-wide-angle mr-10"></i> - md-panorama-wide-angle </li>
+    <li class="m-20"> <i class="md md-photo mr-10"></i> - md-photo </li>
+    <li class="m-20"> <i class="md md-photo-album mr-10"></i> - md-photo-album </li>
+    <li class="m-20"> <i class="md md-photo-camera mr-10"></i> - md-photo-camera </li>
+    <li class="m-20"> <i class="md md-photo-library mr-10"></i> - md-photo-library </li>
+    <li class="m-20"> <i class="md md-portrait mr-10"></i> - md-portrait </li>
+    <li class="m-20"> <i class="md md-remove-red-eye mr-10"></i> - md-remove-red-eye </li>
+    <li class="m-20"> <i class="md md-rotate-left mr-10"></i> - md-rotate-left </li>
+    <li class="m-20"> <i class="md md-rotate-right mr-10"></i> - md-rotate-right </li>
+    <li class="m-20"> <i class="md md-slideshow mr-10"></i> - md-slideshow </li>
+    <li class="m-20"> <i class="md md-straighten mr-10"></i> - md-straighten </li>
+    <li class="m-20"> <i class="md md-style mr-10"></i> - md-style </li>
+    <li class="m-20"> <i class="md md-switch-camera mr-10"></i> - md-switch-camera </li>
+    <li class="m-20"> <i class="md md-switch-video mr-10"></i> - md-switch-video </li>
+    <li class="m-20"> <i class="md md-tag-faces mr-10"></i> - md-tag-faces </li>
+    <li class="m-20"> <i class="md md-texture mr-10"></i> - md-texture </li>
+    <li class="m-20"> <i class="md md-timelapse mr-10"></i> - md-timelapse </li>
+    <li class="m-20"> <i class="md md-timer mr-10"></i> - md-timer </li>
+    <li class="m-20"> <i class="md md-timer-3 mr-10"></i> - md-timer-3 </li>
+    <li class="m-20"> <i class="md md-timer-10 mr-10"></i> - md-timer-10 </li>
+    <li class="m-20"> <i class="md md-timer-auto mr-10"></i> - md-timer-auto </li>
+    <li class="m-20"> <i class="md md-timer-off mr-10"></i> - md-timer-off </li>
+    <li class="m-20"> <i class="md md-tonality mr-10"></i> - md-tonality </li>
+    <li class="m-20"> <i class="md md-transform mr-10"></i> - md-transform </li>
+    <li class="m-20"> <i class="md md-tune mr-10"></i> - md-tune </li>
+    <li class="m-20"> <i class="md md-wb-auto mr-10"></i> - md-wb-auto </li>
+    <li class="m-20"> <i class="md md-wb-cloudy mr-10"></i> - md-wb-cloudy </li>
+    <li class="m-20"> <i class="md md-wb-incandescent mr-10"></i> - md-wb-incandescent </li>
+    <li class="m-20"> <i class="md md-wb-irradescent mr-10"></i> - md-wb-irradescent </li>
+    <li class="m-20"> <i class="md md-wb-sunny mr-10"></i> - md-wb-sunny </li>
+    <li class="m-20"> <i class="md md-beenhere mr-10"></i> - md-beenhere </li>
+    <li class="m-20"> <i class="md md-directions mr-10"></i> - md-directions </li>
+    <li class="m-20"> <i class="md md-directions-bike mr-10"></i> - md-directions-bike </li>
+    <li class="m-20"> <i class="md md-directions-bus mr-10"></i> - md-directions-bus </li>
+    <li class="m-20"> <i class="md md-directions-car mr-10"></i> - md-directions-car </li>
+    <li class="m-20"> <i class="md md-directions-ferry mr-10"></i> - md-directions-ferry </li>
+    <li class="m-20"> <i class="md md-directions-subway mr-10"></i> - md-directions-subway </li>
+    <li class="m-20"> <i class="md md-directions-train mr-10"></i> - md-directions-train </li>
+    <li class="m-20"> <i class="md md-directions-transit mr-10"></i> - md-directions-transit </li>
+    <li class="m-20"> <i class="md md-directions-walk mr-10"></i> - md-directions-walk </li>
+    <li class="m-20"> <i class="md md-flight mr-10"></i> - md-flight </li>
+    <li class="m-20"> <i class="md md-hotel mr-10"></i> - md-hotel </li>
+    <li class="m-20"> <i class="md md-layers mr-10"></i> - md-layers </li>
+    <li class="m-20"> <i class="md md-layers-clear mr-10"></i> - md-layers-clear </li>
+    <li class="m-20"> <i class="md md-local-airport mr-10"></i> - md-local-airport </li>
+    <li class="m-20"> <i class="md md-local-atm mr-10"></i> - md-local-atm </li>
+    <li class="m-20"> <i class="md md-local-attraction mr-10"></i> - md-local-attraction </li>
+    <li class="m-20"> <i class="md md-local-bar mr-10"></i> - md-local-bar </li>
+    <li class="m-20"> <i class="md md-local-cafe mr-10"></i> - md-local-cafe </li>
+    <li class="m-20"> <i class="md md-local-car-wash mr-10"></i> - md-local-car-wash </li>
+    <li class="m-20"> <i class="md md-local-convenience-store mr-10"></i> - md-local-convenience-store </li>
+    <li class="m-20"> <i class="md md-local-drink mr-10"></i> - md-local-drink </li>
+    <li class="m-20"> <i class="md md-local-florist mr-10"></i> - md-local-florist </li>
+    <li class="m-20"> <i class="md md-local-gas-station mr-10"></i> - md-local-gas-station </li>
+    <li class="m-20"> <i class="md md-local-grocery-store mr-10"></i> - md-local-grocery-store </li>
+    <li class="m-20"> <i class="md md-local-hospital mr-10"></i> - md-local-hospital </li>
+    <li class="m-20"> <i class="md md-local-hotel mr-10"></i> - md-local-hotel </li>
+    <li class="m-20"> <i class="md md-local-laundry-service mr-10"></i> - md-local-laundry-service </li>
+    <li class="m-20"> <i class="md md-local-library mr-10"></i> - md-local-library </li>
+    <li class="m-20"> <i class="md md-local-mall mr-10"></i> - md-local-mall </li>
+    <li class="m-20"> <i class="md md-local-movies mr-10"></i> - md-local-movies </li>
+    <li class="m-20"> <i class="md md-local-offer mr-10"></i> - md-local-offer </li>
+    <li class="m-20"> <i class="md md-local-parking mr-10"></i> - md-local-parking </li>
+    <li class="m-20"> <i class="md md-local-pharmacy mr-10"></i> - md-local-pharmacy </li>
+    <li class="m-20"> <i class="md md-local-phone mr-10"></i> - md-local-phone </li>
+    <li class="m-20"> <i class="md md-local-pizza mr-10"></i> - md-local-pizza </li>
+    <li class="m-20"> <i class="md md-local-play mr-10"></i> - md-local-play </li>
+    <li class="m-20"> <i class="md md-local-post-office mr-10"></i> - md-local-post-office </li>
+    <li class="m-20"> <i class="md md-local-print-shop mr-10"></i> - md-local-print-shop </li>
+    <li class="m-20"> <i class="md md-local-restaurant mr-10"></i> - md-local-restaurant </li>
+    <li class="m-20"> <i class="md md-local-see mr-10"></i> - md-local-see </li>
+    <li class="m-20"> <i class="md md-local-shipping mr-10"></i> - md-local-shipping </li>
+    <li class="m-20"> <i class="md md-local-taxi mr-10"></i> - md-local-taxi </li>
+    <li class="m-20"> <i class="md md-location-history mr-10"></i> - md-location-history </li>
+    <li class="m-20"> <i class="md md-map mr-10"></i> - md-map </li>
+    <li class="m-20"> <i class="md md-my-location mr-10"></i> - md-my-location </li>
+    <li class="m-20"> <i class="md md-navigation mr-10"></i> - md-navigation </li>
+    <li class="m-20"> <i class="md md-pin-drop mr-10"></i> - md-pin-drop </li>
+    <li class="m-20"> <i class="md md-place mr-10"></i> - md-place </li>
+    <li class="m-20"> <i class="md md-rate-review mr-10"></i> - md-rate-review </li>
+    <li class="m-20"> <i class="md md-restaurant-menu mr-10"></i> - md-restaurant-menu </li>
+    <li class="m-20"> <i class="md md-satellite mr-10"></i> - md-satellite </li>
+    <li class="m-20"> <i class="md md-store-mall-directory mr-10"></i> - md-store-mall-directory </li>
+    <li class="m-20"> <i class="md md-terrain mr-10"></i> - md-terrain </li>
+    <li class="m-20"> <i class="md md-traffic mr-10"></i> - md-traffic </li>
+    <li class="m-20"> <i class="md md-apps mr-10"></i> - md-apps </li>
+    <li class="m-20"> <i class="md md-cancel mr-10"></i> - md-cancel </li>
+    <li class="m-20"> <i class="md md-arrow-drop-down-circle mr-10"></i> - md-arrow-drop-down-circle </li>
+    <li class="m-20"> <i class="md md-arrow-drop-down mr-10"></i> - md-arrow-drop-down </li>
+    <li class="m-20"> <i class="md md-arrow-drop-up mr-10"></i> - md-arrow-drop-up </li>
+    <li class="m-20"> <i class="md md-arrow-back mr-10"></i> - md-arrow-back </li>
+    <li class="m-20"> <i class="md md-arrow-forward mr-10"></i> - md-arrow-forward </li>
+    <li class="m-20"> <i class="md md-check mr-10"></i> - md-check </li>
+    <li class="m-20"> <i class="md md-close mr-10"></i> - md-close </li>
+    <li class="m-20"> <i class="md md-chevron-left mr-10"></i> - md-chevron-left </li>
+    <li class="m-20"> <i class="md md-chevron-right mr-10"></i> - md-chevron-right </li>
+    <li class="m-20"> <i class="md md-expand-less mr-10"></i> - md-expand-less </li>
+    <li class="m-20"> <i class="md md-expand-more mr-10"></i> - md-expand-more </li>
+    <li class="m-20"> <i class="md md-fullscreen mr-10"></i> - md-fullscreen </li>
+    <li class="m-20"> <i class="md md-fullscreen-exit mr-10"></i> - md-fullscreen-exit </li>
+    <li class="m-20"> <i class="md md-menu mr-10"></i> - md-menu </li>
+    <li class="m-20"> <i class="md md-more-horiz mr-10"></i> - md-more-horiz </li>
+    <li class="m-20"> <i class="md md-more-vert mr-10"></i> - md-more-vert </li>
+    <li class="m-20"> <i class="md md-refresh mr-10"></i> - md-refresh </li>
+    <li class="m-20"> <i class="md md-unfold-less mr-10"></i> - md-unfold-less </li>
+    <li class="m-20"> <i class="md md-unfold-more mr-10"></i> - md-unfold-more </li>
+    <li class="m-20"> <i class="md md-adb mr-10"></i> - md-adb </li>
+    <li class="m-20"> <i class="md md-bluetooth-audio mr-10"></i> - md-bluetooth-audio </li>
+    <li class="m-20"> <i class="md md-disc-full mr-10"></i> - md-disc-full </li>
+    <li class="m-20"> <i class="md md-dnd-forwardslash mr-10"></i> - md-dnd-forwardslash </li>
+    <li class="m-20"> <i class="md md-do-not-disturb mr-10"></i> - md-do-not-disturb </li>
+    <li class="m-20"> <i class="md md-drive-eta mr-10"></i> - md-drive-eta </li>
+    <li class="m-20"> <i class="md md-event-available mr-10"></i> - md-event-available </li>
+    <li class="m-20"> <i class="md md-event-busy mr-10"></i> - md-event-busy </li>
+    <li class="m-20"> <i class="md md-event-note mr-10"></i> - md-event-note </li>
+    <li class="m-20"> <i class="md md-folder-special mr-10"></i> - md-folder-special </li>
+    <li class="m-20"> <i class="md md-mms mr-10"></i> - md-mms </li>
+    <li class="m-20"> <i class="md md-more mr-10"></i> - md-more </li>
+    <li class="m-20"> <i class="md md-network-locked mr-10"></i> - md-network-locked </li>
+    <li class="m-20"> <i class="md md-phone-bluetooth-speaker mr-10"></i> - md-phone-bluetooth-speaker </li>
+    <li class="m-20"> <i class="md md-phone-forwarded mr-10"></i> - md-phone-forwarded </li>
+    <li class="m-20"> <i class="md md-phone-in-talk mr-10"></i> - md-phone-in-talk </li>
+    <li class="m-20"> <i class="md md-phone-locked mr-10"></i> - md-phone-locked </li>
+    <li class="m-20"> <i class="md md-phone-missed mr-10"></i> - md-phone-missed </li>
+    <li class="m-20"> <i class="md md-phone-paused mr-10"></i> - md-phone-paused </li>
+    <li class="m-20"> <i class="md md-play-download mr-10"></i> - md-play-download </li>
+    <li class="m-20"> <i class="md md-play-install mr-10"></i> - md-play-install </li>
+    <li class="m-20"> <i class="md md-sd-card mr-10"></i> - md-sd-card </li>
+    <li class="m-20"> <i class="md md-sim-card-alert mr-10"></i> - md-sim-card-alert </li>
+    <li class="m-20"> <i class="md md-sms mr-10"></i> - md-sms </li>
+    <li class="m-20"> <i class="md md-sms-failed mr-10"></i> - md-sms-failed </li>
+    <li class="m-20"> <i class="md md-sync mr-10"></i> - md-sync </li>
+    <li class="m-20"> <i class="md md-sync-disabled mr-10"></i> - md-sync-disabled </li>
+    <li class="m-20"> <i class="md md-sync-problem mr-10"></i> - md-sync-problem </li>
+    <li class="m-20"> <i class="md md-system-update mr-10"></i> - md-system-update </li>
+    <li class="m-20"> <i class="md md-tap-and-play mr-10"></i> - md-tap-and-play </li>
+    <li class="m-20"> <i class="md md-time-to-leave mr-10"></i> - md-time-to-leave </li>
+    <li class="m-20"> <i class="md md-vibration mr-10"></i> - md-vibration </li>
+    <li class="m-20"> <i class="md md-voice-chat mr-10"></i> - md-voice-chat </li>
+    <li class="m-20"> <i class="md md-vpn-lock mr-10"></i> - md-vpn-lock </li>
+    <li class="m-20"> <i class="md md-cake mr-10"></i> - md-cake </li>
+    <li class="m-20"> <i class="md md-domain mr-10"></i> - md-domain </li>
+    <li class="m-20"> <i class="md md-location-city mr-10"></i> - md-location-city </li>
+    <li class="m-20"> <i class="md md-mood mr-10"></i> - md-mood </li>
+    <li class="m-20"> <i class="md md-notifications-none mr-10"></i> - md-notifications-none </li>
+    <li class="m-20"> <i class="md md-notifications mr-10"></i> - md-notifications </li>
+    <li class="m-20"> <i class="md md-notifications-off mr-10"></i> - md-notifications-off </li>
+    <li class="m-20"> <i class="md md-notifications-on mr-10"></i> - md-notifications-on </li>
+    <li class="m-20"> <i class="md md-notifications-paused mr-10"></i> - md-notifications-paused </li>
+    <li class="m-20"> <i class="md md-pages mr-10"></i> - md-pages </li>
+    <li class="m-20"> <i class="md md-party-mode mr-10"></i> - md-party-mode </li>
+    <li class="m-20"> <i class="md md-group mr-10"></i> - md-group </li>
+    <li class="m-20"> <i class="md md-group-add mr-10"></i> - md-group-add </li>
+    <li class="m-20"> <i class="md md-people mr-10"></i> - md-people </li>
+    <li class="m-20"> <i class="md md-people-outline mr-10"></i> - md-people-outline </li>
+    <li class="m-20"> <i class="md md-person mr-10"></i> - md-person </li>
+    <li class="m-20"> <i class="md md-person-add mr-10"></i> - md-person-add </li>
+    <li class="m-20"> <i class="md md-person-outline mr-10"></i> - md-person-outline </li>
+    <li class="m-20"> <i class="md md-plus-one mr-10"></i> - md-plus-one </li>
+    <li class="m-20"> <i class="md md-poll mr-10"></i> - md-poll </li>
+    <li class="m-20"> <i class="md md-public mr-10"></i> - md-public </li>
+    <li class="m-20"> <i class="md md-school mr-10"></i> - md-school </li>
+    <li class="m-20"> <i class="md md-share mr-10"></i> - md-share </li>
+    <li class="m-20"> <i class="md md-whatshot mr-10"></i> - md-whatshot </li>
+    <li class="m-20"> <i class="md md-check-box mr-10"></i> - md-check-box </li>
+    <li class="m-20"> <i class="md md-check-box-outline-blank mr-10"></i> - md-check-box-outline-blank </li>
+    <li class="m-20"> <i class="md md-radio-button-off mr-10"></i> - md-radio-button-off </li>
+    <li class="m-20"> <i class="md md-radio-button-on mr-10"></i> - md-radio-button-on </li>
+    <li class="m-20"> <i class="md md-star mr-10"></i> - md-star </li>
+    <li class="m-20"> <i class="md md-star-half mr-10"></i> - md-star-half </li>
+    <li class="m-20"> <i class="md md-star-outline mr-10"></i> - md-star-outline </li>
+
+  </ul>
+</section>