---
title:                                  MDI Icon Previewer
tagline:                                Search and Select MDI Icons
description:                            Material Design Icons Preview for J1 Template

tags:                                   [ Preview, Material, Design, MDI, FontAwesome, Icon, Fonts ]
index:                                  []
categories:                             [ pages, manuals ]

permalink:                              /pages/protected/previewer/mdi_font/
regenerate:                             false

resources:                              []
resource_options:
  - attic:
      opacity:                          0.5
      slides:
        - url:                          /assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.jpg
          alt:                          icon-fonts-1920x1280-bw
---

// Enable the Liquid Preprocessor
// -----------------------------------------------------------------------------
:page-liquid:

// Set other global page attributes here
// -----------------------------------------------------------------------------

// Liquid procedures
// -----------------------------------------------------------------------------
{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}

// Initialize entry document paths
// -----------------------------------------------------------------------------
{% include {{set_env_entry_document}} init_folders=all %}

// Load tags and urls
// -----------------------------------------------------------------------------
include::{includedir}/attributes.asciidoc[tag=tags]
include::{includedir}/attributes.asciidoc[tag=urls]
include::{includedir}/attributes.asciidoc[tag=data]

// Additional Asciidoc page attributes goes here
// -----------------------------------------------------------------------------
 

// Include documents
// -----------------------------------------------------------------------------


== Material Design Icons

_Material Design Icons_ (MDI) is a very helpful design resource for Web Design
that is based on *_Google_'s Material Design*. _MDI_ is a community-driven
project to create an increased icon-set based on _Google_'s official repository
and MD style specification.

_MDI_ is a growing collection to allow designers and developers targeting
various platforms to download icons in the format, color and size they need
for any project. The repo contains today 3400+ icons plus converted icons from
the official set created by _Google_.

_J1 Template_ supports the full set of _MDI_ for the Web (Webfont, WOFF). The
icon set is fully integrated and can be used out-of-the-box.

== HTML Markup

There is no *official* markup for font icons, but 2 markups are widely used.
Both markups can be used in block elements like the anchor tag `<a>`. That
way, it's on you what to use for font icons.

[source, html]
----
<span class="mdi mdi-name" role="img" aria-label="name" ></span> <1>
<i class="mdi mdi-name"></i> <1> <2>
----
<1> Both forms are consistent with the HTML5 spec
<2> It's short and the `<i>` tag may associated for an **i**mage (semantic meaning)

NOTE: The `<i>` tag provides more meaning to machines because of the HTML spec,
it provides more meaning to *humans* because the `i` can easily associated with
`icon`. And it's only *one letter* long - that win! And if you make sure to
include equivalent text either inside the `<i>` tag or right next to it
(as Twitter for Bootstrap does), then screen readers understand where to
click to reply, the link is usable if CSS doesn't load, and human readers
with good eyesight and a decent browser see a pretty icon.


//////////
=== Flex Icons

lorem:sentences[5]

++++
<div class="row">
  <a href="#" class="mdi mdi-md-gray-300">
    <i class="mdi mdi-alert mdi-3x mdi-md-red mdi-flex-align-center mr-2"></i> Hover effect on the anchor text
  </a>
</div>

<div class="row">
  <a href="#" class="mdi mdi-md-gray-300">
    <i class="mdi mdi-alert mdi-3x mdi-md-red mdi-flex-align-center mr-2">
     Hover effect on the anchor text
    </i>
  </a>
<div>
++++
//////////

== Sizes

For more eye-minded placement, or to place emphasis on, all icons can be
specified in different sizes by the *optional* parameter `size`.

NOTE: The size of an icon is typically specified relative to the *base* font
size. Today, the base font size is set to `16px`. That mean for for font
icons, that the *width* of an icon is set to `32px` if a relative size
of `2x` is specified.

See with the following what sizes are available.

=== Fixed Size

If needed, the icon size can given in *absolute* sizes from `18px` to `48px`.

include::{tabledir}/mdi_icons/100_absolute_sizes.asciidoc[]

=== BS Grid Size

For a better Bootstrap integration, the icon size can be given like the
view-port shortcuts `xs`, `sm`, `md`, `lg` and `xl`.

include::{tabledir}/mdi_icons/110_bs_grid_sizes.asciidoc[]

=== Relative Size

All icons can be specifier relativ to the base size of `1em` from `1x` to `10x`.
See the examples with the table below.

include::{tabledir}/mdi_icons/120_relative_sizes.asciidoc[]

== Rotate

To vary icons in their orientation, the icons can be rotated for 7 different
angle. This is quite useful, if an icon has an orientation already but does
*not* fit your need.

NOTE: Using `flip-*` and `rotate-*` at the *same* time is *not* supported

include::{tabledir}/mdi_icons/200_rotate.asciidoc[]

== Flip

