Tip:
Highlight text to annotate it
X
ROB DODSON: Hey, everybody.
What's up?
It's Rob Dodson here, from the Google Developer Relations
team.
And in this series we're going to be covering
the basics of using Polymer's core-icon elements.
In lesson 1, we'll look at how you
can use core-icon to get your very first image up on screen.
And in lesson 2, we'll look at how
you can load in a custom icon set of your own making.
But let's start with Lesson 1, how
to get your very first icon up on screen.
So just about every website is going
to need to use icons at some point.
So you know, looking at the Polymer site,
we've got the Search icon here.
We've got a few buttons with icons.
We've even got some of these arrows
down here that include it.
And so, what we're going to do today is,
we're going to look at how you can use the core-icon element
to get a single icon up on screen,
maybe something like a letter.
And how you could use maybe the core-icon elements
set to load in a default set of icons.
That'll make it just a lot faster
for you to get some icons displaying on screen.
So, starting us off, let's first look at how
we can get a core-icon up on screen.
So here, I'm assuming it's in bower_components.
And I've just imported its definition.
And once I drop my core-icon on the page,
I can give it a source attribute and point to some image file
that I've got saved somewhere.
So here I'm loading this Android icon.
But I could refer to just about any image format that I want.
It doesn't have to necessarily be SVG.
It could be like a png, a gif, webp-- something like that.
But typically we prefer, and we recommend, that you use SVG.
Primarily because it's a vector format.
Which means, it's not going to lose any quality as you're
scaling the image up or scaling it down.
Now, you might look at this and think,
it's not really a significant improvement
over using something like the image tag.
We've still got to refer to some source attribute, that's
some file that we've got saved on disk.
And that doesn't really save us that much time.
So to make things easier on us, we
can actually include a default icon set and pull
our icons from there.
So let's take a look at that.
So here I'm including core-icons, instead of
just the core-icon element.
Note the s here.
This is plural.
And what that's doing is, it's going
to still load in the definition for core-icon,
but it's also going to pull in a default icon set.
So now you can just say, hey, I want an icon.
I want it to be an Android icon.
And it's going to load that from my default icon set.
There's a bunch of icons in the set.
So I could throw in a Cloud icon.
I could throw in a Polymer icon.
In fact, if you want to take a look at the full suite of icons
that are in the default set, you can follow this link
right here.
That'll take you to this page.
There's tons of great stuff that you
can look at and throw into your site or application.
All right.
Now we've got something showing up on screen.
The next thing we have got to do is
we've got to give it some size and we've got to style.
So, I'm going to just apply some CSS classes here
to change the size of my icon.
And that's so I can override the CSS that
gives the icon its default sizing of 24 pixels.
So this icon, smaller class, for instance,
has a width and height of 20 pixels.
That's going to give me this guy down here, who's much smaller.
Likewise, using icon-larger, width and height 90 pixels
gives me a much larger icon.
And now to style this thing, it's super simple.
We're just going to give it a color,
using the color property in CSS.
Set it equal to this bright green value.
And we'll get this guy over here on the right.
So that about covers the basics of getting our core-icon up
on screen.
Let's switch over to our Code Editor now,
and we can actually see if we can
get this to display in our browser.
All right, so the first thing we needed to do
is we need to make sure we're loading the platform.
So we're going to pull in bower_components
/platforms/platform.js.
That's going to give us access to all of the web component
technologies, so we can start using things like HTML imports.
So then we're just going to write out an import.
And we're going to pull in that core-icons definition.
So we're going to say core-icons-- core-icons.html.
Note reason core-icons-- the plural one here.
Because that's going to give us access to the default icon set.
And it's also going to load in the definition for core-icon
for us.
So then we can just write out a core-icon tag
and give it an icon attribute.
And we'll point it at that Android icon
that we've been using so far.
Save this.
And go to our browser, and refresh the page.
And up there in the top left corner,
we've got a little bitty icon.
So the next thing I want to do is,
I want to give this icon a size.
So I'm going to start to write out a style tag.
And I've got to remember, I've got
to add a class to my icon elements.
I'm going to go down there.
And we'll give it a class of icon-larger .
So our CSS has greater specificity.
So we're going to use that icon-larger class.
And we'll set the width and height to 200 pixels.
It's kind of a big icon.
But that way, everyone on the video can see it.
So go back and refresh the page.
And we've got this much bigger icon.
Now if you go and check out the Polymer documentation
for the core-icon element, you can actually
scroll down the page.
And you'll see that there is a link down here
at the bottom, which will point to the core-icons element set.
So you can actually browse through all
of the icons that are available in this default set.
So scrolling around, I can see that there's this cool Cloud
icon.
And if I want, I can just copy its name.
Go back to my Code Editor, paste that into my icon attribute.
Then when I refresh the page, I've
got this cooler Cloud icon that I can work with.
And going back, if I want, maybe I can grab this Drive icon.
Drop that into my icon attribute, refresh the page,
and I've got the Drive logo.
Sweet.
But I want to stick with that Android icon,
because we've been working with it for a bit now.
So I'm going to put Android back in there.
And the last thing I want to do is I want to give it a color.
So over my CSS, I'm just going to use a color property.
And I'm going to set it to this cool bright green hex value.
So save that, go back and refresh the page.
And I've got this bright green Android icon.
So that about covers the basics of using
the core-icon elements.
In the next video, we're going to look
at how you can load in additional icon sets,
including icon sets that you create yourself.
Thanks for watching.