CSS - Material Icons (CSS customization)


I have been playing with the new CSS customization feature for pro users (AWESOME!!). Works very well and works well even in iOS mobile app. I want to use Material Icons in my outlines and found a way to do it with CSS.

First load the Material Icons using the following CSS:

   @font-face {
      font-family: 'Material Icons';
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
    .material-icons {
      font-family: 'Material Icons';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;

Then to use the font, for example when I use the @ sign, I often use it as a way of marking a conversation with someone @Jim @Frank and so on, then I use this:

a[title^="Filter @"]:before {
 font-family: 'Material Icons';
 content: " \E87C ";

It then looks like this:

I hope this helps someone.



Thanks for sharing this. It’s a simple and fun way to try out the css feature and your code here will be my first experience using it.


Really like to see another icons which are can use for locations or waiting_for etc…


For example every locations begins with “@_” so if you know an hack to do this with an nice icon it would be Awesome @Chris_Kunicki



Can you describe this further? I am not sure what you are asking @DimitryJacobs


That you can made an custom CSS Symbol/ Icon for location, like an house, that works with every tag has the prefix @_ like @_location1, @_location2 etc

Hope this clear it up what my wish is for


Yes, use this:

a[title^="Filter @_"]:before {
 font-family: 'Material Icons';
 content: " \e88a";

You can find more icons here (find the name of the icon, then in the next link find the codepoint number associated with it):

Also, you can look up their content code (the number e88a is what you replace) using this list:


Thanx Chris


Thanks for the details here. I was missing this info and went looking for it. Can’t wait to experiment with it!