Like `rotate`, an icon can be flipped by horizontal and vertical *axes*. It is
similiar to `rotate` but the *angle* (perspective) remains *unchanged*.

NOTE: Using `mdi-flip-*` and `mdi-rotate-*` at the same time is *not* supported

include::{tabledir}/mdi_icons/300_flip.asciidoc[]

== Spin and Pulsed

For realy *eye-minded* placements of icons, icons can be animated im terms
of *rotation* and *pulse*. Be careful using animated icons, because this
may cause disturbing effects and can demand unwanted attention.

include::{tabledir}/mdi_icons/400_spin_pulsed.asciidoc[]

== Color Palette

The implementation of _MDI_ font icons support the full color palette of
_Google_'s_ Material design specification.

=== BW Colors

The default color set used for _MDI_ are *black-and-white* for the flavours
`light` and `dark` of default (dark) if *not* specified.

include::{tabledir}/mdi_icons/500_bw_color_palette.asciidoc[]

=== BS Colors

The implementation of _MDI_ font icons support the base color palette of
Bootstrap range from `primary` to `danger`.

.Bootstrap base color palette
lightbox::lightbox-base-color-palette[ 300, {lightbox-image-data-base-color-palette} ]

include::{tabledir}/mdi_icons/510_bs_color_palette.asciidoc[]

=== MD Color Palette

For _J1 Template_, 17 additional color variations are available comply with
the concepts of _Google Material Design_:

.Material Design color palette
lightbox::lightbox-md-color-palette[ 800, {lightbox-image-data-md-color-palette} ]

==== Indigo

The color `Indigo` is used as the `primary` color for J1 Template. You'll find
this color quite often in various `weights` (ranges from `50` to `900`).

include::{tabledir}/mdi_icons/601_md_color_palette_indigo.asciidoc[]

==== Pink

The color `Pink` is used as the `complementary` color for J1 Template. You'll
find this color to put an emphasis on some elements. All colors comes in ranges
from `50` to `900` but for `Pink` mostly the default `weight` of `500` is used.

include::{tabledir}/mdi_icons/602_md_color_palette_pink.asciidoc[]

==  Icon Overview

The Material Design Icon Font support a rich set of 3400+ icons from a wide
varity of topics.

NOTE: Click on the elements below to copy icon data to clipboard

++++
<div class="icons" id="icons"></div>

<script>
  (function () {

    var icons          = {};
    var icon_database  = '/assets/data/mdi_icons.json';

      function load_data_database() {
        // Returns the icon database object
        return $.ajax({
          url:      icon_database,
          success:  function (data) {
            if (typeof data == 'string') {
              icons = JSON.parse(data);
            }
            if (typeof data == 'object') {
              icons = data;
            }
          }
        })
      };

      $.when( load_data_database() ).done (
        function( load_database_response ) {

          icons.push({ "name": "blank", "value": "f68c" });

          var copyText = function (text) {
              var copyFrom = document.createElement('textarea');
              copyFrom.setAttribute("style", "position:fixed;opacity:0;top:100px;left:100px;");
              copyFrom.value = text;
              document.body.appendChild(copyFrom);
              copyFrom.select();
              document.execCommand('copy');
              var copied = document.createElement('div');
              copied.setAttribute('class', 'copied');
              copied.appendChild(document.createTextNode('Copied to Clipboard'));
              document.body.appendChild(copied);
              setTimeout(function () {
                  document.body.removeChild(copyFrom);
                  document.body.removeChild(copied);
              }, 1500);
          };
          // Skip info record 0 (j=1)
          for (var j = 1; j < icons.length; j++) {
              var div = document.createElement('div'),
                  i = document.createElement('i');
              i.className = 'mdi mdi-' + icons[j].name;
              div.appendChild(i);
              var code = document.createElement('code');
              code.appendChild(document.createTextNode('#' + icons[j].value));
              div.appendChild(code);
              var span = document.createElement('span');
              //span.appendChild(document.createTextNode('mdi-' + icons[j].name));
              span.appendChild(document.createTextNode(icons[j].name));
              div.appendChild(span);

              span.onclick = (function (icon) {
                  return function () {
                      //document.getElementById('name').innerHTML = icon.name;
                  };
              })(icons[j]);

              i.onmouseup = (function (icon) {
                  return function () {
                      //copyText(String.fromCharCode(parseInt(icon.value, 16)));
                      copyText('\\' + icon.value);
                  };
              })(icons[j]);

              code.onmouseup = (function (icon) {
                  return function () {
                      copyText('#' + icon.value);
                  };
              })(icons[j]);

              span.onmouseup = (function (icon) {
                  return function () {
                      copyText('mdi-' + icon.name);
                      //copyText(icon.name);
                  };
              })(icons[j]);

              document.getElementById('icons').appendChild(div);
          }
      });

  })();
</script>
++++