Come utilizzare le icone personalizzate in materiale angolare

Se stai cercando di utilizzare icone personalizzate in Angular Material, ci sono alcuni passaggi che devi seguire. Innanzitutto, dovrai creare il tuo set di icone. Angular Material viene fornito con un set di icone integrato, ma puoi anche crearne uno tuo. Una volta che hai le tue icone, dovrai registrarle con Angular Material. Questo può essere fatto nel file del modulo della tua app. Una volta che le tue icone sono registrate, puoi usarle proprio come le icone integrate. Puoi usarli nel tuo markup o puoi accedervi a livello di codice. Questo è tutto ciò che serve per utilizzare le icone personalizzate in Angular Material! Seguendo questi passaggi, puoi facilmente aggiungere le tue icone a Angular Material da utilizzare nelle tue applicazioni.

In questo tutorial, useremo il componente >mat-icon> per creare il font Material Icons. Il componente verrà utilizzato in aggiunta al supporto di un'icona sva personalizzata. Su GitHub, puoi trovare il codice completo funzionante. Questo post è per coloro che stanno solo imparando Angular v4.2+. Il materiale angolare per questo tutorial è stato originariamente scritto in Angular 5.2 e Angular 10.1. L'icona che useremo in questo tutorial (che assomiglia a una faccia con un sorriso) è l'icona dell'umore. Oltre a un elenco completo di icone dei materiali, il sito Web di Material Design offre una varietà di stili di icone che possono essere utilizzati singolarmente.

Ora possiamo utilizzare l'icona del mouse per visualizzare gli SVG. Inserendo un'etichetta nella proprietà input di un file.html, è possibile utilizzare l' etichetta dell'icona per specificare a quale icona si accede. L'URL deve essere https://app.html. Diamo un'occhiata a ciò che è attualmente disponibile. Quando guardi l'applicazione nel tuo browser, noterai che l'icona personalizzata ha uno stile in Materiale. Spostare MatIconRegistry in una classe di servizio lo aiuterà a mantenere e pulire il codice.

Come posso utilizzare le icone Svg in Angular 12?

Per utilizzare le icone SVG in Angular 12, dovrai installare i pacchetti @angular/material e @angular/material-extensions. È quindi possibile utilizzare il servizio matIconRegistry per registrare le icone e aggiungerle ai componenti.

Puoi gestire il codice in Angular2 utilizzando il tuo file Icon.svg come separato. Inoltre, a tale scopo è possibile utilizzare il modulo ng-inline-svg (o, se possibile, altri approcci simili). Di conseguenza, è essenzialmente una via di mezzo: avrai file separati per ogni tipo di immagine, con le immagini in linea quando la pagina viene caricata in modo da poterle manipolare utilizzando JS/CSS.

L'utilizzo di aria-descriptionby come parte del tuo SVG consentirà agli utenti con disabilità di avere un'esperienza migliore quando utilizzano il tuo sito web. Di conseguenza, quando descrivi le tue icone con aria-descritto da, sarai in grado di assicurarti che gli utenti con disabilità possano capire cosa rappresentano.

Il dibattito su Png vs. Icone in formato Svg

D'altra parte, un canale alfa può anche essere aggiunto a un file SVG. In altre parole, poiché possono essere incluse in aree trasparenti pur mantenendo un po' di colore, le icone SVG sono più versatili delle icone PNG . La scelta del file da utilizzare per le tue icone dipende dal tuo progetto specifico e dalle sue esigenze.

Come posso utilizzare le icone Svg personalizzate in Html?

Per utilizzare le icone SVG personalizzate in HTML, è necessario includere il percorso del file dell'icona nell'attributo href dell'elemento dell'icona. Il percorso del file deve essere relativo alla directory principale della pagina. Ad esempio, se l'icona si trova in una cartella denominata "icons" nella directory principale, il percorso del file sarà "icons/icon.svg".

