actions-window-cog

Introduced in v2.4.0
Available in TYPO3 11.5

Buttons

Button Label Button Label

Button Label Button Label

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M7 13H2V7h13V3a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5v-1zM2 3h12v3H2V3z"/><path d="M3.75 5h-.5A.25.25 0 0 1 3 4.75v-.5A.25.25 0 0 1 3.25 4h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25zM5.75 5h-.5A.25.25 0 0 1 5 4.75v-.5A.25.25 0 0 1 5.25 4h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25zM7.75 5h-.5A.25.25 0 0 1 7 4.75v-.5A.25.25 0 0 1 7.25 4h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25zM15.897 11.399l-1.213-.346a2.685 2.685 0 0 0-.115-.282l.611-1.101a.142.142 0 0 0-.024-.17l-.656-.656a.143.143 0 0 0-.17-.024l-1.1.611a2.775 2.775 0 0 0-.282-.115l-.346-1.213A.146.146 0 0 0 12.463 8h-.927a.142.142 0 0 0-.137.103l-.347 1.213a2.685 2.685 0 0 0-.282.115l-1.1-.611a.143.143 0 0 0-.17.024l-.656.655a.144.144 0 0 0-.024.171l.611 1.101a2.775 2.775 0 0 0-.115.282l-1.213.346a.144.144 0 0 0-.103.138v.927c0 .064.042.12.103.137l1.213.346c.034.097.071.191.115.282l-.612 1.101a.142.142 0 0 0 .024.17l.656.656a.143.143 0 0 0 .17.024l1.101-.611c.091.044.186.081.282.115l.346 1.213a.146.146 0 0 0 .139.103h.927c.064 0 .12-.042.137-.103l.346-1.213c.097-.034.191-.071.282-.115l1.101.611a.142.142 0 0 0 .17-.024l.656-.656a.143.143 0 0 0 .024-.17l-.611-1.101c.044-.091.081-.186.115-.282l1.213-.346a.144.144 0 0 0 .103-.138v-.927a.143.143 0 0 0-.103-.137zM12 13.5a1.5 1.5 0 1 1 .001-3.001A1.5 1.5 0 0 1 12 13.5z"/></g></svg>

Inline

<span class="icon icon-size-small icon-state-default">
    <span class="icon-markup">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M7 13H2V7h13V3a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5v-1zM2 3h12v3H2V3z"/><path d="M3.75 5h-.5A.25.25 0 0 1 3 4.75v-.5A.25.25 0 0 1 3.25 4h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25zM5.75 5h-.5A.25.25 0 0 1 5 4.75v-.5A.25.25 0 0 1 5.25 4h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25zM7.75 5h-.5A.25.25 0 0 1 7 4.75v-.5A.25.25 0 0 1 7.25 4h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25zM15.897 11.399l-1.213-.346a2.685 2.685 0 0 0-.115-.282l.611-1.101a.142.142 0 0 0-.024-.17l-.656-.656a.143.143 0 0 0-.17-.024l-1.1.611a2.775 2.775 0 0 0-.282-.115l-.346-1.213A.146.146 0 0 0 12.463 8h-.927a.142.142 0 0 0-.137.103l-.347 1.213a2.685 2.685 0 0 0-.282.115l-1.1-.611a.143.143 0 0 0-.17.024l-.656.655a.144.144 0 0 0-.024.171l.611 1.101a2.775 2.775 0 0 0-.115.282l-1.213.346a.144.144 0 0 0-.103.138v.927c0 .064.042.12.103.137l1.213.346c.034.097.071.191.115.282l-.612 1.101a.142.142 0 0 0 .024.17l.656.656a.143.143 0 0 0 .17.024l1.101-.611c.091.044.186.081.282.115l.346 1.213a.146.146 0 0 0 .139.103h.927c.064 0 .12-.042.137-.103l.346-1.213c.097-.034.191-.071.282-.115l1.101.611a.142.142 0 0 0 .17-.024l.656-.656a.143.143 0 0 0 .024-.17l-.611-1.101c.044-.091.081-.186.115-.282l1.213-.346a.144.144 0 0 0 .103-.138v-.927a.143.143 0 0 0-.103-.137zM12 13.5a1.5 1.5 0 1 1 .001-3.001A1.5 1.5 0 0 1 12 13.5z"/></g></svg>
    </span>
</span>

Sprite

<span class="icon icon-size-small icon-state-default">
    <span class="icon-markup">
        <svg role="img"><use xlink:href="dist/sprites/actions.svg#actions-window-cog" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="actions-window-cog" size="small" />

CSS Background Image

.myclass {
    background-size: 1em 1em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='%23fff'%3e%3cpath d='M7 13H2V7h13V3a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5v-1zM2 3h12v3H2V3z'/%3e%3cpath d='M3.75 5h-.5A.25.25 0 0 1 3 4.75v-.5A.25.25 0 0 1 3.25 4h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25zM5.75 5h-.5A.25.25 0 0 1 5 4.75v-.5A.25.25 0 0 1 5.25 4h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25zM7.75 5h-.5A.25.25 0 0 1 7 4.75v-.5A.25.25 0 0 1 7.25 4h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25zM15.897 11.399l-1.213-.346a2.685 2.685 0 0 0-.115-.282l.611-1.101a.142.142 0 0 0-.024-.17l-.656-.656a.143.143 0 0 0-.17-.024l-1.1.611a2.775 2.775 0 0 0-.282-.115l-.346-1.213A.146.146 0 0 0 12.463 8h-.927a.142.142 0 0 0-.137.103l-.347 1.213a2.685 2.685 0 0 0-.282.115l-1.1-.611a.143.143 0 0 0-.17.024l-.656.655a.144.144 0 0 0-.024.171l.611 1.101a2.775 2.775 0 0 0-.115.282l-1.213.346a.144.144 0 0 0-.103.138v.927c0 .064.042.12.103.137l1.213.346c.034.097.071.191.115.282l-.612 1.101a.142.142 0 0 0 .024.17l.656.656a.143.143 0 0 0 .17.024l1.101-.611c.091.044.186.081.282.115l.346 1.213a.146.146 0 0 0 .139.103h.927c.064 0 .12-.042.137-.103l.346-1.213c.097-.034.191-.071.282-.115l1.101.611a.142.142 0 0 0 .17-.024l.656-.656a.143.143 0 0 0 .024-.17l-.611-1.101c.044-.091.081-.186.115-.282l1.213-.346a.144.144 0 0 0 .103-.138v-.927a.143.143 0 0 0-.103-.137zM12 13.5a1.5 1.5 0 1 1 .001-3.001A1.5 1.5 0 0 1 12 13.5z'/%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

@import "@typo3/icons/dist/icons.scss";
@import "@typo3/icons/dist/scss/icons-variables-actions.scss";

.myclass {
    background-size: 1em 1em;
    background-image: $icon-actions-window-cog;
}

Alias

  • information-application-context

Download

Download