Some Google Material Icon do not work w/ outlined style while working fine in regular
Application Type
Service Studio Version
11.53.33 (Build 61790)

Hello community 👋 ,

I'm facing quite a strange issue. In my project, I'm using google material-icon library.
Icons are stored here and deployed to target as you can see below. 
And then in CSS, here what we have : 

This is working fine. 

But, I need to use the outlined version of the icons. So, what I did is the following : 
I also store and deploy to target the outlined version of the icon and change the font family to 'Material Icons Outlined' and the correct source on the ".material-icons" class.
This is kind of working. Most of the icons are displaying correctly, but some of them are not showing. 

Does anyone already faces that kind of issue ? 
Thanks for your help 🙏 


@Vincent PERHIRIN  If you able to create the same scenario in your personal environment and share that oml, it will be easy to check what is the issue.

Thank you for your feedback @Naveen N, I'll try to provide this soon :).


i used this code 


    font-family: 'Open Sans';

    font-style: normal;

    font-weight: 400;

    src: url('/<your directory>/OpenSans.GoogleFonts.css')


@font-face {

  font-family: 'Material Icons';

  font-style: normal;

  font-weight: 400;

  src: url('/<your directory> /MaterialIcons-Regular.eot'); /* For IE6-8 */

  src: local('Material Icons'),


       url('/<your directory> /MaterialIcons-Regular.woff2') format('woff2'),

       url('/<your directory> /MaterialIcons-Regular.woff') format('woff'),

       url('/<your directory> /MaterialIcons-Regular.ttf') format('truetype');


.material-icons {

  font-family: 'Material Icons';

  font-weight: normal;

  font-style: normal;

  font-size: 24px;  /* Preferred icon size */

  display: inline-block;

  line-height: 1;

  text-transform: none;

  letter-spacing: normal;

  word-wrap: normal;

  white-space: nowrap;

  direction: ltr;

  /* 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; }

.material-icons.md-64 { font-size: 64px; }

/* Rules for using icons as black on a light background. */

.material-icons.md-primary { color: var(--color-primary); }

.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); }

All the resources as Deploy to Target Directory.

And i used a html tag with a expression

Class = 'material-icons'

On the expression the value is the icon name. E.g: home

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.