it-swarm.com.de

Wie verwende ich die neuen Themen von Material Design Icon: Kontur, Abgerundet, Zweifarbig und Scharf?

Google hat seine Material Design Icons mit 4 neuen voreingestellten Themen überarbeitet:

Umrissen, gerundet, zweifarbig und scharf , zusätzlich zum regulären Gefüllt/Grundlinie Thema:


Wie man die neuen Themes benutzt, steht leider nirgends.


Ich habe es über Google Web Fonts verwendet den folgenden Link angegeben:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Und dann mit dem erforderlichen Symbol wie in der Dokumentation vorgeschlagen :

<i class="material-icons">account_balance</i>

Es wird jedoch immer die Version "Gefüllt/Basis" angezeigt.


Ich habe Folgendes versucht, um stattdessen das Thema Outlined zu verwenden:

<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>

und Ändern des Webfont-Links zu:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined" rel="stylesheet">

usw. Aber es funktioniert nicht.


Und es hat keinen Sinn, solche Aufnahmen im Dunkeln zu machen.


tl; dr: Hat jemand versucht, die neuen Themen zu verwenden? Funktioniert es sogar wie die Basisversion (Inline-HTML-Tag)? Oder soll es nur als SVG- oder PNG-Format heruntergeladen werden?

Danke im Voraus.

59
Aj334

Update (14/11/2018): Liste von 16 Gliederungssymbolen, die mit dem Suffix "_outline" funktionieren.

Hier ist die aktuellste Liste von 16 Gliederungssymbolen, die mit den regulären Material-Icons Webfont funktionieren und das Suffix _outline verwenden (getestet und bestätigt). 

(Wie auf der Github-Seite material-design-icons gefunden. Suchen Sie nach: "_outline_24px.svg")

<i class="material-icons">help_outline</i> 
<i class="material-icons">label_outline</i> 
<i class="material-icons">mail_outline</i> 
<i class="material-icons">info_outline</i> 
<i class="material-icons">lock_outline</i> 
<i class="material-icons">lightbulb_outline</i> 
<i class="material-icons">play_circle_outline</i> 
<i class="material-icons">error_outline</i> 
<i class="material-icons">add_circle_outline</i> 
<i class="material-icons">people_outline</i> 
<i class="material-icons">person_outline</i> 
<i class="material-icons">pause_circle_outline</i> 
<i class="material-icons">chat_bubble_outline</i> 
<i class="material-icons">remove_circle_outline</i> 
<i class="material-icons">check_box_outline_blank</i> 
<i class="material-icons">pie_chart_outlined</i> 

Beachten Sie, dass pie_chart "pie_chart _umrissen" und nicht Gliederung sein muss.


Dies ist ein Hack, um die neuen Icon-Designs mit einem Inline-Tag zu testen. Es ist nicht die offizielle Lösung.

Seit dem heutigen Tag (19. Juli 2018), etwas mehr als 2 Monate, seit die neuen Icons-Designs eingeführt wurden, sind Es gibt keine Möglichkeit, um diese Icons mit einem Inline-Tag <i class="material-icons"></i> aufzunehmen. 

+ Martin hat darauf hingewiesen, dass in Github ein Problem auftaucht, das dasselbe betrifft: https://github.com/google/material-design-icons/issues/773

Bis Google eine Lösung für dieses Problem bietet, habe ich damit begonnen, diese neuen Icon-Designs in meine Entwicklungsumgebung einzufügen, bevor ich die entsprechenden Icons als SVG oder PNG herunterlade. Und ich dachte, ich würde es mit euch allen teilen.


IMPORTANT: Verwenden Sie diese Option nicht in einer Produktionsumgebung, da die enthaltenen CSS-Dateien von Google eine Größe von mehr als 1 MB haben.


Google verwendet diese Stylesheets, um die Symbole auf ihrer Demoseite darzustellen: 

Gliederung:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

Gerundet:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

Zweifarbig:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">

Scharf:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

Jede dieser Dateien enthält die Symbole der jeweiligen Themen, die als Hintergrundbilder (Base64-Bilddaten) enthalten sind. Und so können wir dies verwenden, um die Kompatibilität eines bestimmten Symbols in unserem Design zu testen, bevor Sie es zur Verwendung in der Produktionsumgebung herunterladen.


SCHRITT 1:

