[MUSIC PLAYING]
Hey, everyone.
What's up?
It's Rob Dodson.
Welcome to the very first update episode of Polycast.
In these videos, I'm going to go back in time
and dig up some of our older episodes
so I can update them with all the Polymer 1.0 goodness.
Today, we are starting with Polycast numero
uno, which is on core-icons.
So I'm going to show you how to work
with the new iron-icon element.
Let's take a look.
So today, I'm going to help you convert the previous episode,
which worked with the core-icon element,
to the updated iron-icon that is now part of Polymer 1.0.
Many of the elements that were previously in the core set
have now been ported to either the iron set or the paper set.
And the general rule of thumb that I like to keep in my head
is if the previous element was mostly just behavior,
then it has probably been moved to the iron element set.
If it had a bit of UI to it, like perhaps the core toolbar
or the core header panel, anything that's sort of visual,
then it has been moved to the paper element set.
So we're going to be working with iron-icon today.
The first thing we're going to do
is go over to the catalog at elements.polymerproject.org
and go and click on the Iron Elements set
to get the documentation.
And I'll just find the docs for the iron-icon element
inside of here.
And you'll notice that if you've watched the previous episode,
a lot of these things are the same from before.
We've still got a Source attribute
if you're working with sources.
If you are working directly with an icon,
there is still the Icon attribute.
So many of the things are similar
from the previous video.
The one thing that I do want to point out here
is a little bit further down the page.
You'll see a section on styling.
And this is going to mention styling
using custom properties.
Now, if you're not familiar with custom properties,
we covered those in a previous episode.
So if you go check out this episode,
it will explain how custom properties work.
I recommend you go and watch that
before watching the rest of this episode
because we're going to use these in a little bit.
OK.
Now, to install these in my application,
I'm going to hop over into my terminal.
And I will run bower install, save.
And you'll notice here that I'm installing from Polymer
elements/iron-icons.
All of the Polymer element sets or whatever now
live in this Polymer elements org on GitHub.
So any time you're bower installing,
you're doing it from Polymer elements.
That's going to go out and fetch the repo,
download it to my application.
So I'm ready to rock.
Now if I open my project up in Sublime,
I've actually got the old project from the old episode.
And we're going to go through and update this.
So I open up my Bower components directory.
And you'll see that inside of here,
we've got both the iron-icon element, as well as
the iron-icons element.
So by installing iron-icons, I got iron-icon for free
because it depends on it.
Next, I'm going to open my index HTML file.
And scrolling down here, I'm going
to replace the old polyfills.
These are quite old at this point.
So we're going to update them to use webcomponents-lite.js.
That is the polyfill set we use in Polymer 1.0.
And then instead of importing core-icons,
we will import iron-icons.
And that is going to import both the default icon set, as well
as the iron-icon element.
So I can use that default set.
Now, the next thing I want to do is
go down here to where it says core-icon
and replace these with my individual iron-icons.
So I can just go and delete all these.
We're going to use the same icon.
We'll use that android icon.
But this time, we'll use the iron-icon element to do it.
So iron-icon, icon equals android, right?
Pretty straightforward.
I can go boot up a local server.
And then I'll zoom in here, and you
can see that we've got our Android icon displaying.
So we're all good there.
OK.
So if you go to the Element catalog
because you want to add some additional icons
to your application and you want to look up what they're called,
logically, you're going to go and look
for the iron-icons element set docs.
And what you're going to find is a blank page
because there is a bug in the catalog right now.
So I know about this little special URL, which is basically
you take a demo file from somewhere else in the catalog,
and then you just replace the URL with iron-icons.
And that's actually going to load
in the docs for your iron-icons for you.
It's a total hack.
To make your life easier, I will give you a little annotation
here that you can click on.
So this will take you right to the icon docs.
This is a bug that we have open in the catalog.
We're going to get it fixed really soon.
If you're watching this in the future,
maybe it's already fixed.
But if you're watching this today,
and you want to read the docs, click that annotation.
It'll save you a little bit of a headache there.
Now, once I hit that URL, I'm going to see the full default
elements set.
So this is everything that I got in my iron-icons import.
And if I scroll down, there are actually other element sets
as well that I could use in my application.
So here's one called AV for audiovisual icons.
And looking around, I can see that this AV snooze
icon down here, right about here, looks pretty neat.
Right?
So maybe I want to use that in my application.
So I'll hop back into my project.
And you'll see that when I open up the iron-icons set,
that inside of here, there's a few different icon sets.
There are the AV icons.
So I just need to import that element set.
So I will drop an import after where I pulled in iron icons.
And here, I'm going to import AV icons.
Now all of those icons will be available to me as well.
So copy in my iron-icon and drop in one that says av:snooze.
And anytime you're using an icon from a set that is not
the default set, you're going to need to prefix it
with the set name and a colon.
Now when I hop back into my editor,
you can see I've got my Android icon,
and I've got my AV snooze icon.
Now, the last thing that I want to do-- as you recall,
we can style the elements using these custom properties
for width and height.
So I'm going to hop back into my editor
and create a theme.html file.
And inside of this file, I'm going to create a custom style
property.
So style is custom style.
And I can treat this kind of like a style sheet.
So I'll target the iron-icon element.
And now I can target the custom properties inside of this.
So I'm just going to make all iron-icons have
a really big width and height so that they're
visible from space, basically.
So I've set width and height.
I'm going to import my theme file.
And now when I go back to my browser and refresh the page,
I've got these ginormous icons.
So again, it's kind of absurd to make them this big.
But this way, you can globally set the size
for all of your iron-icons.
Or if you wanted to target it by class,
you can do these different things.
And in this case, it's not a very huge use
of custom properties.
But I want to get you familiar with custom properties.
I want to get you comfortable using them
because we're going to be using them a lot more in the future.
So that about does it.
You've now got the latest and greatest info
on working with icons in Polymer 1.0.
That's it for this week, folks.
Be sure to click that little Subscribe button.
As always, thank you so much for watching.
I'll see you next time.
[MUSIC PLAYING]