Dall'introduzione di strumenti online come Icomoon e Fontello, i web font sono diventati molto più facili da creare. Con HTML5, abbiamo accesso a una gamma di icone molto più ampia, grazie a Scalable Vector Graphics. Se vuoi fornire supporto tecnico a Explorer 8, ci sono alcune semplici opzioni di fallback. L'identificatore di un frammento è una proprietà SVG incorporata. Possiamo fare riferimento a un frammento se vogliamo utilizzare una specifica di visualizzazione SVG o indirizzare un array. Questo elemento è un elemento SVG basato sul suo ID >view>. Per mostrare solo il cavallo nero da questo sprite del pezzo degli scacchi (da Wikipedia Commons), devi rilevare i valori proprio come faresti nello schema sottostante.

Utilizzando il tag img per definire l'immagine, la tecnica funziona bene con Firefox, Chrome, Safari (desktop) e Opera. In alternativa, puoi utilizzare un file SVG esterno per creare sprite CSS, come mostrato nell'immagine sottostante. Questa è una tecnica di produzione affidabile e pronta all'uso. L'ho testato in una varietà di browser principali (incluso IE8) e ha funzionato perfettamente. Le icone appaiono sullo schermo come tag. Ancora una volta, Icomoon può essere utilizzato per creare manualmente la raccolta di tag simbolo, oppure è possibile utilizzare alcuni plug-in Grunt (google per Grunt SVG merge) per farlo. Ad eccezione di IE9, questo metodo può essere utilizzato con tutti i principali browser. Anche la soluzione di Jonathan Neal, SVG4everybody, può essere utilizzata per risolvere questo problema.

A meno che il codice sorgente non specifichi l'attributo di larghezza desiderato, un'immagine sva non viene visualizzata nel browser Chrome. Se l'SVG non ha questo attributo, il browser ingrandirà o rimpicciolirà l'immagine.

Come utilizzare le immagini Svg sulla tua pagina web

Puoi inserire immagini SVG direttamente in HTML utilizzando il tag svg> /svg>. È possibile accedere all'immagine SVG nel codice VS o nel tuo IDE preferito copiando il codice e incollandolo all'interno dell'elemento body del tuo documento HTML. Se tutto è andato liscio, la tua pagina web sarebbe esattamente come quella mostrata qui.
Le icone possono essere create con immagini SVG semplicemente digitando il loro nome in un browser web. L'HTML può essere incorporato in essi e possono essere installate versioni memorizzate nella cache. Le prove sono promettenti anche per il futuro. Le icone devono essere create con PNG o interfacce grafiche scalabili (SVG).

Elenco di icone Svg materiale angolare

La libreria Angular Material fornisce una serie di componenti dell'interfaccia utente riutilizzabili, ben collaudati e accessibili basati sulla specifica di Material Design di Google. Una delle caratteristiche della libreria è la possibilità di utilizzare le icone SVG come icone dei materiali. Il set di icone del materiale angolare include un'ampia varietà di icone, tra cui icone dei social media, icone del tipo di file e frecce. Puoi sfogliare l'elenco completo delle icone dei materiali angolari sul sito delle icone dei materiali.

Le icone possono essere visualizzate utilizzando il componente MatIcon di Angular Material. La caratteristica principale di questo componente è la possibilità di visualizzare le immagini utilizzando caratteri Web come Font-awesome, che richiede semplicemente il nome dell'immagine richiesta. Cosa succede alle icone che non appartengono ai web font? Nell'icona, desideri apportare modifiche (ad esempio, il colore al passaggio del mouse o lo stato del pulsante in una posizione specifica) in fase di esecuzione? Il seguente errore viene visualizzato dopo aver aperto la sezione della console del browser. Quando si utilizza il contesto dell'URL della risorsa, viene utilizzato il valore unsafe. La definizione dell'URL come parametro viene utilizzata per bypassareSecurityTrustResourceUrl, che impedisce a un utente malintenzionato di iniettare un URL dannoso come questo, vedere la documentazione ufficiale di DomSanitizer.