Fügen Sie das Stylesheet des Designs hinzu, das Sie verwenden möchten ..__: Beispiel: Verwenden Sie für das Design "Outlined" das Stylesheet für "outline.css".

SCHRITT 2:

Fügen Sie Ihrem own-Stylesheet die folgenden Klassen hinzu:

.material-icons-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-white {
    webkit-filter: contrast(4) invert(1);
    -moz-filter: contrast(4) invert(1);
    -o-filter: contrast(4) invert(1);
    -ms-filter: contrast(4) invert(1);
    filter: contrast(4) invert(1);
}

SCHRITT 3:

Verwenden Sie das Symbol, indem Sie dem Tag <i> die folgenden classes hinzufügen: 

1) material-icons-new klasse 

2) Symbolname wie auf der Demo-Seite zu Material-Symbolen angezeigt, dem der Name des Themas gefolgt von einem Bindestrich vorangestellt ist. 

Präfixe: 

Umrissen: outline-

Gerundet: round-

Zweifarbig: twotone-

Scharf: sharp-

ZB (für 'Ankündigungssymbol'):

outline-announcement, round-announcement, twotone-announcement, sharp-announcement

3) Verwenden Sie einen optionalen 3. Klasse icon-white, um die Farbe von Schwarz nach Weiß umzukehren (für dunkle Hintergründe).


Ändern der Symbolgröße:

Da dies ein Hintergrundbild und kein Schriftzeichensymbol ist, ändern Sie die Größe der Symbole mit den height- und width-Eigenschaften von CSS. Der Standardwert ist 24px in der Klasse material-icons-new.


Beispiel: 

Fall I: Für das Outlined Theme des account_circle Symbols: 

1) Fügen Sie das Stylesheet bei:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

2) Fügen Sie das Symbol-Tag auf Ihrer Seite hinzu:

<i class="material-icons-new outline-account_circle"></i>

Optional (für dunkle Hintergründe):

<i class="material-icons-new outline-account_circle icon-white"></i>

Fall II: Für das Sharp Theme des Einschätzung Symbols:

1) Fügen Sie das Stylesheet bei:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

2) Fügen Sie das Symbol-Tag auf Ihrer Seite hinzu:

<i class="material-icons-new sharp-assessment"></i>

(Für dunkle Hintergründe):

<i class="material-icons-new sharp-assessment icon-white"></i>

Ich kann nicht genug betonen, dass dies NICHT der richtige Weg ist, um die Symbole in Ihre Produktionsumgebung aufzunehmen. Wenn Sie jedoch mehrere Symbole auf Ihrer In-Entwicklungs-Seite durchsuchen müssen, ist die Einbeziehung von Symbolen ziemlich einfach und spart viel Zeit.

Das Herunterladen des Symbols als SVG oder PNG ist sicher eine bessere Option, wenn es um die Geschwindigkeitsoptimierung für die Website geht. Schriftzeichensymbole sparen jedoch Zeit, wenn es um die Prototyping-Phase geht und überprüft wird, ob ein bestimmtes Symbol zu Ihrem Design passt usw.


Ich werde diesen Beitrag aktualisieren, wenn und zu dem Zeitpunkt, zu dem Google eine Lösung für dieses Problem hat, das Herunterladen eines Symbols nicht erforderlich ist.

25
Aj334

Was für mich funktioniert hat, ist _outline und nicht _outline dnach dem Symbolnamen.

<mat-icon>info</mat-icon>

vs 

<mat-icon>info_outline</mat-icon>
8
fxrxz

Wenn Sie bereits Material-Icons in Ihrem Webprojekt haben, müssen Sie nur Ihre Referenz in der HTML-Datei und die verwendete Klasse für Icons aktualisieren:

HTML-Referenz:

Vor

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Nach dem

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

Materialikonen Klasse:

Überprüfen Sie anschließend einfach, welchen Klassennamen Sie verwenden:

Vor:

<i className="material-icons">weekend</i>

Nach dem:

<i className="material-icons-outlined">weekend</i>

das funktioniert bei mir ... Pura vida!

5
rocaes90

Neue Designs sind wahrscheinlich (noch nicht?) Teil der Material Icons-Schriftart . https://github.com/google/material-design-icons/issues/773

5
Martin

Die letzte Bearbeitung des Aj334 funktioniert einwandfrei.

