CSS - Material Icons (CSS customization)

🌈Share & Showcase
#1

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:

screenshot6
I hope this helps someone.

Chris

8 Likes
#2

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.

#3

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

#4

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

image

#5

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

#6

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

#7

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:

2 Likes
#8

AWESOME
Thanx Chris

#9

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

#11

In case it’s helpful, you can also pseudo-replace the bookmark with the desired icon. For example, the below will replace #boookmarks with a bookmark icon:

 @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;
    }



a[title^="Filter #bookmarks"] {
	visibility: hidden;
	position: relative;
}


a[title^="Filter #bookmarks"]:after {
visibility: visible; 
position: absolute;
	top: 0;
	left: 0;
font-family: 'Material Icons';
 content: " \e866";
}
2 Likes