Vedremo un metodo migliore in seguito, ma per ora li inseriremo semplicemente nella pagina app.html. Aggiungi una classe nel tag HTML mat-icon come descritto sopra. Quando un utente passa il mouse sopra l'icona, il colore dell'immagine cambia a causa dell'SCSS. Le icone ora dovrebbero cambiare colore al passaggio del mouse su di esse. Come parte di un post futuro, esamineremo il miglioramento di questo e il refactoring per consentire il caricamento delle icone utilizzando un servizio.

Come utilizzare le icone dei materiali angolari

Dove posso trovare le icone dei materiali angolari?
L'unica cosa che devi fare è utilizzare i seguenti caratteri web di Google CSS nel tuo codice HTML. Le icone dei materiali possono essere trovate in un singolo file (42 KB) e hanno dimensioni variabili da grandi a piccole. Le icone sono divise in dieci diverse categorie che puoi vedere nel repository Git. Le icone possono anche essere ospitate sul tuo server.
Quali sono alcuni dei migliori siti per vedere le icone dei materiali?
Abbiamo compilato le icone dei materiali in un repository Git, che include tutti i formati in cui stiamo rendendo disponibili.
Qual è il modo migliore per personalizzare la mia icona?
L'elemento class deve essere aggiunto al tag HTML mat-icon, come mostrato sopra. L'aggiunta di SCSS alla classe cambia il colore dell'icona ogni volta che un utente ci passa sopra. Quando si passa con il mouse sopra le icone, ora dovrebbero cambiare colore.

Come utilizzare le icone dei materiali angolari

Le icone Angular Material sono SVG che possono essere utilizzate all'interno dell'applicazione Angular. Per utilizzare un'icona, aggiungi semplicemente la classe dell'icona a un elemento. Ad esempio, per utilizzare l'icona account-circle, dovresti aggiungere la classe mat-icon-account-circle a un elemento.

Disponiamo di librerie di materiali in angolare che possono essere utilizzate per progettare rapidamente la nostra applicazione e assegnarle i tag in build. La libreria dei materiali contiene un'icona mat, necessaria per mostrarci le icone. Nelle sezioni seguenti impareremo come installare le librerie richieste e come implementarle per visualizzare le icone nella nostra applicazione. Il nostro primo servizio è MatIconRegistry, che è un registro che ci consente di identificare e definire alias per le icone utilizzando un servizio iniettabile. L'icona è molto semplice da usare, ma richiede che questa direttiva sia importata nel progetto o nel modulo root dove intendiamo visualizzarla. Avvia il comando sopra menzionato sul prompt dei comandi per creare un nuovo progetto angolare. Prova uno dei comandi elencati di seguito per assicurarti che tutte le librerie necessarie siano installate nel nostro progetto. Ciò è particolarmente vero per gli sviluppatori, che possono utilizzare la libreria e il modulo direttamente nella nostra applicazione senza dover affrontare i passaggi per aggiungere la libreria e il modulo al modulo root.

Mat-icona Svg

Un mat- icon svg è una semplice grafica vettoriale che può essere utilizzata per rappresentare un'icona o un logo. La grafica può essere ridimensionata senza perdere qualità e può essere facilmente modificata o cambiata.

Usando il componente mat-ion dei materiali angolari, possiamo generare SVG locali. Stiamo inserendo il servizio MatIconRegistry e DomSanitizer nel costruttore. La funzione registerIcons() include i parametri load e URL, oltre a una funzione privata chiamata load. Se usiamo questa variazione, dovremo solo aggiungere il nome del file immagine. Se stai usando una stringa, la funzione di caricamento di icon.service è leggermente diversa. Il nome dell'immagine verrà generato utilizzando l'indice come chiave per il nome dell'immagine nella funzione di caricamento. Questo servizio deve ora essere attivato quando l'applicazione inizia a caricarsi. È molto più facile leggere e mantenere il codice perché è molto più leggibile. Abbiamo suddiviso le immagini in sezioni separate ed è stato implementato un servizio più semplice.