I added cdn to next.js head section but it does not work.
import Head from "next/head";
<Head>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
></link>
</Head>;
I tried to render this simple icon but it does not show any icon. it just simply shows string "add"
<i className="material-icons">add</i>
I came across the same problem and the following worked for me:
Add the Google Material Icon CSS to the globals.css file instead of the xxxx.module.css. After I did this, icon name worked
The workaround I found is to use Code point instead of the icon name:
<Head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
</Head>
<span className="material-icons"></span>
I solved this by disabling font optimization: https://nextjs.org/docs/basic-features/font-optimization
Related
Why can I not add stylehseet dynamically between head tag of app ionic?
Thanks very much.
I'm using
<link type="text/css" rel="stylesheet" [href]="sanitizer.bypassSecurityTrustResourceUrl(cssUrl)">
but it's only working in app.component.html and not working in index.html
Thanks
I'm trying to use the Material Icons font from Google Outlined set that just came out, but I can't figure it out. There is no information nor documentation.
Some icons are being displayed as filled and some as outlined.
eg: The account_circle icon from the Outlined set
How are you supposed to use the Outlined set? Any help is appreciated.
Update as of 2021
In short Google isn't (still) advertising the fact that you can load the different set via the Google API url on the Material Icons website. They are only, as per Google Material Icons instructions, talking about the default filled set which uses the following html tag to enqueue the Material Icons base stylesheet.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
If you want to use the Outlined, the Two Tone, Round or Sharp sets, you need to add the following to the Material Icons url.
Theme
URL parameters
CSS class
Filled (Default)
?family=Material+Icons
material-icons
Outlined
?family=Material+Icons+Outlined
material-icons-outlined
Two Tone
?family=Material+Icons+Two+Tone
material-icons-two-tone
Round
?family=Material+Icons+Round
material-icons-round
Sharp
?family=Material+Icons+Sharp
material-icons-sharp
Better performances
Like Google text-based font, Google Material Icons also accept the &display=swap url parameter.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
You can learn more about &display=swap # https://developers.google.com/web/updates/2016/02/font-display
You can also specify a <link rel="preconnect" tag in the <head> of your document to improve load performances.
<link rel="preconnect" href="https://fonts.gstatic.com">
Example
<!--head-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
<!--body-->
<span class="material-icons-two-tone">
account_circle
</span>
<span class="material-icons-two-tone">
check_circle
</span>
<span class="material-icons-two-tone">
favorite
</span>
Update, with Answer:
Looking at the Readme in the source code, https://github.com/mui-org/material-ui/tree/master/packages/material-ui-icons
You Append Outline to the icon name. So for you:
import { AccountCircleOutline } from "#material-ui/icons";
or
import AccountCircleOutline from "#material-ui/icons/AccountCircleOutline";
I do believe this answers your question. A "correct answer" is always nice! Thanks!
I am using the official google material icons: https://material.io/icons/
I want add some icons created by me, in svg.
how can I do it?
You will need to create your own web font.
If you've already got SVGs then you can possibly use something like https://icomoon.io/app/ to create one. I've not used it so can't help any further with that.
If not, you'll need to find a font authoring tool that exports to woff or woff2 or whatever web font format you need. (I think the material one is woff2)
About more it enter link description here
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<title></title>
</head>
<body>
<i class="material-icons md-light md-inactive">face</i>
</body>
</html>
I don't know what this icon is called and how to use it for my website. Can someone help me out.
That'd be one of the favicons you need to set on your page. If you use an automatic tool like https://realfavicongenerator.net you will be able to easily cover all the required different files using a single image.
The icon that is used to install to the homescreen is determined by using the largest icon found in one of the following tags:
<link rel="icon" sizes="192x192" href="nice-highres.png"> (recommended)
<link rel="icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">
Source: https://developer.chrome.com/multidevice/android/installtohomescreen#icon
Chrome uses the same icon as the favicon, bookmark icon and “Add to home screen” icon. It picks the widest PNG icon it can find which is no larger than 192×192.
Source: https://realfavicongenerator.net/blog/android-chrome-and-its-favicon/
It's called favicon. Somewhere you should have a code like this:
<link rel="icon" type="image/png" href="/favicon.png" />
Follow the href to the location. You can find it in your header somewhere.
I am having an issue in CSS where I am not able to re-collapse my mobile menu after it's initially been opened. I can't seem to track the issue down.
You can inspect the CSS and function here: http://www.whatshoulditraintoday.com/
Could someone please provide a valid explaination of what's going on here so that I may learn and fix this?
Thank you
The reason the navigation bar doesn't re-collapse is because you load Bootstrap's files two times in your page. One regular and one minified version.
<!-- In head -->
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- In body -->
<script src="/js/bootstrap.min.js"></script>
<script src="/Scripts/bootstrap.js"></script>
Remove one version and it will re-collapse as expected.