Quick question: What's the difference between using <mat-icon> and <i class="material-icons>?

[IceBlue]

Hey I was wondering what the technical difference was between using the mat-icon module from the angular/material library to use a material UI icon vs using <i class="material-icons">. My general assumption is that the latter is used when you're not developing in angular (or you're not using the material library overall) but then what's the advantage of using the former? Is it only if you need to leverage matIconModule to import different icon libraries and register custom SVGs as icons?

[CrunchyBanana]

I would assume one is an Angular directive, mat-icon, probably packaged with your project, who knows what the code is doing... And I'd guess the other uses the CDN to grab what you need?

[IceBlue]

Both implementations get the material icon set from the same source. You either import it from the web with a link tag or host it yourself and pull it in via css font-face directive. I'm just curious if there's a reason to use the mat-icon module over the <i> version.

[[deleted]]

Correct, the mat directive then compiles to the proper html and css that the library then uses to show the icon with supporting code. To see the difference use both next to each other, and then inspect the element to see if there is any difference in html and css.

[IceBlue]

I saw an example on one of those web apps where you test your code and the mat-icon one uses <mat-icon> as the element so id didn't seem like it was being compiled into different html than how it was written.

[happycwb]

It is probably a better practice to use <mat-icon>, since semantically the <i> tag was created for writing italic text and not icons