Based on the code snippet below (and found here), the material library is styling the component based on the text content of mwc-icon. After looking at the source code for mwc-icon found here, there doesn't seem to be any javascript logic doing the styling directly. Somehow this seems to be happening in the css or in the font definition itself.
How is the icon being applied/rendered in place of the text?
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
<mwc-icon>shopping_cart</mwc-icon>
<script type="module">
import '#material/mwc-icon';
</script>
The answer for your question is that the font-family property set in the file.
You have imported the Material Icons font and used it. There is where the icon name you enter is defined. Instead of character definitions icon names are defined and mapped to the corresponding svg or png images.refer here
Related
I'm trying to make a website using Yew framework(?). I want to use a special font. I downloaded the font and I imported it into html, but Yew used server-side rendering and it doesn't allow me to just import a .ttf file as easily as a static page. Is it even possible with Yew.
This is what I used
#font-face {
font-family: "terminal";
src: url(windows_command_prompt.ttf);
}
To use a custom font or to use a file(ie css or images). You have to use the tag in the index.html file and a the data-trunk attribute to the tag. Then, you have to add the right rel tag. You are trying to use a font, so you will just copy the file on the web. It does depend on what file type you are using and what you are going use for to decide what rel tag you need. Read more about it here.
<link data-trunk rel="copy-file" href="file/path.ttf">
Using 2sxc on DNN, I have a website that uses SVGs for icons in content types. The client wants to be able to upload the SVG icons to 2sxc via a Link field but then instead of rendering <img src="#Content.SVG" />, they want it to render the source code of the SVG (so we could manipulate the fill color via CSS). Is this even possible and how could it be done?
Basically 2 steps
Get the real file name using 2sxc and DNN
Then load the file as a string using normal .net stuff System.IO and add it to your html - https://learn.microsoft.com/en-us/dotnet/api/system.io.file.readalltext?view=netframework-4.5.1
ca. like this
<div>
#Html.Raw(System.IO.File.ReadAllText(fileName)
</div>
Some examples of how to do this can be found below
Using the fetch API
How to convert image (svg) to rendered svg in javascript?
Older methods such as XMLHttpRequest or jQuery
Include SVG files with HTML, and still be able to apply styles to them?
Using D3
(Embed and) Refer to an external SVG via D3 and/or javascript
Using a custom JS library
One example: SVGInjector
Interestingly Dnn is doing this nowadays and you can look at the code here. If you ignore the caching, you might be able to do similar in a View.
https://github.com/dnnsoftware/Dnn.Platform/blob/0d3b931d8483b01aaad0291a5fde2cbc0bac60ca/DNN%20Platform/Website/admin/Skins/Logo.ascx.cs#L123
And that is called from above, see ~line 71, so they are doing a real inject of the file contents to inline. Obviously caching file-access stuff should be a priority for caching if the website is high-traffic, but otherwise it is not needed or at least secondary.
I am using material web components in my project and I would like to change the font family. I was going through their documentation and I have tried to do that by setting the variable in my sass file like this:
$mdc-typography-font-family: Comfortaa, sans-serif !default;
But, that didn't work, in the documentation it also says that sass mixin sets the font:
mdc-typography-base
How can I change the mixin to use a different font-family?
I figured this out by removing !default flag:
$mdc-typography-font-family: Comfortaa, sans-serif;
Also, don't forget to embed Google Fonts in the head tag:
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
I have an SVG element on my page. I want to use it as the page's favicon. How do I do this in JavaScript?
Doing this is astoundingly convoluted. You can see my solution in action here: the methodology is described below (getting the HTML elements, by ID or otherwise, is left as an exercise for the reader).
In the HTML
Make sure your SVG element includes the attribute xmlns="http://www.w3.org/2000/svg", as you're going to need to take the source of the element as its own file, and the XMLNS declaration is required for standalone SVG files. (Also note that this means your SVG will need to be self-contained and can't refer to elements in its parent document with something like <use>.)
Optionally, wrap the element in a <div> or <span>, which you may use to get the content of the <svg> element using .innerHTML. (Neither the innerHTML nor the outerHTML attributes are present on SVG elements in the current HTML standard.)
Include a <link rel="icon"> in your page's <head>.
In JavaScript
Get the source of the SVG element you want to set as your favicon by getting the innerHTML attribute of the HTML element you've wrapped it in, or by calling new XMLSerializer().serializeToString() on the SVG element.
Create a DataURL for this element as a document by prepending the string "data:image/svg+xml," to the source. (If most browsers supported SVGs for favicons, we'd be done here, but since, at time of writing, they don't, we must go deeper.)
Create an <img> element that you'll be routing the image through, add an event listener to it for the load event that will draw the image once control returns to the event loop (as spec-compliant browsers won't let you read the image synchronously - see this crbug), and set the DataURL of your SVG source as its src attribute. (The steps between this and step 8 can happen either in sync now, or as part of the listener callback; they just need to happen before you draw the image.)
Decide what resolution you want to render your favicon to - My examples will use 64x64, for compatibility with high-DPI (Retina and Super Retina) displays.
Create a <canvas> element (heretofore referred to as canvasElement) and set its dimensions (by setting canvasElement.width = 64 and canvasElement.height = 64).
Create a drawing context for the canvas using canvasElement.getContext('2d') (heretofore referred to as ctx).
If you're re-using a canvas you've created beforehand, set ctx.globalCompositeOperation = "copy", or clear it with ctx.clearRect(0, 0, 64, 64).
Somewhere in the execution sequence following from the load listener you added to the <img> element you created in step 3, draw the image onto the canvas using ctx.drawImage(svgImg, 0, 0, 64, 64) (where svgImg is the <img> element you set the src to the SVG DataURL).
Create a PNG DataURL from the canvas using canvasElement.toDataURL(), and set that to the href attribute of the <link rel="icon"> element in your HTML.
I know its already answered but It too much work for such a simple task just store your svg in a svg file and use it as favicon in Head Tag.
<link rel="shortcut icon" href="favicon.svg" type="image/x-icon">
I have tried and this worked for me:
<link rel="shortcut icon" href="favicon.svg" type="image/svg">
Change the type="image/x-icon" to type="image/svg".
I have images in my theme (in the Content/ directory) and I want to show them in different places.
My current approach is : <img src="#Url.Content("~/Themes/MyTheme/Content/Images/image.gif")" />
This works, but is not very maintainable (what if I want to switch themes, etc).
Is there an built in method, something like GetCurrentThemeDirectory() that would return the directory so I could do or something like that?
Edit: from mdm's comment, I realize that changing the theme isn't a valid concern. I really just want to avoid typing out the url for every reference
Where are you referencing the image from? Module? Another theme?
If it is from the theme that has the image, then you don't need to worry about switching themes. If it is from another theme, then the image should be a part of the theme. If it is from a module, then it would make sense to store the image as part of the module or override it in the theme (see below).
If you wanted to have the image as part of the theme, then you could have the module return a 'default' shape and then override that in the theme. There really shouldn't be any reason to reference the theme's images from a module or vice versa.
Edit after your edit
In the themes I've written, I've followed what the Orchard authors do. Rather than using <img> tags, images are placed in Styles/images. They can then be referenced using the CSS background-image attribute.
In Views/Branding.cshtml:
<div id="header"></div>
<h1 id="branding">#WorkContext.CurrentSite.SiteName</h1>
And then in site.css:
#header {
/* snip */
background-image: url(images/header.png);
/* snip */
}
Themes/TheAdmin/site.css contains plenty more examples of this method.