google CDN

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

Icon Element

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>
1
lakshmeesha

Ich war nicht zufrieden, dass Google die neuen Designs noch nicht als Schriftart oder SVG-Icon-Set veröffentlicht hat. Deshalb habe ich ein kleines npm-Paket zusammengestellt, um das Problem zu lösen.

https://www.npmjs.com/package/ts-material-icons-svg

Importieren Sie einfach die gewünschten Symbole und fügen Sie sie Ihrer Registrierung hinzu. Dies unterstützt auch das Verwackeln von Bäumen, da Ihrem Projekt nur die Symbole hinzugefügt werden, die Sie wirklich wollen und/oder benötigen.

npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git

b. zwei Tonsymbole verwenden

import {icon_edit} from 'ts-material-icons-svg/dist/twotone';

matIconRegistry.addSvgIcon(
            'edit',
            domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
        );

In Ihrer HTML-Vorlage können Sie jetzt das neue Symbol verwenden

<mat-icon svgIcon="edit"></mat-icon>
1
MarcusCalidus

Etwas komisch, Google hat eine Schriftart erstellt, die in Safari korrekt funktioniert, in Chrome jedoch nicht. Hier ist die https://codepen.io/anon/pen/zbavza

<i class="material-icons-round red">warning</i>

 red round warning material icon in safari 

In Bezug auf https://stackoverflow.com/a/54902967/4740291 und nicht in der Lage, die Farbe mit CSS zu ändern.

0

Am Ende habe ich die IcoMoon-App verwendet, um eine benutzerdefinierte Schriftart zu erstellen, die nur die neuen Themensymbole verwendet, die ich für das Erstellen einer Web-App benötigte. Es ist nicht perfekt, aber Sie können die vorhandene Google Font-Funktionalität mit ein wenig Setup ziemlich gut nachahmen. Hier ist ein Bericht:

https://medium.com/@leemartin/how-to-use-material-icon-outline-rounded-two-tone-and-sharp-themes-92276f2415d2

Wenn sich jemand gewagt fühlt, kann er das gesamte Thema mit IcoMoon konvertieren. Verdammt, IcoMoon hat wahrscheinlich einen internen Prozess, der es leicht machen würde, da sie bereits die ursprünglichen Material-Icons in ihrer Bibliothek haben.

Jedenfalls ist dies keine perfekte Lösung, aber es hat für mich funktioniert.

0
Lee Martin

Seit dem 27. Februar 2019 gibt es CSS-Schriftarten für die neuen Material Icon-Designs.

Sie müssen jedoch CSS-Klassen erstellen, um die Schriftarten verwenden zu können.

Die Schriftfamilien lauten wie folgt:

  • Material Icons Outlined - Umrissene Symbole
  • Material Icons Two Tone - zweifarbige Symbole
  • Material Icons Round - Abgerundete Symbole
  • Material Icons Sharp - Scharfe Symbole

Ein Beispiel finden Sie im folgenden Codebeispiel:

body {
  font-family: Roboto, sans-serif;
}

.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  Word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
}

.material-icons-two-tone,
.material-icons.material-icons--two-tone {
  font-family: 'Material Icons Two Tone';
}

.material-icons-round,
.material-icons.material-icons--round {
  font-family: 'Material Icons Round';
}

.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-family: 'Material Icons Sharp';
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons material-icons--outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons material-icons--two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons material-icons--round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons material-icons--sharp">assignment</i>
  </section>
</body>

</html>

Oder sehen Sie es auf Codepen

0
Edric

Für angular Material sollten Sie fontSet-Eingabe verwenden, um die Schriftfamilie zu ändern:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

<mat-icon>edit</mat-icon>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
<mat-icon fontSet="material-icons-two-tone">edit</mat-icon>
...
0
Ron Netzer

Der Webfont-Link funktioniert jetzt in allen Browsern!

Fügen Sie einfach Ihre Designs zu dem durch eine Pipe (|) getrennten Font-Link hinzu

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

Verweisen Sie dann auf die Klasse wie folgt:

// class="material-icons" or class="material-icons-outlined"

<i class="material-icons">account_balance</i>
<i class="material-icons-outlined">account_balance</i>

Dieses Muster funktioniert auch mit Angular Material:

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>
0
intergalactic