CODEWITHSUNDEEP
htmlcssmaterialize
frumbert
frumbert

Reputation: 2427

change material icon from parent class?

I'm trying to change the content of material icons when a parent of that element has a different class.

So when a icon is presented by itself, it might have the ligature check_box_outline_blank, but when a parent of that item has a different class, the ligature would be check_box.

If the content property was allowed on non-psuedo items I'd do something like

figure.selected figcaption i {
  content: "check_box";
}

but that's not a thing ..

https://jsfiddle.net/frumbert/mw1fjs1r/

I was trying to do the same with psuedo elements but I need to then hide the text inside the existing icon. I tried to follow https://codepen.io/marblegravy/pen/BpyWLE which uses text-indent tricks (and works) but my attempt doesn't work.

I got reasonably close, but as you can see in the fiddle, the figcaption has no background with the psuedo element version (or other properties - border, padding, etc).

I'd prefer a (non-script) way to change the material icon, preferably using the names (it's a pita to copy icon codes from https://material.io/icons/!)

Upvotes: 1

Views: 431

Answers (1)

jagpreet
jagpreet

Reputation: 84

As you explainded, we can't use content property. I made some small change in the html and css. I put both the check_box_outline_blank and check_box together and slide on the left when we have selected class on figure.

Here is the link: https://fiddle.jshell.net/dw5ra8xL/1/ just add selected class to the figure in the example

Hope this works for you.

Thanks

<figure>
    <img src="https://placehold.it/150">
<div>   <figcaption>
  <i class="material-icons">check_box_outline_blank check_box</i>
</figcaption></div>
</figure>

<figure class="selected">
    <img src="https://placehold.it/150">
    <div><figcaption><i class="material-icons">check_box_outline_blank check_box</i></figcaption>
</div>

figure div {
    position: absolute;
    top: 0;
    right: 0;
   width: 24px;
    height: 24px;
    overflow: hidden;
}
figure figcaption {
    position: relative;
    background-color: #999;
    color: #fff;
    left: 0px;
    width: 55px;
    overflow: hidden;
}
figure.selected figcaption {
     left: -29px;
}

Upvotes: 1

Related Questions