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:
- toccer: collapseDepth: 2 - masthead: opacity: 0.5 slides: - url: /assets/images/pages/roundtrip/icon-fonts-1920.jpg alt: Photo by Harpal Singh on Unsplash caption: Photo by Harpal Singh on Unsplash caption_href: https://unsplash.com/aquatium/portfolio caption_color: rgba_lighten_800
// 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 include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc
// 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¶ ↑
++++ <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> ++++