Materialize Tutorial #8 - Icons

Key Takeaways

alright the gang so if you remember way back to lesson two when we set up this file initially what we did at the top is grab the Google icon font library and we placed it right there and now we're gonna make use of this library and start playing around with icons a little bit but how do we use these icons well pretty simply whenever we want to use an icon what we do is create an iTouch like this it's just an eye and then give it a class off material - icons then we can choose from loads of different icons and I'm going to show you how many icons there are in fact I've gone to the material design icons right here I'll leave the link down below so you can take a look at this and there are absolutely tons of different icons that we can use now the way we output a specific icon is by using these different key words here salts or send or redo or save so we use that keyword inside the eye tag we give it a class of material icons and then we say which icon we actually want to use inside the eye tag itself so for example if I won't want called an error then I can do that save it and if I view this in a browser now we can see this error icon right here right and we can also change the color of these at the end of the day this is a text right into fonts so if we're changing this we don't change the background color we change the text color so I could say since it's an error red - text and if I save that and view this we can see that this is now a red which is pretty cool I'm going to zoom in so you can see these a bit better all right so what other different icons can we use well there's loads but let's just do a few different examples first of all we'll say material icons right here we need that for every icon that we do then inside we'll say warning and since this is a warning I think what I'll do is make this yellow text so we'll say yellow - text and then I also want to say text - darken - - just too dark and that yellow a little bit as well let's have a look at this okay so now we get that warning triangle right there and it's yellow cool alright so what else should we do well we'll say material icons again and then this time I want it to be a cloud so let's do that and we'll make this great I think so we'll do gray - text and we need this thing right here because I've missed it off save that and preview this and now we get a great cloud finally what I'd like to do is some kind of folder source a material icons will make this Ballou and then the key word for this is folder so if we save this now and if you in a browser we can see this blue background folder because I've said blue and not blue text that's what happens when you give it a background color this is the blue text color so now we get a blue folder itself all right awesome so I said that we can use icons inside buttons and that's pretty common in web designs right sometimes you've got a button that says send with a little paper airplane on it or something like that so let's do something along those lines so I'm gonna scroll down here to where it says icons on buttons and we have anchor text right here so first of all I'm gonna make these buttons by saying BTN and I'm gonna give this a color of indigo that's a background color remember and now what I want to do is add text and also an icon inside this so what I'm gonna do is use a span tag for the text you don't need to use a span tag for the text but I like to put my text inside here just in case I want to target it in my own CSS separately I can do that using the spun tag and I'm gonna say send and then underneath that what I'm gonna do is an eye tag for a material icon and then we'll give this a class equal to material - icons and the key word for this one is going to be send so if I save that now I view this over here now it's not quite working and that's probably because there we go we've missed out an S from class so save that now and view it and now we can see this thing right here but it's not really aligned correctly it looks a bit higher than it should be of this lower than it should be so what we'll do is over here if we're using this on a button you can either say left to have the icon on the left of the button or right to float it right and if we do that then it should align a bit better now we can see in the middle that's pretty awesome okay then let's do another down here I'm gonna give this anchor tag a class of BTN I'm going to call it this pink and it's gonna have the waves effect and we'll say waves - white so we've seen all that before then the text I want this to have is going to be email so we'll make a span tag and say email inside then underneath that we'll do an attack with material icons as the class and then inside here we want to output the email icon we also want this to go to the right as well so we'll say write and save that view in a browser and now we can see an email button now what if we say left let's just change that to left and now we should see this on the left awesome so that's how we can add these icons onto buttons very easily and they look pretty cool if I'm honest now I'd like to show you those floating buttons and we touched on these in the last video there were the circular buttons and we could add icons to those as well now typically we use those icons for things like edit or add or delete you know the little controls where we're adding data or deleting data that kind of stuff so let's create those first of all we'll create the button which is a floating button by saying BTN floating then I want to make this blue and I want to make it pulse as well okay so inside here what do we want to do well all we really want to do is an icon we don't want text just an icon so we can say I got material - icons and then the first one is going to be at and that's going to give us a little plus button so if I save this now view this in a browser we can see this blue pulsating + port and that's pretty cool now let's do another one will say BTN - floating and then it will make this red and also pulse and then this one is going to be for removing an item so we'll say I don't material icons and then inside this will say remove so let's save that and we should get a little minus sign now cool that's awesome and then finally it will do one for editing so we'll say BTN - floating again then we'll make this orange and also pulse and then inside we want our icon so I dot material - icons again and then this is going to be edit save that and view in a browser and we see this little pencil to edit the item as well so all of this stuff with buttons and icons in my opinion is one of the best things about material I CSS because we can very easily make these awesome looking UI components