marella / material-design-icons Goto Github PK

View Code? Open in Web Editor NEW

151.0 151.0 53.0 22.49 MB

Latest icon fonts and optimized SVGs for material design icons.

Home Page: https://marella.github.io/material-design-icons/demo/font/

License: Apache License 2.0

SCSS 7.34% CSS 23.26% JavaScript 69.39%

font icons material material-design material-design-icons material-icons svg

material-design-icons's People

Contributors

Stargazers

Watchers

material-design-icons's Issues

why does the svg pattern deviate from google/material-designs

i.e. action/label_outline/materialiconstwotone/

several icons are missing likely having different pattern is making harder to match what google has in latest

Icons not same as google material icons.

Some icons such as the "deployed code" icon do not exist and some icons like the "Delete" icon have different design compared to the google material icons.

Filled and outlined icons available in both folders

Why are icons like "chat_bubble.svg" (which is filled) and "chat_bubble_outline.svg" (which is outlined) both available in the outlined-folder and in the filled-folder? And not just the filled icon in the filled folder and the outlined icon in the outlined folder?

Custom optical size

Your scripts are awesome, but we would like to have an optical size other than 48px (20px).

Could we add an additional parameter to define an optical size just like you already added the "weight" param?

I could also assist you with a pull request if you want?

Thanks for a short feedback.

Thanks.

wrong new releases icon

wrong icon, here

correct icon

Cannot be read from Web Components (Shadow DOM)

<head>
  <script>
    const template = document.createElement("template")
    template.innerHTML = `
<style>
  @import url("https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css")
</style>
<i class="mdi mdi-account"></i>
`
    class MyTag extends HTMLElement {
      connectedCallback() {
        if (true) {
          // Use Shadow DOM
          this.attachShadow({mode: "open"})
          this.shadowRoot.appendChild(template.content.cloneNode(true))
        } else {
          // Not Use Shadow DOM
          this.appendChild(template.content.cloneNode(true))
        }
      }
    }
    customElements.define("my-tag", MyTag)
    </script>
</head>
<body>
  <my-tag />
</body>
</html>

Case: Not Use Shadow DOM

Case: Use Shadow DOM

How can I load a font from within the Shadow DOM?

Svgs have a fixed size without veiwbox property set

@marella Thanks for the great library.

While I was using it, I noticed the size of the icons is not changing if the width and height are set to it. All the SVGs do not have a viewbox property.

It will be great if you add this.

Change the Weight that defines the symbol’s stroke weight <span>?

environment: Reactjs

How to change the weight of a given icon?

import '@material-design-icons/font';


<span className={`material-icons-outlined`} >home</span>

I already tried with font-weight: 100; but nothing changes.

marella / material-design-icons Goto Github PK

material-design-icons's People

Contributors

Stargazers

Watchers

Forkers

material-design-icons's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs