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:

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. 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. 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.