Customize css class

[marc-mabe]

Hi,

Thanks for this library :+1:

Only one small thing is that class="material-icons" is quite long and I would like to customize the used css class to a shorter one.

Like this:

$material-icons-css-prefix: 'mi'; // defaults to 'material-icons'

<i class="mi">pie_chart</i>
<i class="mi-outlined">pie_chart</i>
<i class="mi-round">pie_chart</i>
<i class="mi-sharp">pie_chart</i>
<i class="mi-two-tone">pie_chart</i>

[marella]

These classes and Sass variables are available in the CSS Classes method but deprecated.

I don't recommend using short names like mi as:

1. It may conflict with utility classes from other CSS frameworks or JS libraries that generate short class names.
2. Using standard class names available from Google Fonts makes it easier to switch between this package and the fonts CDN.

[marc-mabe]

Hi @marella,

It may conflict with utility classes from other CSS frameworks or JS libraries that generate short class names.

I'm totally aware of it and I'm not suggesting to change it in the library just asking for the possibility to customize it. I'm working on a website project where I'm in control of all used frameworks and css prefixes - so I can for myself decide which css class I want to use for what.

Using standard class names available from Google Fonts makes it easier to switch between this package and the fonts CDN.

Same reason as above - I'm in control of it and I know I have to remember that mi stands for material icons and I'm not in any way asking to change it for everyone.

I'm just to lacy to type long class names and have to split html element declarations over multiple lines for readability just because the attributes getting to long.

I do see this as a customization that can be decided on an own risks - similar as defining a command alias for my own terminal (like ll).

I tried to customize it for myself but would have ended up duplicating a lot of scss logic just because the prefix is hard coded on your end.

I haven't checked the history of this nice project but from your response it seems like you where using mi before, too. Just guessing this would also be a way to use the new setup as migration step without the need to modify all used mi* classes.

Either way thank for this little lib. It's super useful even if I have to type long names.

[marella]

Hi,

I tried to customize it for myself but would have ended up duplicating a lot of scss logic just because the prefix is hard coded on your end.

If you are using Sass, you can use @extend:

.mi          { @extend .material-icons; }
.mi-outlined { @extend .material-icons-outlined; }
.mi-round    { @extend .material-icons-round; }
.mi-sharp    { @extend .material-icons-sharp; }
.mi-two-tone { @extend .material-icons-two-tone; }

or in a loop:

@each $suffix in ('', '-outlined', '-round', '-sharp', '-two-tone') {
  .mi#{$suffix} { @extend .material-icons#{$suffix}; }
}

This should also give you more flexibility for custom class names (mio instead of mi-outlined etc.) than a config option and doesn't require much code.

I haven't checked the history of this nice project but from your response it seems like you where using mi before, too. Just guessing this would also be a way to use the new setup as migration step without the need to modify all used mi* classes.

It is part of an alternative method which is still available but no longer recommended.

Either way thank for this little lib. It's super useful even if I have to type long names.

Thanks.

[marc-mabe]

@marella For some reason I didn't thought of @extend :upside_down_face: This is all what I was looking for - thanks for your help and sorry for my stupid question.