Replace Google Material Icons with Own Icons, Keep Same Content Code or Create New One

Question

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:

• How to set the CSS content property with a Google Material Icon?
• Material Design Icons - Codepoints

Possible Solution Links

• How to Use Material Icons
• Custom SVG Icons Angular Material

Answer 1

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.