I have installed Angular Material in my angular project using the command
ng add @angular/material
I have used custom theme, also added stylesheet in index.html, but when I use icon, the icon's name is visible and not the actual icon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>DrawingTool</title>
<base href="/" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block|Material+Icons+Outlined&display=block" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
I have even tried using Material+Icons+Outlined&display=block in the stylesheet's href. But even that is not working.
<mat-icon>home</mat-icon>
