11

Google Material Icons has different variations in Icon font Families: Rounded, Sharp, TwoTone, etc.

The UX team is taking some icons, and customizing them bit, little thicker or minor touch up.

  1. Is it possible to replace/edit the icons, and keep the same content code without any issues? Example: We are using Visual Studio .Net Core application, and placed Material Icons in our library.

  2. Additionally, is it possible to Create New Content Code? Say, I create Company logo. Can I assign it a Content Code?

Referring to Material icons with both content code and class name

.carouselrightarrow {
    font-family: Material Icons;
    font-size: 36px;
    position: absolute;
    top: 16px;
    content: "\e409";
}

<button id="add-to-favorites"
        class="mdc-icon-button">
    <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
    <i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>

Right now, currently replacing the rounded icon base. Another reason to conduct this besides saving coding time/existing code base; if client ever want to swap to Google Material: Filled, Sharp, Two Tone, Outlined, it can be done in easy manner.

References:

Possible Solution Links

jerrythomas38
  • 759
  • 2
  • 16
  • 41
  • The `content` property just describes which unicode character to use. When your team tweaks those icons, are they modifying the existing font file and uploading a brand new one. If they don't rename any unicode characters, the new font file should still use the same characters. I would imagine this a more of question geared toward what tool they are using to manipulate font files. Do you happen to know what tools they're using? – KyleMit Jul 23 '19 at 21:24
  • I would need to ask UX team, they are editing the icons in some Adobe program, how would I retain the same unicode? I thought Google Materials self hosted just points to the svg image in a folder – jerrythomas38 Jul 23 '19 at 21:26
  • Personally, I would recommend leaving third party code untouched. It makes future migrations really painful and muddies up ownership. You *could* always import google icons and use those where you like them, and import your own icons where needed as well. – KyleMit Jul 23 '19 at 21:27
  • yeah, we are referring to everything by content code or class name, hoping it would be easy just to swap out image files, while keeping all our front end html/css code in tact – jerrythomas38 Jul 23 '19 at 21:29
  • Google publishes their icons both as an font and also as individual SVGs. Your current code suggests you're consuming as a font (`font-family: Material Icons`) – KyleMit Jul 23 '19 at 21:29
  • If you're teasing apart some google stuff, some custom stuff (especially your brand logo) than declaratively doing that early while it's still fresh is going to be much less maintenance work long term. Doing a find and replace of all instances shouldn't be too too bad upfront. – KyleMit Jul 23 '19 at 21:31
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/196889/discussion-between-kylemit-and-jerrythomas). – KyleMit Jul 23 '19 at 21:33
  • hi @KyleMit researching new possible solution links above – jerrythomas38 Jul 23 '19 at 22:06

1 Answers1

4

Your best bet is to override the CSS.

(This is not hard. The C in CSS is, "cascading," which means the thing that comes afterwards gets used instead of the thing that came before. This is overriding.)

Create a CSS file:

.material-icons.mdc-icon-button__icon--companylogo {
  font-family: "Font From UX Team";
  /* whatever other styling you need, like sizes */
  content: \0000;
}
.material-icons.mdc-icon-button__icon--on {
  font-family: "Font From UX Team";
  /* whatever other styling you need, like sizes */
  content: \0000;
}

Make sure the font file from your UX team is included somewhere before this. Also make sure that this file it loaded after the other CSS, the one that Material Icons is using right now. Replace the content directives with the character code (ask the UX team) that matches the icon you want.

This should replace all the Material Icons content that you've selected with the ones you want instead.

If you find that what they're replacing is turning out to be too much to manage custom CSS for, generate it automatically or use a CSS preprocessor like SASS.

Updated

It seems that you're mixing SVG and font items, using the font from Google and SVG from your team. This complicates things. SVG is essentially HTML, while the definitions for entities (icons) you're using are purely CSS. The problem arises because CSS expects the HTML to already be there.

You can do a few things:

  1. Use all SVG. This means not using the font file from Material Icons and including their SVG instead. Given that you're probably working within some framework that made the original decision for you, this may be very difficult. Either way, it'll be costly from the perspective of HTML listing size, therefore page load time.
  2. Assemble the SVG from your team into a font file. This requires the most work on the back end but yields the most elegant solution. Your UX team may know how to do this or they may be willing to learn, thus saving you the trouble. There may also be a completely automated way to do this in your build process (VS, right?) that may save you the trouble.
  3. Include the SVG just for the items you're replacing and adding. You have the option to either include them on every page (HTML or CSS bloat) or somehow figure out where they're needed and include them selectively (code complexity).

I would highly recommend the middle option (#2). Maybe start by asking your UX team nicely if they're able to use the editing software they already have to output a font file (ODT, TTF, etc.) instead of SVG listings, which may already be an available function. Clicking in a different place may give you the result you need, then you just add some CSS.

Stephan Samuel
  • 648
  • 6
  • 12