.mi class conflict with pygments syntax highlighting

[jtokoph]

This gem adds .mi as a shorthand for .material-icons which conflicts with pygments classes.

Example when the css gem is used on a page with pygments:

You can see that the number 1 in the code shows up as an invisible square.

When I revert to the basic usage from https://google.github.io/material-design-icons/, all is well:

[Angelmmiguel]

Hello @jtokoph,

Could you use a custom version of the CSS file in your Rails? I didn't try it but I think it should work in your Rails project:

/*
 * CSS File of Material icons.
 * CSS code based on:
 * https://google.github.io/material-design-icons/#icon-font-for-the-web
 */

//= depend_on_asset "MaterialIcons-Regular.eot"
//= depend_on_asset "MaterialIcons-Regular.woff2"
//= depend_on_asset "MaterialIcons-Regular.woff"
//= depend_on_asset "MaterialIcons-Regular.ttf"

/* Use the font */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('<%= font_path('MaterialIcons-Regular.eot') %>'); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('<%= font_path('MaterialIcons-Regular.woff2') %>') format('woff2'),
       url('<%= font_path('MaterialIcons-Regular.woff') %>') format('woff'),
       url('<%= font_path('MaterialIcons-Regular.ttf') %>') format('truetype');
}

/* Base class */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/* Rules to rotate items */
.material-icons.r90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.material-icons.r180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.material-icons.r270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.material-icons.flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.material-icons.flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

I can add another CSS file without .mi but not sure if it makes sense to do it because this is a very specific use case. I believe it's better to document this use case so anyone can use a custom version if it's required.

Thanks!

[jtokoph]

I've since realized that I didn't really use the other features of the gem and just went to using the default material icon installation method.

[Angelmmiguel]

@jtokoph sounds good 👍!

I'm gonna close this issue :)